Adjust on-boarding illustrations position and scale (#20692)

src/quo/components/drawers/bottom_actions/style.cljs

@@ -28,9 +28,6 @@
    :gap                12
    :padding-horizontal 20})
 
-(def button-container
-  {:flex 1})
-
 (def description-top
   {:flex-direction  :row
    :align-items     :center

src/quo/components/drawers/bottom_actions/view.cljs

@@ -79,7 +79,6 @@
          (merge
           {:size                40
            :background          (when (or blur? scroll?) :blur)
-           :container-style     style/button-container
            :theme               theme
            :accessibility-label :button-two}
           button-two-props)
@@ -87,7 +86,6 @@
       [button/button
        (merge
         {:size                40
-         :container-style     style/button-container
          :background          (when (or blur? scroll?) :blur)
          :theme               theme
          :accessibility-label :button-one}

src/status_im/contexts/onboarding/common/background/style.cljs

@@ -5,13 +5,8 @@
 
 (def background-container
   {:background-color colors/neutral-100
-   :flex-direction   :row
+   :flex             1
-   :position         :absolute
+   :overflow         :hidden})
-   :overflow         :hidden
-   :top              0
-   :bottom           0
-   :left             0
-   :right            0})
 
 (def background-blur-overlay
   {:position         :absolute

src/status_im/contexts/onboarding/common/background/view.cljs

@@ -25,12 +25,11 @@
     :sub-text (i18n/label :t/explore-the-decentralized-web)}])
 
 (defn background-image
-  [content-width]
+  [image-view-width]
   [rn/image
    {:resize-mode :stretch
-    :resize-method :scale
+    :style       {:flex  1
-    :style         {:top   138
+                  :width image-view-width}
-                    :width content-width}
     :source      (resources/get-image :onboarding-illustration)}])
 
 (defonce progress (atom nil))

src/status_im/contexts/onboarding/common/carousel/style.cljs

@@ -5,12 +5,9 @@
 
 (defn header-container
   [status-bar-height content-width index header-background]
-  {:position         :absolute
+  {:margin-left      (* content-width index)
-   :top              0
-   :left             (* content-width index)
    :padding-top      (+ 30 status-bar-height)
    :width            content-width
-   :height           (+ 96 status-bar-height)
    :flex-direction   :row
    :background-color (when header-background colors/onboarding-header-black)})
 
@@ -62,9 +59,9 @@
    :top         (+ 12 status-bar-height)})
 
 (defn carousel-container
-  [left animate?]
+  [left animate? width]
-  (cond->> {:position       :absolute
+  (cond->> {:flex-direction :row
-            :top            0
+            :flex           1
-            :flex-direction :row
+            :width          width
-            :left           left}
+            :margin-left    left}
-    animate? (reanimated/apply-animations-to-style {:left left})))
+    animate? (reanimated/apply-animations-to-style {:margin-left left})))

src/status_im/contexts/onboarding/common/carousel/view.cljs

@@ -18,19 +18,18 @@
      :size   :heading-2}
     (get-in header-text [index :text])]
    [quo/text
-    {:style style/carousel-sub-text
+    {:style style/carousel-sub-text}
-     :size  :paragraph-1}
     (get-in header-text [index :sub-text])]])
 
 (defn content-view
   [{:keys [window-width status-bar-height index header-text header-background]} content]
   (let [content-width (* 4 window-width)]
-    [:<>
+    [rn/view {:style {:flex 1}}
-     (when content content)
      [rn/view {:style (style/header-container status-bar-height content-width index header-background)}
       (for [index (range 4)]
         ^{:key index}
-        [header-text-view index window-width header-text])]]))
+        [header-text-view index window-width header-text])]
+     (when content content)]))
 
 (defn progress-bar
   [{:keys [static? progress-bar-width]}]
@@ -64,10 +63,10 @@
           :swipeable (animation/composed-gestures progress paused? is-dragging? drag-amount)
           :tappable  (animation/tap-gesture progress paused?)
           nil)]
