From 43651ef0d0020eeea829bad437a6769427225cfe Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Tue, 16 Jul 2024 20:43:19 +0530 Subject: [PATCH] Adjust on-boarding illustrations position and scale (#20692) --- .../drawers/bottom_actions/style.cljs | 3 -- .../drawers/bottom_actions/view.cljs | 2 - .../onboarding/common/background/style.cljs | 9 +---- .../onboarding/common/background/view.cljs | 11 +++--- .../onboarding/common/carousel/style.cljs | 17 ++++----- .../onboarding/common/carousel/view.cljs | 15 ++++---- .../onboarding/enable_biometrics/style.cljs | 16 ++++---- .../onboarding/generating_keys/style.cljs | 11 ++++-- .../onboarding/generating_keys/view.cljs | 37 +++++++++---------- .../contexts/onboarding/intro/style.cljs | 16 ++++---- .../contexts/onboarding/intro/view.cljs | 3 +- 11 files changed, 64 insertions(+), 76 deletions(-) diff --git a/src/quo/components/drawers/bottom_actions/style.cljs b/src/quo/components/drawers/bottom_actions/style.cljs index 9eacbacf7b..b462a152c3 100644 --- a/src/quo/components/drawers/bottom_actions/style.cljs +++ b/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 diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index cbcc3c34bf..68de6073af 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/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} diff --git a/src/status_im/contexts/onboarding/common/background/style.cljs b/src/status_im/contexts/onboarding/common/background/style.cljs index cbde25567f..024a56022c 100644 --- a/src/status_im/contexts/onboarding/common/background/style.cljs +++ b/src/status_im/contexts/onboarding/common/background/style.cljs @@ -5,13 +5,8 @@ (def background-container {:background-color colors/neutral-100 - :flex-direction :row - :position :absolute - :overflow :hidden - :top 0 - :bottom 0 - :left 0 - :right 0}) + :flex 1 + :overflow :hidden}) (def background-blur-overlay {:position :absolute diff --git a/src/status_im/contexts/onboarding/common/background/view.cljs b/src/status_im/contexts/onboarding/common/background/view.cljs index dd88ea842d..9436cf768c 100644 --- a/src/status_im/contexts/onboarding/common/background/view.cljs +++ b/src/status_im/contexts/onboarding/common/background/view.cljs @@ -25,13 +25,12 @@ :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 {:top 138 - :width content-width} - :source (resources/get-image :onboarding-illustration)}]) + {:resize-mode :stretch + :style {:flex 1 + :width image-view-width} + :source (resources/get-image :onboarding-illustration)}]) (defonce progress (atom nil)) (defonce paused? (atom nil)) diff --git a/src/status_im/contexts/onboarding/common/carousel/style.cljs b/src/status_im/contexts/onboarding/common/carousel/style.cljs index 8c35b15bb7..e4f4439cb3 100644 --- a/src/status_im/contexts/onboarding/common/carousel/style.cljs +++ b/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 - :top 0 - :left (* content-width index) + {:margin-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?] - (cond->> {:position :absolute - :top 0 - :flex-direction :row - :left left} - animate? (reanimated/apply-animations-to-style {:left left}))) + [left animate? width] + (cond->> {:flex-direction :row + :flex 1 + :width width + :margin-left left} + animate? (reanimated/apply-animations-to-style {:margin-left left}))) diff --git a/src/status_im/contexts/onboarding/common/carousel/view.cljs b/src/status_im/contexts/onboarding/common/carousel/view.cljs index 8db48ed886..a47d2ace46 100644 --- a/src/status_im/contexts/onboarding/common/carousel/view.cljs +++ b/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 - :size :paragraph-1} + {:style style/carousel-sub-text} (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)] - [:<> - (when content content) + [rn/view {:style {:flex 1}} [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?)} - (for [index (range 2)] + [container-view {:style (style/carousel-container carousel-left animate? (* 4 window-width))} + (for [index (range 1)] ^{:key index} [content-view {:window-width window-width diff --git a/src/status_im/contexts/onboarding/enable_biometrics/style.cljs b/src/status_im/contexts/onboarding/enable_biometrics/style.cljs index ee48632000..ef8124affa 100644 --- a/src/status_im/contexts/onboarding/enable_biometrics/style.cljs +++ b/src/status_im/contexts/onboarding/enable_biometrics/style.cljs @@ -4,20 +4,20 @@ (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)}) + {:flex 1 + :padding-top (+ (:top insets) 56)}) (defn page-illustration [width] - {:flex 1 - :padding-top 12 - :padding-bottom 10 - :width width}) + {:flex 1 + :margin-top 12 + :margin-bottom 10 + :width width}) (defn buttons [insets] diff --git a/src/status_im/contexts/onboarding/generating_keys/style.cljs b/src/status_im/contexts/onboarding/generating_keys/style.cljs index 9136d09e47..4fd248b28e 100644 --- a/src/status_im/contexts/onboarding/generating_keys/style.cljs +++ b/src/status_im/contexts/onboarding/generating_keys/style.cljs @@ -2,11 +2,16 @@ (defn page-container [insets] - {:flex 1 - :justify-content :space-between - :padding-top (:top insets)}) + {:flex 1 + :padding-top (:top insets)}) (defn page-illustration [width] {:flex 1 :width width}) + +(def title-style + {:position :absolute + :left 0 + :right 0 + :top 0}) diff --git a/src/status_im/contexts/onboarding/generating_keys/view.cljs b/src/status_im/contexts/onboarding/generating_keys/view.cljs index 5a27098ac3..7877b96fa6 100644 --- a/src/status_im/contexts/onboarding/generating_keys/view.cljs +++ b/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)) - generate-keys-opacity (reanimated/use-shared-value 1) + [] + (let [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 - :top top-insets} + {:style {:margin-top 56 + :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)}]])) + [rn/image + {:resize-mode :contain + :style (style/page-illustration width) + :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]]])) diff --git a/src/status_im/contexts/onboarding/intro/style.cljs b/src/status_im/contexts/onboarding/intro/style.cljs index c5b813dcd6..ce13e2215e 100644 --- a/src/status_im/contexts/onboarding/intro/style.cljs +++ b/src/status_im/contexts/onboarding/intro/style.cljs @@ -7,9 +7,8 @@ :justify-content :flex-end}) (def text-container - {:flex 1 - :text-align :center - :margin-top 16 + {:text-align :center + :margin-top 4 :flex-wrap :wrap}) (def plain-text @@ -19,9 +18,8 @@ {:flex 1 :color colors/white}) -(def bottom-actions-container - {:position :absolute - :background-color colors/onboarding-header-black - :left 0 - :right 0 - :padding-bottom 40}) +(defn bottom-actions-container + [bottom-insets] + {:background-color colors/onboarding-header-black + :flex-shrink 1 + :padding-bottom (+ 20 bottom-insets)}) diff --git a/src/status_im/contexts/onboarding/intro/view.cljs b/src/status_im/contexts/onboarding/intro/view.cljs index 79107d8468..2497d48b24 100644 --- a/src/status_im/contexts/onboarding/intro/view.cljs +++ b/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