feat(oboarding): Update ilustrations (#21781)

* Share usage data screen image done

* Update login by syncing and login using recovery phrase images

*  Small refactor: remove `merge` and add a `let` binding

* Fix modal entering expected animation

Author: ulisesmac

resources/images/ui2/[email protected]

@@ -79,11 +79,11 @@
    [rn/view {:style style/community-logo-ring}]])
 
 (defn- description-container
-  [{:keys             [description description-text collection-text community-text
-                       collection-image community-image blur?]
+  [{:keys             [description description-text collection-text community-text blur?
+                       collection-image community-image description-accessibility-label]
     context-tag-props :context-tag
     summary-props     :summary}]
-  [rn/view
+  [rn/view {:accessibility-label description-accessibility-label}
    (cond
      (and (= description :text) (not (string/blank? description-text)))
      [text/text

resources/images/ui2/[email protected]

@@ -3,6 +3,8 @@
 (def ui
   {:add-new-contact               (js/require "../resources/images/ui2/add-contact.png")
    :biometrics                    (js/require "../resources/images/ui2/biometrics.png")
+   :usage-data                    (js/require "../resources/images/ui2/usage-data.png")
+   :login-syncing                 (js/require "../resources/images/ui2/login-syncing.png")
    :chat-privately-with-friends   (js/require "../resources/images/ui2/chat-privately-with-friends.png")
    :desktop-how-to-pair-sign-in   (js/require "../resources/images/ui2/desktop-how-to-pair-sign-in.png")
    :desktop-how-to-pair-logged-in (js/require

resources/images/ui2/[email protected]

@@ -91,7 +91,7 @@
     :title               (i18n/label :t/log-in-by-syncing)
     :subtitle            (i18n/label :t/log-in-by-syncing-subtitle)
     :accessibility-label :log-in-by-syncing-icon-card
-    :image               (resources/get-image :ethereum-address)
+    :image               (resources/get-image :login-syncing)
     :on-press            show-check-before-syncing}])
 
 (defn- use-empty-keycard-icon-card

resources/images/ui2/[email protected]

@@ -1,4 +1,5 @@
-(ns status-im.contexts.onboarding.share-usage.style)
+(ns status-im.contexts.onboarding.share-usage.style
+  (:require [quo.foundations.colors :as colors]))
 
 (def title-container
   {:margin-horizontal 20
@@ -16,3 +17,7 @@
   [insets]
   {:margin        20
    :margin-bottom (+ 12 (:bottom insets))})
+
+(def page
+  {:flex             1
+   :background-color colors/neutral-100})

resources/images/ui2/[email protected]

@@ -17,35 +17,38 @@
     (rf/dispatch [:navigate-to-within-stack [next-screen :screen/onboarding.share-usage]]) ;; Onboarding
     (rf/dispatch [:navigate-back]))) ;; Login Screen
 
+(defn- learn-more
+  []
+  (rf/dispatch [:show-bottom-sheet
+                {:content learn-more-sheet/view
+                 :shell?  true}]))
+
 (defn view
   []
   (let [insets           (safe-area/get-insets)
         next-screen      (:next-screen (rf/sub [:get-screen-params :screen/onboarding.share-usage]))
         share-usage-data (rn/use-callback #(share-usage-data-fn true next-screen))
-        maybe-later      (rn/use-callback #(share-usage-data-fn false next-screen))
-        learn-more       (rn/use-callback #(rf/dispatch [:show-bottom-sheet
-                                                         {:content learn-more-sheet/view
-                                                          :shell?  true}]))]
-    [:<>
+        maybe-later      (rn/use-callback #(share-usage-data-fn false next-screen))]
+    [rn/view {:style style/page}
      [quo/page-nav
       {:margin-top (:top insets)
        :background :blur
-       :icon-name  :i/arrow-left
+       :icon-name  :i/close
        :on-press   events-helper/navigate-back
        :right-side [{:icon-left           :i/info
                      :accessibility-label :learn-more
                      :label               (i18n/label :t/learn-more)
                      :on-press            learn-more}]}]
-     [quo/text-combinations
-      {:container-style                 style/title-container
-       :title                           (i18n/label :t/help-us-improve-status)
+     [quo/page-top
+      {:title                           (i18n/label :t/help-us-improve-status)
        :title-accessibility-label       :share-usage-title
-       :description                     (i18n/label :t/collecting-usage-data)
+       :description                     :text
+       :description-text                (i18n/label :t/collecting-usage-data)
        :description-accessibility-label :share-usage-subtitle}]
      [rn/image
       {:resize-mode :contain
        :style       (style/page-illustration (:width (rn/get-window)))
-       :source      (resources/get-image :biometrics)}]
+       :source      (resources/get-image :usage-data)}]
      [rn/view {:style (style/buttons insets)}
       [quo/button
        {:size                40

resources/images/ui2/[email protected]

@@ -25,16 +25,15 @@
 
 (defn root-options
   [{:keys [background-color theme status-bar-theme nav-bar-color]}]
-  (merge
-   (statusbar-and-navbar-options theme status-bar-theme nav-bar-color)
-   {:topBar {:visible false}
-    :layout {:componentBackgroundColor (or background-color
-                                           (colors/theme-colors colors/white colors/neutral-100 theme))
-             :orientation              ["portrait"]
-             :backgroundColor          (or background-color
-                                           (colors/theme-colors colors/white
-                                                                colors/neutral-100
-                                                                theme))}}))
+  (let [layout-background    (or background-color
+                                 (colors/theme-colors colors/white colors/neutral-100 theme))
+        component-background (or background-color
+                                 (colors/theme-colors colors/white colors/neutral-100 theme))]
+    (assoc (statusbar-and-navbar-options theme status-bar-theme nav-bar-color)
+           :topBar {:visible false}
+           :layout {:componentBackgroundColor component-background
+                    :orientation              ["portrait"]
+                    :backgroundColor          layout-background})))
 
 (defn dark-root-options
   []

src/quo/components/text_combinations/page_top/view.cljs

@@ -757,9 +757,7 @@
    :metrics   {:track? true}
    :options   {:theme                  :dark
                :layout                 options/onboarding-transparent-layout
-               :animations             (merge
-                                        transitions/new-to-status-modal-animations
-                                        transitions/push-animations-for-transparent-background)
+               :animations             transitions/modal-animations-vertical
                :popGesture             false
                :modalPresentationStyle :overCurrentContext}
    :component onboarding.share-usage/view})

src/status_im/common/resources.cljs

@@ -40,6 +40,14 @@
                                  :to       (:width (rn/get-window))
                                  :duration constants/onboarding-modal-animation-duration}}})
 
+(def modal-animations-vertical
+  {:showModal    {:translationY {:from     (:height (rn/get-window))
+                                 :to       0
+                                 :duration constants/onboarding-modal-animation-duration}}
+   :dismissModal {:translationY {:from     0
+                                 :to       (:height (rn/get-window))
+                                 :duration constants/onboarding-modal-animation-duration}}})
+
 ;;;; Stack Transitions
 (def stack-slide-transition
   {:push {:content {:translationX {:from     (:width (rn/get-window))