-    [:<>
+    [rn/view {:style {:flex 1}}
      [gesture/gesture-detector {:gesture identified-gesture}
-      [container-view {:style (style/carousel-container carousel-left animate?)}
+      [container-view {:style (style/carousel-container carousel-left animate? (* 4 window-width))}
-       (for [index (range 2)]
+       (for [index (range 1)]
          ^{:key index}
          [content-view
           {:window-width      window-width

src/status_im/contexts/onboarding/enable_biometrics/style.cljs

@@ -4,19 +4,19 @@
 
 (def title-container
   {:margin-horizontal 20
-   :padding-vertical  12})
+   :padding-bottom    20
+   :padding-top       12})
 
 (defn page-container
   [insets]
   {:flex        1
-   :justify-content :space-between
    :padding-top (+ (:top insets) 56)})
 
 (defn page-illustration
   [width]
   {:flex          1
-   :padding-top    12
+   :margin-top    12
-   :padding-bottom 10
+   :margin-bottom 10
    :width         width})
 
 (defn buttons

src/status_im/contexts/onboarding/generating_keys/style.cljs

@@ -3,10 +3,15 @@
 (defn page-container
   [insets]
   {:flex        1
-   :justify-content :space-between
    :padding-top (:top insets)})
 
 (defn page-illustration
   [width]
   {:flex  1
    :width width})
+
+(def title-style
+  {:position :absolute
+   :left     0
+   :right    0
+   :top      0})

src/status_im/contexts/onboarding/generating_keys/view.cljs

@@ -17,19 +17,22 @@
 (defn generate-keys-title
   []
   [quo/text-combinations
-   {:container-style {:margin-horizontal 20}
+   {:container-style {:margin-horizontal 20
+                      :margin-vertical   12}
     :title           (i18n/label :t/generating-keys)}])
 
 (defn saving-keys-title
   []
   [quo/text-combinations
-   {:container-style {:margin-horizontal 20}
+   {:container-style {:margin-horizontal 20
+                      :margin-vertical   12}
     :title           (i18n/label :t/saving-keys-to-device)}])
 
 (defn keys-saved-title
   []
   [quo/text-combinations
-   {:container-style {:margin-horizontal 20}
+   {:container-style {:margin-horizontal 20
+                      :margin-vertical   12}
     :title           (i18n/label :t/keys-saved)}])
 
 (defn sequence-animation
@@ -61,46 +64,42 @@
                                                                             reanimated/easings))))))
 
 (defn title
-  [insets]
+  []
-  (let [top-insets            (+ (if rn/small-screen? 62 112) (:insets insets))
+  (let [generate-keys-opacity (reanimated/use-shared-value 1)
-        generate-keys-opacity (reanimated/use-shared-value 1)
         saving-keys-opacity   (reanimated/use-shared-value 0)
         keys-saved-opacity    (reanimated/use-shared-value 0)]
     (sequence-animation generate-keys-opacity saving-keys-opacity keys-saved-opacity)
     [rn/view
-     {:position :absolute
+     {:style {:margin-top 56
-      :top      top-insets}
+              :height     56}}
      [reanimated/view
       {:style (reanimated/apply-animations-to-style
                {:opacity generate-keys-opacity}
-               {:position :absolute})}
+               style/title-style)}
       [generate-keys-title]]
      [reanimated/view
       {:style (reanimated/apply-animations-to-style
                {:opacity saving-keys-opacity}
-               {:position :absolute})}
+               style/title-style)}
       [saving-keys-title]]
      [reanimated/view
       {:style (reanimated/apply-animations-to-style
                {:opacity keys-saved-opacity}
-               {:position :absolute})}
+               style/title-style)}
       [keys-saved-title]]]))
 
 (defn content
   []
   (let [width (:width (rn/get-window))]
-    [rn/view
-     {:top      156
-      :position :absolute}
     [rn/image
      {:resize-mode :contain
       :style       (style/page-illustration width)
-       :source      (resources/get-image :generate-keys1)}]]))
+      :source      (resources/get-image :generate-keys1)}]))
 
 (defn view
   []
   (let [insets (safe-area/get-insets)]
     [rn/view {:style (style/page-container insets)}
      [:<>
-      [title insets]
+      [title]
       [content]]]))

src/status_im/contexts/onboarding/intro/style.cljs

@@ -7,9 +7,8 @@
    :justify-content :flex-end})
 
 (def text-container
-  {:flex       1
+  {:text-align :center
-   :text-align :center
+   :margin-top 4
-   :margin-top 16
    :flex-wrap  :wrap})
 
 (def plain-text
@@ -19,9 +18,8 @@
   {:flex  1
    :color colors/white})
 
-(def bottom-actions-container
+(defn bottom-actions-container
-  {:position         :absolute
+  [bottom-insets]
-   :background-color colors/onboarding-header-black
+  {:background-color colors/onboarding-header-black
-   :left             0
+   :flex-shrink      1
-   :right            0
+   :padding-bottom   (+ 20 bottom-insets)})
-   :padding-bottom   40})

src/status_im/contexts/onboarding/intro/view.cljs

@@ -2,6 +2,7 @@
   (:require
     [quo.core :as quo]
     [react-native.core :as rn]
+    [react-native.safe-area :as safe-area]
     [status-im.contexts.onboarding.common.background.view :as background]
     [status-im.contexts.onboarding.common.overlay.view :as overlay]
     [status-im.contexts.onboarding.intro.style :as style]
@@ -14,7 +15,7 @@
   [rn/view {:style style/page-container}
    [background/view false]
    [quo/bottom-actions
-    {:container-style  style/bottom-actions-container
+    {:container-style  (style/bottom-actions-container (safe-area/get-bottom))
      :actions          :two-vertical-actions
      :description      :bottom
      :description-text [quo/text