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:
parent
46351543f1
commit
3ca120ca94
|
@ -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}]}]])
|
|
||||||
|
|
|
@ -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}]]])))])
|
||||||
|
|
|
@ -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})
|
||||||
|
|
||||||
|
|
|
@ -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}]]))])
|
|
@ -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))})
|
||||||
|
|
|
@ -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}]]))])
|
|
@ -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}]]))])
|
||||||
|
|
|
@ -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})
|
|
||||||
|
|
|
@ -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}]]))])
|
||||||
|
|
|
@ -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})
|
|
||||||
|
|
|
@ -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}]]))])
|
|
@ -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
|
||||||
|
|
|
@ -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]]]))])
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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}]])]))
|
||||||
|
|
Loading…
Reference in New Issue