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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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