status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix for multiple header spacings on onboarding screens (#15640) 

* Fix for onboarding header spacing

* Style fixes; fix for enable-biometrics

* Style fixes

* Style fixes

* Update for functional components
This commit is contained in:
Alexander 2023-04-19 14:18:36 +02:00 committed by GitHub
parent 46351543f1
commit 3ca120ca94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 177 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs
View File

@ -4,16 +4,16 @@
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn navigation-bar (defn navigation-bar
[{:keys [on-press-info]}] [{:keys [top right-section-buttons disable-back-button?]}]
[rn/view {:style {:height 56}} [rn/view
{:style {:height 56
:margin-top top}}
[quo/page-nav [quo/page-nav
{:align-mid? true {:align-mid? true
:mid-section {:type :text-only} :mid-section {:type :text-only :main-text ""}
:left-section {:type :blur-bg :left-section {:type :blur-bg
:icon :i/arrow-left :icon :i/arrow-left
:icon-override-theme :dark :icon-override-theme :dark
:on-press #(rf/dispatch [:navigate-back])} :on-press (when-not disable-back-button?
:right-section-buttons [{:type :blur-bg #(rf/dispatch [:navigate-back]))}
:icon :i/info :right-section-buttons right-section-buttons}]])
:icon-override-theme :dark
:on-press on-press-info}]}]])

12
src/status_im2/contexts/onboarding/create_password/view.cljs
View File

@ -3,6 +3,7 @@
[quo2.core :as quo] [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar] [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
@ -184,14 +185,21 @@
(defn create-password (defn create-password
[] []
[:f>
(let [scroll-view-ref (atom nil) (let [scroll-view-ref (atom nil)
scroll-to-end-fn #(js/setTimeout ^js/Function (.-scrollToEnd @scroll-view-ref) 250)] scroll-to-end-fn #(js/setTimeout ^js/Function (.-scrollToEnd @scroll-view-ref) 250)]
(fn [] (fn []
(let [{:keys [top]} (safe-area/use-safe-area)]
[:<> [:<>
[background/view true] [background/view true]
[rn/scroll-view [rn/scroll-view
{:ref #(reset! scroll-view-ref %) {:ref #(reset! scroll-view-ref %)
:style style/overlay :style style/overlay
:content-container-style style/content-style} :content-container-style style/content-style}
[navigation-bar/navigation-bar {:on-press-info #(js/alert "Info pressed")}] [navigation-bar/navigation-bar
[password-form {:scroll-to-end-fn scroll-to-end-fn}]]]))) {:top top
:right-section-buttons [{:type :blur-bg
:icon :i/info
:icon-override-theme :dark
:on-press #(js/alert "Info pressed")}]}]
[password-form {:scroll-to-end-fn scroll-to-end-fn}]]])))])

2
src/status_im2/contexts/onboarding/create_profile/style.cljs
View File

@ -30,8 +30,6 @@
:left 0 :left 0
:right 0}) :right 0})
(def navigation-bar {:height 56})
(def info-message (def info-message
{:margin-top 8}) {:margin-top 8})

30
src/status_im2/contexts/onboarding/create_profile/view.cljs
View File

@ -5,7 +5,9 @@
[status-im2.contexts.onboarding.create-profile.style :as style] [status-im2.contexts.onboarding.create-profile.style :as style]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu] [status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
[utils.re-frame :as rf] [utils.re-frame :as rf]
@ -13,18 +15,6 @@
[react-native.blur :as blur] [react-native.blur :as blur]
[status-im2.constants :as c])) [status-im2.constants :as c]))
(defn navigation-bar
[]
[rn/view {:style style/navigation-bar}
[quo/page-nav
{:container-style {:padding-horizontal 0}
:align-mid? true
:mid-section {:type :text-only :main-text ""}
:left-section {:type :blur-bg
:icon :i/arrow-left
:icon-override-theme :dark
:on-press #(rf/dispatch [:navigate-back])}}]])
(def emoji-regex (def emoji-regex
(new (new
js/RegExp js/RegExp
@ -66,10 +56,11 @@
children])) children]))
(defn page (defn page
[{:keys [image-path display-name color]}] [{:keys [onboarding-profile-data navigation-bar-top]}]
[:f> [:f>
(fn [] (fn []
(let [full-name (reagent/atom display-name) (let [{:keys [image-path display-name color]} onboarding-profile-data
full-name (reagent/atom display-name)
keyboard-shown? (reagent/atom false) keyboard-shown? (reagent/atom false)
validation-msg (reagent/atom (validation-message @full-name)) validation-msg (reagent/atom (validation-message @full-name))
on-change-text (fn [s] on-change-text (fn [s]
@ -95,13 +86,13 @@
(oops/ocall will-hide-listener "remove")))) (oops/ocall will-hide-listener "remove"))))
[]) [])
[rn/view {:style style/page-container} [rn/view {:style style/page-container}
[navigation-bar/navigation-bar {:top navigation-bar-top}]
[rn/scroll-view [rn/scroll-view
{:keyboard-should-persist-taps :always {:keyboard-should-persist-taps :always
:content-container-style {:flex-grow 1}} :content-container-style {:flex-grow 1}}
[rn/view {:style style/page-container} [rn/view {:style style/page-container}
[rn/view [rn/view
{:style style/content-container} {:style style/content-container}
[navigation-bar]
[quo/text [quo/text
{:size :heading-1 {:size :heading-1
:weight :semi-bold :weight :semi-bold
@ -159,7 +150,12 @@
(defn create-profile (defn create-profile
[] []
(let [onboarding-profile-data (rf/sub [:onboarding-2/profile])] [:f>
(fn []
(let [{:keys [top]} (safe-area/use-safe-area)
onboarding-profile-data (rf/sub [:onboarding-2/profile])]
[:<> [:<>
[background/view true] [background/view true]
[page onboarding-profile-data]])) [page
{:navigation-bar-top top
:onboarding-profile-data onboarding-profile-data}]]))])

33
src/status_im2/contexts/onboarding/enable_biometrics/style.cljs
View File

@ -1,23 +1,24 @@
(ns status-im2.contexts.onboarding.enable-biometrics.style (ns status-im2.contexts.onboarding.enable-biometrics.style
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]))
[react-native.platform :as platform]))
(def page-container (def default-margin 20)
{:padding-top (if platform/ios? 44 0)
:position :absolute (defn page-container
:top 0 [insets]
:bottom 0 {:flex 1
:left 0 :padding-top (:top insets)
:right 0
:background-color colors/neutral-80-opa-80-blur}) :background-color colors/neutral-80-opa-80-blur})
(def navigation-bar {:height 56}) (def page-illustration
{:flex 1
(def image-container
{:margin-top 20
:margin-bottom 24
:background-color colors/danger-50 :background-color colors/danger-50
:border-radius 20
:flex 1
:align-items :center :align-items :center
:margin-horizontal default-margin
:border-radius 20
:margin-top default-margin
:justify-content :center}) :justify-content :center})
(defn buttons
[insets]
{:margin default-margin
:margin-bottom (+ default-margin (:bottom insets))})

59
src/status_im2/contexts/onboarding/enable_biometrics/view.cljs
View File

@ -2,45 +2,27 @@
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im2.contexts.onboarding.enable-biometrics.style :as style] [status-im2.contexts.onboarding.enable-biometrics.style :as style]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[status-im.multiaccounts.biometric.core :as biometric]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[status-im2.contexts.onboarding.common.background.view :as background] [utils.re-frame :as rf]))
[utils.re-frame :as rf]
[status-im.multiaccounts.biometric.core :as biometric]))
(defn navigation-bar (defn page-title
[] []
[rn/view {:style style/navigation-bar} [quo/title
[quo/page-nav {:title (i18n/label :t/enable-biometrics)
{:align-mid? true :title-accessibility-label :enable-biometrics-title
:mid-section {:type :text-only :main-text ""} :subtitle (i18n/label :t/use-biometrics)
}]]) :subtitle-accessibility-label :enable-biometrics-sub-title}])
(defn page (defn enable-biometrics-buttons
[] [{:keys [insets]}]
(let [supported-biometric (rf/sub [:supported-biometric-auth]) (let [supported-biometric (rf/sub [:supported-biometric-auth])
bio-type-label (biometric/get-label supported-biometric) bio-type-label (biometric/get-label supported-biometric)
profile-color (:color (rf/sub [:onboarding-2/profile]))] profile-color (:color (rf/sub [:onboarding-2/profile]))]
[rn/view {:style style/page-container} [rn/view {:style (style/buttons insets)}
[navigation-bar]
[rn/view
{:style {:padding-horizontal 20
:flex 1}}
[quo/text
{:size :heading-1
:weight :semi-bold
:style {:color colors/white}} (i18n/label :t/enable-biometrics)]
[quo/text
{:size :paragraph-1
:style {:color colors/white
:margin-top 8}}
(i18n/label :t/use-biometrics)]
;; TODO(@briansztamfater): Replace view with image view with the real illustration,
;; https://github.com/status-im/status-mobile/issues/15445
[rn/view {:style style/image-container}
[quo/text {:size :paragraph-1}
"Illustration here"]]
[rn/view {:style {:margin-bottom 55}}
[quo/button [quo/button
{:on-press #(rf/dispatch [:onboarding-2/enable-biometrics]) {:on-press #(rf/dispatch [:onboarding-2/enable-biometrics])
:before :i/face-id :before :i/face-id
@ -50,10 +32,17 @@
{:on-press #(rf/dispatch [:onboarding-2/create-account-and-login]) {:on-press #(rf/dispatch [:onboarding-2/create-account-and-login])
:override-background-color colors/white-opa-5 :override-background-color colors/white-opa-5
:style {:margin-top 12}} :style {:margin-top 12}}
(i18n/label :t/maybe-later)]]]])) (i18n/label :t/maybe-later)]]))
(defn enable-biometrics (defn enable-biometrics
[] []
[rn/view {:style {:flex 1}} [:f>
[background/view true] (fn []
[page]]) (let [insets (safe-area/use-safe-area)]
[rn/view {:style (style/page-container insets)}
[navigation-bar/navigation-bar {:disable-back-button? true}]
[page-title]
[rn/view {:style style/page-illustration}
[quo/text
"Illustration here"]]
[enable-biometrics-buttons {:insets insets}]]))])

23
src/status_im2/contexts/onboarding/enable_notifications/view.cljs
View File

@ -9,22 +9,10 @@
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
[status-im.notifications.core :as notifications] [status-im.notifications.core :as notifications]
[status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[status-im2.contexts.onboarding.enable-notifications.style :as style] [status-im2.contexts.onboarding.enable-notifications.style :as style]
[status-im2.contexts.shell.animation :as shell.animation])) [status-im2.contexts.shell.animation :as shell.animation]))
(defn navigation-bar
[]
[quo/page-nav
(merge {:horizontal-description? false
:one-icon-align-left? true
:align-mid? false
:page-nav-color :transparent
:left-section {:icon :i/arrow-left
:icon-background-color colors/white-opa-5
:icon-override-theme :dark
:type :shell
:on-press #()}})])
(defn page-title (defn page-title
[] []
[quo/title [quo/title
@ -58,13 +46,14 @@
(defn enable-notifications (defn enable-notifications
[] []
[safe-area/consumer [:f>
(fn [insets] (fn []
(let [insets (safe-area/use-safe-area)]
[rn/view {:style (style/page-container insets)} [rn/view {:style (style/page-container insets)}
[background/view true] [background/view true]
[navigation-bar] [navigation-bar/navigation-bar {:disable-back-button? true}]
[page-title] [page-title]
[rn/view {:style style/page-illustration} [rn/view {:style style/page-illustration}
[quo/text [quo/text
"Illustration here"]] "Illustration here"]]
[enable-notification-buttons {:insets insets}]])]) [enable-notification-buttons {:insets insets}]]))])

8
src/status_im2/contexts/onboarding/enter_seed_phrase/style.cljs
View File

@ -1,14 +1,10 @@
(ns status-im2.contexts.onboarding.enter-seed-phrase.style (ns status-im2.contexts.onboarding.enter-seed-phrase.style
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]))
[react-native.platform :as platform]))
(def page-container (def page-container
{:padding-top (if platform/ios? 44 0) {:position :absolute
:position :absolute
:top 0 :top 0
:bottom 0 :bottom 0
:left 0 :left 0
:right 0 :right 0
:background-color colors/neutral-80-opa-80-blur}) :background-color colors/neutral-80-opa-80-blur})
(def navigation-bar {:height 56})

22
src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs
View File

@ -8,21 +8,12 @@
[utils.re-frame :as rf] [utils.re-frame :as rf]
[reagent.core :as reagent] [reagent.core :as reagent]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im2.contexts.onboarding.enter-seed-phrase.style :as style] [status-im2.contexts.onboarding.enter-seed-phrase.style :as style]
[status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(defn navigation-bar
[]
[rn/view {:style style/navigation-bar}
[quo/page-nav
{:align-mid? true
:left-section {:type :blur-bg
:icon :i/arrow-left
:icon-override-theme :dark
:on-press #(rf/dispatch [:navigate-back])}
:mid-section {:type :text-only :main-text ""}}]])
(def button-disabled? (def button-disabled?
(comp not constants/seed-phrase-valid-length mnemonic/words-count)) (comp not constants/seed-phrase-valid-length mnemonic/words-count))
@ -35,13 +26,13 @@
(string/join " " $))) (string/join " " $)))
(defn page (defn page
[] [{:keys [navigation-bar-top]}]
(let [seed-phrase (reagent/atom "") (let [seed-phrase (reagent/atom "")
error-message (reagent/atom "") error-message (reagent/atom "")
on-invalid-seed-phrase #(reset! error-message (i18n/label :t/custom-seed-phrase))] on-invalid-seed-phrase #(reset! error-message (i18n/label :t/custom-seed-phrase))]
(fn [] (fn []
[rn/view {:style style/page-container} [rn/view {:style style/page-container}
[navigation-bar] [navigation-bar/navigation-bar {:top navigation-bar-top}]
[rn/view {:style {:padding-horizontal 20}} [rn/view {:style {:padding-horizontal 20}}
[quo/text [quo/text
{:weight :bold {:weight :bold
@ -74,6 +65,9 @@
(defn enter-seed-phrase (defn enter-seed-phrase
[] []
[:f>
(fn []
(let [{:keys [top]} (safe-area/use-safe-area)]
[rn/view {:style {:flex 1}} [rn/view {:style {:flex 1}}
[background/view true] [background/view true]
[page]]) [page {:navigation-bar-top top}]]))])

8
src/status_im2/contexts/onboarding/generating_keys/style.cljs
View File

@ -1,14 +1,10 @@
(ns status-im2.contexts.onboarding.generating-keys.style (ns status-im2.contexts.onboarding.generating-keys.style
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]))
[react-native.platform :as platform]))
(def page-container (def page-container
{:padding-top (if platform/ios? 44 0) {:position :absolute
:position :absolute
:top 0 :top 0
:bottom 0 :bottom 0
:left 0 :left 0
:right 0 :right 0
:background-color colors/neutral-80-opa-80-blur}) :background-color colors/neutral-80-opa-80-blur})
(def navigation-bar {:height 56})

19
src/status_im2/contexts/onboarding/generating_keys/view.cljs
View File

@ -2,21 +2,17 @@
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im2.contexts.onboarding.generating-keys.style :as style] [status-im2.contexts.onboarding.generating-keys.style :as style]
[status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.onboarding.common.background.view :as background]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(defn navigation-bar
[]
[rn/view {:style style/navigation-bar}
[quo/page-nav
{:align-mid? true
:mid-section {:type :text-only :main-text ""}}]])
(defn page (defn page
[] [{:keys [navigation-bar-top]}]
[rn/view {:style style/page-container} [rn/view {:style style/page-container}
[navigation-bar] [rn/view
{:style {:height 56
:margin-top navigation-bar-top}}]
[rn/view {:style {:padding-horizontal 20}} [rn/view {:style {:padding-horizontal 20}}
[quo/text [quo/text
{:size :heading-1 {:size :heading-1
@ -25,6 +21,9 @@
(defn generating-keys (defn generating-keys
[] []
[:f>
(fn []
(let [{:keys [top]} (safe-area/use-safe-area)]
[rn/view {:style {:flex 1}} [rn/view {:style {:flex 1}}
[background/view true] [background/view true]
[page]]) [page {:navigation-bar-top top}]]))])

6
src/status_im2/contexts/onboarding/new_to_status/style.cljs
View File

@ -1,12 +1,10 @@
(ns status-im2.contexts.onboarding.new-to-status.style (ns status-im2.contexts.onboarding.new-to-status.style
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]))
[react-native.platform :as platform]))
(def full-screen {:flex 1}) (def full-screen {:flex 1})
(def content-container (def content-container
{:padding-top (if platform/ios? 44 0) {:position :absolute
:position :absolute
:top 0 :top 0
:bottom 0 :bottom 0
:left 0 :left 0

13
src/status_im2/contexts/onboarding/new_to_status/view.cljs
View File

@ -2,6 +2,7 @@
(:require (:require
[quo2.core :as quo] [quo2.core :as quo]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im.keycard.recovery :as keycard] [status-im.keycard.recovery :as keycard]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.onboarding.new-to-status.style :as style] [status-im2.contexts.onboarding.new-to-status.style :as style]
@ -55,8 +56,16 @@
(defn new-to-status (defn new-to-status
[] []
[:f>
(fn []
(let [{:keys [top]} (safe-area/use-safe-area)]
[:<> [:<>
[background/view true] [background/view true]
[rn/view {:style style/content-container} [rn/view {:style style/content-container}
[navigation-bar/navigation-bar {:on-press-info #(js/alert "Info pressed")}] [navigation-bar/navigation-bar
[sign-in-options]]]) {:top top
:right-section-buttons [{:type :blur-bg
:icon :i/info
:icon-override-theme :dark
:on-press #(js/alert "Info pressed")}]}]
[sign-in-options]]]))])

8
src/status_im2/contexts/onboarding/syncing/syncing_devices/style.cljs
View File

@ -1,12 +1,8 @@
(ns status-im2.contexts.onboarding.syncing.syncing-devices.style (ns status-im2.contexts.onboarding.syncing.syncing-devices.style
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]))
[react-native.platform :as platform]))
(def navigation-bar {:height 56})
(def page-container (def page-container
{:padding-top (if platform/ios? 44 0) {:position :absolute
:position :absolute
:top 0 :top 0
:bottom 0 :bottom 0
:left 0 :left 0

28
src/status_im2/contexts/onboarding/syncing/syncing_devices/view.cljs
View File

@ -2,25 +2,20 @@
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im2.contexts.onboarding.syncing.syncing-devices.style :as style] [status-im2.contexts.onboarding.syncing.syncing-devices.style :as style]
[status-im2.contexts.onboarding.common.background.view :as background])) [status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]))
(defn page
(defn navigation-bar [{:keys [navigation-bar-top]}]
[] [rn/view {:style style/page-container}
[rn/view {:style style/navigation-bar} [navigation-bar/navigation-bar
[quo/page-nav {:top navigation-bar-top
{:align-mid? true
:mid-section {:type :text-only :main-text ""}
:right-section-buttons [{:type :blur-bg :right-section-buttons [{:type :blur-bg
:icon :i/info :icon :i/info
:icon-override-theme :dark :icon-override-theme :dark
:on-press #(js/alert "Pending")}]}]]) :on-press #(js/alert "Pending")}]}]
(defn page
[]
[rn/view {:style style/page-container}
[navigation-bar]
[rn/view {:style {:padding-horizontal 20}} [rn/view {:style {:padding-horizontal 20}}
[quo/text [quo/text
{:size :heading-1 {:size :heading-1
@ -37,6 +32,9 @@
(defn syncing-devices (defn syncing-devices
[] []
(fn []
[safe-area/consumer
(fn [{:keys [top]}]
[rn/view {:style {:flex 1}} [rn/view {:style {:flex 1}}
[background/view true] [background/view true]
[page]]) [page {:navigation-bar-top top}]])]))