[#17423] fix: update sync flow (#17731)

src/status_im2/common/resources.cljs

@@ -46,7 +46,8 @@
    :no-contacts-to-invite-light   (js/require "../resources/images/ui2/no-contacts-to-invite-light.png")
    :no-contacts-to-invite-dark    (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")
    :no-notifications-light        (js/require "../resources/images/ui2/no-notifications-light.png")
-   :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")})
+   :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")
+   :welcome-illustration          (js/require "../resources/images/ui2/welcome_illustration.png")})
 
 (def ui-themed
   {:no-messages

src/status_im2/contexts/onboarding/welcome/style.cljs

@@ -1,6 +1,4 @@
-(ns status-im2.contexts.onboarding.welcome.style
-  (:require
-    [quo.foundations.colors :as colors]))
+(ns status-im2.contexts.onboarding.welcome.style)
 
 (def default-margin 20)
 
@@ -9,16 +7,27 @@
   {:flex        1
    :padding-top (:top insets)})
 
-(def page-illustration
-  {:flex              1
-   :background-color  colors/danger-50
-   :align-items       :center
-   :margin-horizontal default-margin
-   :border-radius     20
-   :margin-top        default-margin
-   :justify-content   :center})
+(defn page-illustration
+  [width]
+  {:resize-mode   :stretch
+   :resize-method :scale
+   :width         width
+   :margin-top    12
+   :margin-bottom 4})
 
 (defn buttons
   [insets]
-  {:margin        default-margin
-   :margin-bottom (+ 14 (:bottom insets))})
+  {:position      :absolute
+   :left          0
+   :right         0
+   :padding-left  default-margin
+   :padding-right default-margin
+   :bottom        (+ 12 (:bottom insets))})
+
+(def bottom-shadow
+  {:position :absolute
+   :height   64
+   :top      0
+   :bottom   0
+   :left     0
+   :right    0})

src/status_im2/contexts/onboarding/welcome/view.cljs

@@ -1,9 +1,12 @@
 (ns status-im2.contexts.onboarding.welcome.view
   (:require
     [quo.core :as quo]
+    [quo.foundations.colors :as colors]
     [re-frame.core :as re-frame]
     [react-native.core :as rn]
+    [react-native.linear-gradient :as linear-gradient]
     [react-native.safe-area :as safe-area]
+    [status-im2.common.resources :as resources]
     [status-im2.constants :as constants]
     [status-im2.contexts.onboarding.welcome.style :as style]
     [utils.i18n :as i18n]
@@ -30,6 +33,7 @@
   []
   (let [profile-color         (rf/sub [:onboarding-2/customization-color])
         {:keys [status-type]} (rf/sub [:multiaccount/current-user-visibility-status])
+        window                (rf/sub [:dimensions/window])
         insets                (safe-area/get-insets)]
     [rn/view {:style (style/page-container insets)}
      (when (nil? status-type)
@@ -40,10 +44,14 @@
        :icon-name  :i/arrow-left
        :on-press   #(rf/dispatch [:navigate-back-within-stack :enable-notifications])}]
      [page-title]
-     [rn/view {:style style/page-illustration}
-      [quo/text
-       "Illustration here"]]
+     [rn/image
+      {:style  (style/page-illustration (:width window))
+       :source (resources/get-image :welcome-illustration)}]
      [rn/view {:style (style/buttons insets)}
+      (when rn/small-screen?
+        [linear-gradient/linear-gradient
+         {:style  style/bottom-shadow
+          :colors [colors/neutral-100-opa-0 colors/neutral-100-opa-80]}])
       [quo/button
        {:on-press            (fn []
                                (rf/dispatch [:init-root :shell-stack])

src/status_im2/contexts/syncing/scan_sync_code/view.cljs

@@ -191,7 +191,7 @@
       {:size   :paragraph-2
        :weight :regular
        :style  style/viewfinder-text}
-      (i18n/label :t/ensure-qr-code-is-in-focus-to-scan)]]))
+      (i18n/label :t/ensure-both-devices-are-on-the-same-network)]]))
 
 (defn- scan-qr-code-tab
   [qr-view-finder]

translations/en.json

@@ -2128,6 +2128,7 @@
     "ensure-qr-code-in-focus-to-scan": "Ensure that the QR code is in focus to scan",
     "i-dont-have-status-on-another-device": "I don’t have Status on another device",
     "ensure-qr-code-is-in-focus-to-scan": "Ensure that the QR code is in focus to scan",
+    "ensure-both-devices-are-on-the-same-network": "Ensure both devices are on the same network",
     "error-this-is-not-a-sync-qr-code": "Oops! This is not a sync QR code",
     "error-syncing-connection-failed": "Oops! Connection failed. Try again",
     "camera-permission-denied": "Permission denied",