status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-10 18:06:52 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Parvesh Monu 2024-07-16 20:43:19 +05:30 committed by GitHub
parent 13232dc7b7
commit 43651ef0d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 64 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/quo/components/drawers/bottom_actions/style.cljs
View File

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

2
src/quo/components/drawers/bottom_actions/view.cljs
View File

@ -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}

9
src/status_im/contexts/onboarding/common/background/style.cljs
View File

@ -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

11
src/status_im/contexts/onboarding/common/background/view.cljs
View File

@ -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))

17
src/status_im/contexts/onboarding/common/carousel/style.cljs
View File

@ -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})))

15
src/status_im/contexts/onboarding/common/carousel/view.cljs
View File

@ -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

16
src/status_im/contexts/onboarding/enable_biometrics/style.cljs
View File

@ -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]

11
src/status_im/contexts/onboarding/generating_keys/style.cljs
View File

@ -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})

37
src/status_im/contexts/onboarding/generating_keys/view.cljs
View File

@ -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]]]))

16
src/status_im/contexts/onboarding/intro/style.cljs
View File

@ -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)})

3
src/status_im/contexts/onboarding/intro/view.cljs
View File

@ -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