fix status-bar color for new ui (#13641)

src/status_im/navigation2/core.cljs

@@ -1,9 +1,11 @@
 (ns status-im.navigation2.core
   (:require [re-frame.core :as re-frame]
+            [quo2.foundations.colors :as colors]
             [status-im.ui.screens.views :as views]
-            [status-im.navigation2.utils :as nav2-utils]
             [status-im.navigation2.roots :as roots]
+            [status-im.utils.platform :as platform]
             [status-im.navigation.roots :as nav-roots]
+            [status-im.navigation2.utils :as nav2-utils]
             ["react-native-navigation" :refer (Navigation)]))
 
 (def tab-key-idx {:home        0
@@ -32,11 +34,13 @@
   (str comp "-" id))
 
 (defn get-options [show-topbar? options]
-  (if show-topbar?
   (merge options
          (nav-roots/status-bar-options)
-           (nav-roots/merge-top-bar (nav-roots/topbar-options) options))
-    {:topBar {:visible false}}))
+         (when platform/android?
+           {:navigationBar {:backgroundColor (colors/theme-colors colors/white colors/neutral-90)}})
+         (if show-topbar?
+           (nav-roots/merge-top-bar (nav-roots/topbar-options) options)
+           {:topBar {:visible false}})))
 
 (defn change-stack-root [[comp _]]
   (let [{:keys [options]} (get views/screens comp)]

src/status_im/navigation2/roots.cljs

@@ -1,4 +1,14 @@
-(ns status-im.navigation2.roots)
+(ns status-im.navigation2.roots
+  (:require [quo.theme :as theme]
+            [quo2.foundations.colors :as colors]
+            [status-im.utils.platform :as platform]))
+
+(defn status-bar-options []
+  (if platform/android?
+    {:navigationBar {:backgroundColor colors/neutral-80}
+     :statusBar     {:backgroundColor (colors/theme-colors colors/neutral-5 colors/neutral-95)
+                     :style           (if (theme/dark?) :light :dark)}}
+    {:statusBar {:style (if (theme/dark?) :light :dark)}}))
 
 (defn roots []
   {:home-stack
@@ -6,4 +16,5 @@
     {:stack {:id       :home-stack
              :children [{:component {:name    :chat-stack
                                      :id      :chat-stack
-                                     :options {:topBar {:visible false}}}}]}}}})
+                                     :options (merge (status-bar-options)
+                                                     {:topBar {:visible false}})}}]}}}})

src/status_im/switcher/home_stack.cljs

@@ -16,15 +16,15 @@
     :browser-stack @bottom-tabs/load-browser-tab?
     :wallet-stack @bottom-tabs/load-wallet-tab?))
 
-(defn stack-view [stack-id shared-values top-margin]
+(defn stack-view [stack-id shared-values]
   (when (load-stack? stack-id)
     [:f>
      (fn []
        [reanimated/view {:style (reanimated/apply-animations-to-style
                                  {:opacity        (get shared-values (get constants/stacks-opacity-keywords stack-id))
                                   :pointer-events (get shared-values (get constants/stacks-pointer-keywords stack-id))}
-                                 {:top              top-margin
-                                  :bottom           (if platform/ios? 79 55)
+                                 {:top              0
+                                  :bottom           (if platform/ios? 79 54)
                                   :left             0
                                   :right            0
                                   :position         :absolute})}
@@ -36,10 +36,10 @@
 
 (defn home-stack [shared-values]
   [:<>
-   [stack-view :communities-stack shared-values (if platform/ios? 47 0)]
-   [stack-view :chats-stack shared-values (if platform/ios? 47 0)]
-   [stack-view :browser-stack shared-values 0]
-   [stack-view :wallet-stack shared-values 0]])
+   [stack-view :communities-stack shared-values]
+   [stack-view :chats-stack shared-values]
+   [stack-view :browser-stack shared-values]
+   [stack-view :wallet-stack shared-values]])
 
 (defn home []
   [:f>

src/status_im/ui/screens/home/views.cljs

@@ -18,6 +18,7 @@
             [status-im.add-new.db :as db]
             [status-im.utils.debounce :as debounce]
             [status-im.utils.utils :as utils]
+            [quo.components.safe-area :as safe-area]
             [status-im.ui.components.topbar :as topbar]
             [status-im.ui.components.plus-button :as components.plus-button]
             [status-im.ui.screens.chat.sheets :as sheets]
@@ -179,6 +180,20 @@
                      :accessibility-label :notifications-unread-badge}]])]))
 
 (defn home []
+  [safe-area/consumer
+   (fn [insets]
+     [react/keyboard-avoiding-view {:style {:flex 1 :padding-top (:top insets)}
+                                    :ignore-offset true}
+      [topbar/topbar {:title           (i18n/label :t/chat)
+                      :navigation      :none
+                      :right-component [react/view {:flex-direction :row :margin-right 16}
+                                        [connectivity/connectivity-button]
+                                        [notifications-button]]}]
+      [chats-list]
+      [plus-button]
+      [tabbar/tabs-counts-subscriptions]])])
+
+(defn home-old []
   [react/keyboard-avoiding-view {:style {:flex 1}
                                  :ignore-offset true}
    [topbar/topbar {:title           (i18n/label :t/chat)

src/status_im/ui/screens/screens.cljs

@@ -216,7 +216,7 @@
 
            ;Home
            {:name      :home
-            :component home/home}
+            :component home/home-old}
 
            ;Chat
            {:name          :chat