From 3ca120ca9455d0592d11f828148561306eb478bc Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 19 Apr 2023 14:18:36 +0200 Subject: [PATCH] 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 --- .../common/navigation_bar/view.cljs | 16 ++-- .../onboarding/create_password/view.cljs | 30 +++++--- .../onboarding/create_profile/style.cljs | 2 - .../onboarding/create_profile/view.cljs | 52 ++++++------- .../onboarding/enable_biometrics/style.cljs | 37 ++++----- .../onboarding/enable_biometrics/view.cljs | 77 ++++++++----------- .../onboarding/enable_notifications/view.cljs | 35 +++------ .../onboarding/enter_seed_phrase/style.cljs | 8 +- .../onboarding/enter_seed_phrase/view.cljs | 26 +++---- .../onboarding/generating_keys/style.cljs | 8 +- .../onboarding/generating_keys/view.cljs | 23 +++--- .../onboarding/new_to_status/style.cljs | 14 ++-- .../onboarding/new_to_status/view.cljs | 19 +++-- .../syncing/syncing_devices/style.cljs | 8 +- .../syncing/syncing_devices/view.cljs | 32 ++++---- 15 files changed, 177 insertions(+), 210 deletions(-) diff --git a/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs b/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs index fc91d2bb6a..75c008b7dc 100644 --- a/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs +++ b/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs @@ -4,16 +4,16 @@ [utils.re-frame :as rf])) (defn navigation-bar - [{:keys [on-press-info]}] - [rn/view {:style {:height 56}} + [{:keys [top right-section-buttons disable-back-button?]}] + [rn/view + {:style {:height 56 + :margin-top top}} [quo/page-nav {:align-mid? true - :mid-section {:type :text-only} + :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])} - :right-section-buttons [{:type :blur-bg - :icon :i/info - :icon-override-theme :dark - :on-press on-press-info}]}]]) + :on-press (when-not disable-back-button? + #(rf/dispatch [:navigate-back]))} + :right-section-buttons right-section-buttons}]]) diff --git a/src/status_im2/contexts/onboarding/create_password/view.cljs b/src/status_im2/contexts/onboarding/create_password/view.cljs index 36ef2db088..85bc9c7ace 100644 --- a/src/status_im2/contexts/onboarding/create_password/view.cljs +++ b/src/status_im2/contexts/onboarding/create_password/view.cljs @@ -3,6 +3,7 @@ [quo2.core :as quo] [quo2.foundations.colors :as colors] [react-native.core :as rn] + [react-native.safe-area :as safe-area] [reagent.core :as reagent] [status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar] @@ -184,14 +185,21 @@ (defn create-password [] - (let [scroll-view-ref (atom nil) - scroll-to-end-fn #(js/setTimeout ^js/Function (.-scrollToEnd @scroll-view-ref) 250)] - (fn [] - [:<> - [background/view true] - [rn/scroll-view - {:ref #(reset! scroll-view-ref %) - :style style/overlay - :content-container-style style/content-style} - [navigation-bar/navigation-bar {:on-press-info #(js/alert "Info pressed")}] - [password-form {:scroll-to-end-fn scroll-to-end-fn}]]]))) + [:f> + (let [scroll-view-ref (atom nil) + scroll-to-end-fn #(js/setTimeout ^js/Function (.-scrollToEnd @scroll-view-ref) 250)] + (fn [] + (let [{:keys [top]} (safe-area/use-safe-area)] + [:<> + [background/view true] + [rn/scroll-view + {:ref #(reset! scroll-view-ref %) + :style style/overlay + :content-container-style style/content-style} + [navigation-bar/navigation-bar + {: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}]]])))]) diff --git a/src/status_im2/contexts/onboarding/create_profile/style.cljs b/src/status_im2/contexts/onboarding/create_profile/style.cljs index d50f11daf0..e986d77743 100644 --- a/src/status_im2/contexts/onboarding/create_profile/style.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/style.cljs @@ -30,8 +30,6 @@ :left 0 :right 0}) -(def navigation-bar {:height 56}) - (def info-message {:margin-top 8}) diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs index 4055ec4ad2..c2eb5ad8a0 100644 --- a/src/status_im2/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs @@ -5,7 +5,9 @@ [status-im2.contexts.onboarding.create-profile.style :as style] [utils.i18n :as i18n] [react-native.core :as rn] + [react-native.safe-area :as safe-area] [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.select-photo.method-menu.view :as method-menu] [utils.re-frame :as rf] @@ -13,18 +15,6 @@ [react-native.blur :as blur] [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 (new js/RegExp @@ -66,19 +56,20 @@ children])) (defn page - [{:keys [image-path display-name color]}] + [{:keys [onboarding-profile-data navigation-bar-top]}] [:f> (fn [] - (let [full-name (reagent/atom display-name) - keyboard-shown? (reagent/atom false) - validation-msg (reagent/atom (validation-message @full-name)) - on-change-text (fn [s] - (reset! validation-msg (validation-message s)) - (reset! full-name (string/trim s))) - custom-color (reagent/atom (or color c/profile-default-color)) - profile-pic (reagent/atom image-path) - on-change-profile-pic #(reset! profile-pic %) - on-change #(reset! custom-color %)] + (let [{:keys [image-path display-name color]} onboarding-profile-data + full-name (reagent/atom display-name) + keyboard-shown? (reagent/atom false) + validation-msg (reagent/atom (validation-message @full-name)) + on-change-text (fn [s] + (reset! validation-msg (validation-message s)) + (reset! full-name (string/trim s))) + custom-color (reagent/atom (or color c/profile-default-color)) + profile-pic (reagent/atom image-path) + on-change-profile-pic #(reset! profile-pic %) + on-change #(reset! custom-color %)] (fn [] (rn/use-effect (let [will-show-listener (oops/ocall rn/keyboard @@ -95,13 +86,13 @@ (oops/ocall will-hide-listener "remove")))) []) [rn/view {:style style/page-container} + [navigation-bar/navigation-bar {:top navigation-bar-top}] [rn/scroll-view {:keyboard-should-persist-taps :always :content-container-style {:flex-grow 1}} [rn/view {:style style/page-container} [rn/view {:style style/content-container} - [navigation-bar] [quo/text {:size :heading-1 :weight :semi-bold @@ -159,7 +150,12 @@ (defn create-profile [] - (let [onboarding-profile-data (rf/sub [:onboarding-2/profile])] - [:<> - [background/view true] - [page onboarding-profile-data]])) + [:f> + (fn [] + (let [{:keys [top]} (safe-area/use-safe-area) + onboarding-profile-data (rf/sub [:onboarding-2/profile])] + [:<> + [background/view true] + [page + {:navigation-bar-top top + :onboarding-profile-data onboarding-profile-data}]]))]) \ No newline at end of file diff --git a/src/status_im2/contexts/onboarding/enable_biometrics/style.cljs b/src/status_im2/contexts/onboarding/enable_biometrics/style.cljs index 6c2d98b883..039a9a66c1 100644 --- a/src/status_im2/contexts/onboarding/enable_biometrics/style.cljs +++ b/src/status_im2/contexts/onboarding/enable_biometrics/style.cljs @@ -1,23 +1,24 @@ (ns status-im2.contexts.onboarding.enable-biometrics.style - (:require [quo2.foundations.colors :as colors] - [react-native.platform :as platform])) + (:require [quo2.foundations.colors :as colors])) -(def page-container - {:padding-top (if platform/ios? 44 0) - :position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0 +(def default-margin 20) + +(defn page-container + [insets] + {:flex 1 + :padding-top (:top insets) :background-color colors/neutral-80-opa-80-blur}) -(def navigation-bar {:height 56}) +(def page-illustration + {:flex 1 + :background-color colors/danger-50 + :align-items :center + :margin-horizontal default-margin + :border-radius 20 + :margin-top default-margin + :justify-content :center}) -(def image-container - {:margin-top 20 - :margin-bottom 24 - :background-color colors/danger-50 - :border-radius 20 - :flex 1 - :align-items :center - :justify-content :center}) +(defn buttons + [insets] + {:margin default-margin + :margin-bottom (+ default-margin (:bottom insets))}) diff --git a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs b/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs index 05de3b5dd6..9eb28c47c5 100644 --- a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs +++ b/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs @@ -2,58 +2,47 @@ (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] [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.common.navigation-bar.view :as navigation-bar] + [status-im.multiaccounts.biometric.core :as biometric] [utils.i18n :as i18n] - [status-im2.contexts.onboarding.common.background.view :as background] - [utils.re-frame :as rf] - [status-im.multiaccounts.biometric.core :as biometric])) + [utils.re-frame :as rf])) -(defn navigation-bar +(defn page-title [] - [rn/view {:style style/navigation-bar} - [quo/page-nav - {:align-mid? true - :mid-section {:type :text-only :main-text ""} - }]]) + [quo/title + {:title (i18n/label :t/enable-biometrics) + :title-accessibility-label :enable-biometrics-title + :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]) bio-type-label (biometric/get-label supported-biometric) profile-color (:color (rf/sub [:onboarding-2/profile]))] - [rn/view {:style style/page-container} - [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 - {:on-press #(rf/dispatch [:onboarding-2/enable-biometrics]) - :before :i/face-id - :override-background-color (colors/custom-color profile-color 50)} - (i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})] - [quo/button - {:on-press #(rf/dispatch [:onboarding-2/create-account-and-login]) - :override-background-color colors/white-opa-5 - :style {:margin-top 12}} - (i18n/label :t/maybe-later)]]]])) + [rn/view {:style (style/buttons insets)} + [quo/button + {:on-press #(rf/dispatch [:onboarding-2/enable-biometrics]) + :before :i/face-id + :override-background-color (colors/custom-color profile-color 50)} + (i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})] + [quo/button + {:on-press #(rf/dispatch [:onboarding-2/create-account-and-login]) + :override-background-color colors/white-opa-5 + :style {:margin-top 12}} + (i18n/label :t/maybe-later)]])) (defn enable-biometrics [] - [rn/view {:style {:flex 1}} - [background/view true] - [page]]) + [:f> + (fn [] + (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}]]))]) \ No newline at end of file diff --git a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs index ed7901416d..e496d9b573 100644 --- a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs +++ b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs @@ -9,22 +9,10 @@ [react-native.safe-area :as safe-area] [status-im.notifications.core :as notifications] [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.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 [] [quo/title @@ -58,13 +46,14 @@ (defn enable-notifications [] - [safe-area/consumer - (fn [insets] - [rn/view {:style (style/page-container insets)} - [background/view true] - [navigation-bar] - [page-title] - [rn/view {:style style/page-illustration} - [quo/text - "Illustration here"]] - [enable-notification-buttons {:insets insets}]])]) + [:f> + (fn [] + (let [insets (safe-area/use-safe-area)] + [rn/view {:style (style/page-container insets)} + [background/view true] + [navigation-bar/navigation-bar {:disable-back-button? true}] + [page-title] + [rn/view {:style style/page-illustration} + [quo/text + "Illustration here"]] + [enable-notification-buttons {:insets insets}]]))]) diff --git a/src/status_im2/contexts/onboarding/enter_seed_phrase/style.cljs b/src/status_im2/contexts/onboarding/enter_seed_phrase/style.cljs index 33f051b788..57db8d7ed9 100644 --- a/src/status_im2/contexts/onboarding/enter_seed_phrase/style.cljs +++ b/src/status_im2/contexts/onboarding/enter_seed_phrase/style.cljs @@ -1,14 +1,10 @@ (ns status-im2.contexts.onboarding.enter-seed-phrase.style - (:require [quo2.foundations.colors :as colors] - [react-native.platform :as platform])) + (:require [quo2.foundations.colors :as colors])) (def page-container - {:padding-top (if platform/ios? 44 0) - :position :absolute + {:position :absolute :top 0 :bottom 0 :left 0 :right 0 :background-color colors/neutral-80-opa-80-blur}) - -(def navigation-bar {:height 56}) diff --git a/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs b/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs index 282a66f4bf..ce6ca04a32 100644 --- a/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs +++ b/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs @@ -8,21 +8,12 @@ [utils.re-frame :as rf] [reagent.core :as reagent] [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.common.background.view :as background] + [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar] [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? (comp not constants/seed-phrase-valid-length mnemonic/words-count)) @@ -35,13 +26,13 @@ (string/join " " $))) (defn page - [] + [{:keys [navigation-bar-top]}] (let [seed-phrase (reagent/atom "") error-message (reagent/atom "") on-invalid-seed-phrase #(reset! error-message (i18n/label :t/custom-seed-phrase))] (fn [] [rn/view {:style style/page-container} - [navigation-bar] + [navigation-bar/navigation-bar {:top navigation-bar-top}] [rn/view {:style {:padding-horizontal 20}} [quo/text {:weight :bold @@ -74,6 +65,9 @@ (defn enter-seed-phrase [] - [rn/view {:style {:flex 1}} - [background/view true] - [page]]) + [:f> + (fn [] + (let [{:keys [top]} (safe-area/use-safe-area)] + [rn/view {:style {:flex 1}} + [background/view true] + [page {:navigation-bar-top top}]]))]) diff --git a/src/status_im2/contexts/onboarding/generating_keys/style.cljs b/src/status_im2/contexts/onboarding/generating_keys/style.cljs index 8f69954fd6..7946f96116 100644 --- a/src/status_im2/contexts/onboarding/generating_keys/style.cljs +++ b/src/status_im2/contexts/onboarding/generating_keys/style.cljs @@ -1,14 +1,10 @@ (ns status-im2.contexts.onboarding.generating-keys.style - (:require [quo2.foundations.colors :as colors] - [react-native.platform :as platform])) + (:require [quo2.foundations.colors :as colors])) (def page-container - {:padding-top (if platform/ios? 44 0) - :position :absolute + {:position :absolute :top 0 :bottom 0 :left 0 :right 0 :background-color colors/neutral-80-opa-80-blur}) - -(def navigation-bar {:height 56}) diff --git a/src/status_im2/contexts/onboarding/generating_keys/view.cljs b/src/status_im2/contexts/onboarding/generating_keys/view.cljs index 43edaa8e86..43b7117c90 100644 --- a/src/status_im2/contexts/onboarding/generating_keys/view.cljs +++ b/src/status_im2/contexts/onboarding/generating_keys/view.cljs @@ -2,21 +2,17 @@ (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] [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.common.background.view :as background] [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 - [] + [{:keys [navigation-bar-top]}] [rn/view {:style style/page-container} - [navigation-bar] + [rn/view + {:style {:height 56 + :margin-top navigation-bar-top}}] [rn/view {:style {:padding-horizontal 20}} [quo/text {:size :heading-1 @@ -25,6 +21,9 @@ (defn generating-keys [] - [rn/view {:style {:flex 1}} - [background/view true] - [page]]) + [:f> + (fn [] + (let [{:keys [top]} (safe-area/use-safe-area)] + [rn/view {:style {:flex 1}} + [background/view true] + [page {:navigation-bar-top top}]]))]) \ No newline at end of file diff --git a/src/status_im2/contexts/onboarding/new_to_status/style.cljs b/src/status_im2/contexts/onboarding/new_to_status/style.cljs index d5f16063c3..1a13c6a0ba 100644 --- a/src/status_im2/contexts/onboarding/new_to_status/style.cljs +++ b/src/status_im2/contexts/onboarding/new_to_status/style.cljs @@ -1,16 +1,14 @@ (ns status-im2.contexts.onboarding.new-to-status.style - (:require [quo2.foundations.colors :as colors] - [react-native.platform :as platform])) + (:require [quo2.foundations.colors :as colors])) (def full-screen {:flex 1}) (def content-container - {:padding-top (if platform/ios? 44 0) - :position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0}) + {:position :absolute + :top 0 + :bottom 0 + :left 0 + :right 0}) (def options-container {:padding-top 12 diff --git a/src/status_im2/contexts/onboarding/new_to_status/view.cljs b/src/status_im2/contexts/onboarding/new_to_status/view.cljs index 6876d2594b..0b03afd4d7 100644 --- a/src/status_im2/contexts/onboarding/new_to_status/view.cljs +++ b/src/status_im2/contexts/onboarding/new_to_status/view.cljs @@ -2,6 +2,7 @@ (:require [quo2.core :as quo] [react-native.core :as rn] + [react-native.safe-area :as safe-area] [status-im.keycard.recovery :as keycard] [status-im2.common.resources :as resources] [status-im2.contexts.onboarding.new-to-status.style :as style] @@ -55,8 +56,16 @@ (defn new-to-status [] - [:<> - [background/view true] - [rn/view {:style style/content-container} - [navigation-bar/navigation-bar {:on-press-info #(js/alert "Info pressed")}] - [sign-in-options]]]) + [:f> + (fn [] + (let [{:keys [top]} (safe-area/use-safe-area)] + [:<> + [background/view true] + [rn/view {:style style/content-container} + [navigation-bar/navigation-bar + {:top top + :right-section-buttons [{:type :blur-bg + :icon :i/info + :icon-override-theme :dark + :on-press #(js/alert "Info pressed")}]}] + [sign-in-options]]]))]) diff --git a/src/status_im2/contexts/onboarding/syncing/syncing_devices/style.cljs b/src/status_im2/contexts/onboarding/syncing/syncing_devices/style.cljs index d7c19875c9..ff4ec83e8e 100644 --- a/src/status_im2/contexts/onboarding/syncing/syncing_devices/style.cljs +++ b/src/status_im2/contexts/onboarding/syncing/syncing_devices/style.cljs @@ -1,12 +1,8 @@ (ns status-im2.contexts.onboarding.syncing.syncing-devices.style - (:require [quo2.foundations.colors :as colors] - [react-native.platform :as platform])) - -(def navigation-bar {:height 56}) + (:require [quo2.foundations.colors :as colors])) (def page-container - {:padding-top (if platform/ios? 44 0) - :position :absolute + {:position :absolute :top 0 :bottom 0 :left 0 diff --git a/src/status_im2/contexts/onboarding/syncing/syncing_devices/view.cljs b/src/status_im2/contexts/onboarding/syncing/syncing_devices/view.cljs index 5041df0be0..93f3154630 100644 --- a/src/status_im2/contexts/onboarding/syncing/syncing_devices/view.cljs +++ b/src/status_im2/contexts/onboarding/syncing/syncing_devices/view.cljs @@ -2,25 +2,20 @@ (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] [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.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 navigation-bar - [] - [rn/view {:style style/navigation-bar} - [quo/page-nav - {:align-mid? true - :mid-section {:type :text-only :main-text ""} +(defn page + [{:keys [navigation-bar-top]}] + [rn/view {:style style/page-container} + [navigation-bar/navigation-bar + {:top navigation-bar-top :right-section-buttons [{:type :blur-bg :icon :i/info :icon-override-theme :dark - :on-press #(js/alert "Pending")}]}]]) - -(defn page - [] - [rn/view {:style style/page-container} - [navigation-bar] + :on-press #(js/alert "Pending")}]}] [rn/view {:style {:padding-horizontal 20}} [quo/text {:size :heading-1 @@ -37,6 +32,9 @@ (defn syncing-devices [] - [rn/view {:style {:flex 1}} - [background/view true] - [page]]) + (fn [] + [safe-area/consumer + (fn [{:keys [top]}] + [rn/view {:style {:flex 1}} + [background/view true] + [page {:navigation-bar-top top}]])]))