Add placeholder illustration in jump-to screen (#18229)

src/quo/components/empty_state/empty_state/styles.cljs

@@ -21,8 +21,8 @@
 
 (defn description
   [blur?]
-  (when blur?
-    {:color colors/white}))
+  (cond-> {:text-align :center}
+    blur? (assoc :color colors/white)))
 
 (def button-container {:margin-top 20})
 

src/quo/components/empty_state/empty_state/view.cljs

@@ -27,8 +27,7 @@
      title]
     [text/text
      {:style           (styles/description blur?)
-      :number-of-lines 1
-      :text-align      :center
+      :number-of-lines 2
       :weight          :regular
       :size            :paragraph-2}
      description]]

src/status_im/common/resources.cljs

@@ -40,6 +40,8 @@
    :keycard-chip
    {:light (js/require "../resources/images/ui2/keycard-chip-light.png")
     :dark  (js/require "../resources/images/ui2/keycard-chip-dark.png")}
+   :jump-to
+   {:dark (js/require "../resources/images/ui2/jump-to-dark.png")}
    :no-group-chats
    {:light (js/require "../resources/images/ui2/no-group-chats-light.png")
     :dark  (js/require "../resources/images/ui2/no-group-chats-dark.png")}

src/status_im/contexts/shell/jump_to/components/jump_to_screen/style.cljs

@@ -12,6 +12,7 @@
    :right               0
    :bottom              (utils/bottom-tabs-container-height)
    :align-items         :center
+   :justify-content     :center
    :accessibility-label :shell-placeholder-view})
 
 (def placeholder-image

src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs

@@ -8,6 +8,7 @@
     [react-native.linear-gradient :as linear-gradient]
     [react-native.safe-area :as safe-area]
     [status-im.common.home.top-nav.view :as common.top-nav]
+    [status-im.common.resources :as resources]
     [status-im.contexts.shell.jump-to.components.bottom-tabs.view :as bottom-tabs]
     [status-im.contexts.shell.jump-to.components.jump-to-screen.style :as style]
     [status-im.contexts.shell.jump-to.components.switcher-cards.view :as switcher-cards]
@@ -19,25 +20,16 @@
 
 (defn placeholder
   []
-  [linear-gradient/linear-gradient
-   {:colors [colors/neutral-100-opa-0 colors/neutral-100-opa-100]
-    :start  {:x 0 :y 0}
-    :end    {:x 0 :y 1}
-    :style  (style/placeholder-container (safe-area/get-top))}
-   [rn/image
-    {:source nil ;; TODO(parvesh) - add placeholder image
-     :style  style/placeholder-image}]
-   [quo/text
-    {:size   :paragraph-1
-     :weight :semi-bold
-     :style  style/placeholder-title}
-    (i18n/label :t/shell-placeholder-title)]
-   [quo/text
-    {:size   :paragraph-2
-     :weight :regular
-     :align  :center
-     :style  style/placeholder-subtitle}
-    (i18n/label :t/shell-placeholder-subtitle)]])
+  [rn/view {:style (style/placeholder-container (safe-area/get-top))}
+   [linear-gradient/linear-gradient
+    {:colors [colors/neutral-100-opa-0 colors/neutral-100-opa-100]
+     :start  {:x 0 :y 0}
+     :end    {:x 0 :y 1}
+     :style  (style/placeholder-container (safe-area/get-top))}]
+   [quo/empty-state
+    {:title       (i18n/label :t/shell-placeholder-title)
+     :description (i18n/label :t/shell-placeholder-subtitle)
+     :image       (resources/get-themed-image :jump-to :dark)}]])
 
 (defn jump-to-text
   []

translations/en.json

@@ -2020,10 +2020,10 @@
     "you-must-hold": "You must hold:",
     "you-must-now-hold": "You must now hold:",
     "you-must-always-hold": "You must always hold:",
-    "shell-placeholder-title": "Your apps will run here",
+    "shell-placeholder-title": "Your open tabs will be here",
+    "shell-placeholder-subtitle": "Jump between your communities, messages,\nwallet accounts and browser tabs",
     "no-pinned-messages-desc": "This chat doesn’t have any\npinned messages.",
     "no-pinned-messages-community-desc": "This channel doesn’t have any\npinned messages.",
-    "shell-placeholder-subtitle": "Open tabs of your communities, messages,\nwallet account and browser windows",
     "invite-friends-to-status": "Invite friends to Status",
     "share-invite-link": "Share an invite link",
     "pending-requests": "Pending requests",