fix status and nav bar color (#19089)

Author: Parveshdhull

src/status_im/common/alert_banner/events.cljs

@@ -7,20 +7,20 @@
         db                    (assoc-in db [:alert-banners (:type banner)] banner)]
     (cond-> {:db db}
       (zero? current-banners-count)
-      (assoc :show-alert-banner nil))))
+      (assoc :show-alert-banner (:view-id db)))))
 
 (defn remove-alert-banner
   [{:keys [db]} [banner-type]]
   (let [db        (update-in db [:alert-banners] dissoc banner-type)
         new-count (count (get db :alert-banners))]
     (cond-> {:db db}
       (zero? new-count)
-      (assoc :hide-alert-banner nil))))
+      (assoc :hide-alert-banner (:view-id db)))))
 
 (defn remove-all-alert-banners
   [{:keys [db]}]
   {:db                (dissoc db :alert-banners)
-   :hide-alert-banner nil})
+   :hide-alert-banner (:view-id db)})
 
 (re-frame/reg-event-fx :alert-banners/add add-alert-banner)
 (re-frame/reg-event-fx :alert-banners/remove remove-alert-banner)

src/status_im/common/toasts/events.cljs

@@ -19,7 +19,7 @@
                      (update :toasts dissoc :hide-toasts-timer-set))}
 
       (and (not update?) (= (count ordered) 1))
-      (assoc :show-toasts [])
+      (assoc :show-toasts (:view-id db))
 
       (not (:id opts))
       (update-in [:db :toasts :next-toast-number] inc))))
@@ -28,8 +28,9 @@
   {:events [:toasts/hide-with-check]}
   [{:keys [db]}]
   (when (get-in db [:toasts :hide-toasts-timer-set])
-    {:db          (update db :toasts dissoc :hide-toasts-timer-set)
-     :hide-toasts nil}))
+    {:db                         (update db :toasts dissoc :hide-toasts-timer-set)
+     :hide-toasts                nil
+     :reload-status-nav-color-fx (:view-id db)}))
 
 (rf/defn close
   {:events [:toasts/close]}

src/status_im/contexts/profile/login/events.cljs

@@ -78,7 +78,7 @@
 
                   :else
                   [[:profile.settings/switch-theme-fx
-                    [(or (get-in db [:profile/profile :appearance])
+                    [(or (:appearance settings)
                          constants/theme-type-dark)
                      :shell-stack
                      false]]

src/status_im/contexts/profile/settings/effects.cljs

@@ -1,12 +1,11 @@
 (ns status-im.contexts.profile.settings.effects
   (:require [native-module.core :as native-module]
-            [quo.foundations.colors :as colors]
             [re-frame.core :as re-frame]
             [react-native.platform :as platform]
             [status-im.common.theme.core :as theme]
             [status-im.constants :as constants]
-            [status-im.contexts.shell.jump-to.utils :as shell.utils]
-            [status-im.setup.hot-reload :as hot-reload]))
+            [status-im.setup.hot-reload :as hot-reload]
+            [utils.re-frame :as rf]))
 
 (re-frame/reg-fx
  :profile.settings/blank-preview-flag-changed
@@ -22,19 +21,14 @@
 (re-frame/reg-fx
  :profile.settings/switch-theme-fx
  (fn [[theme-type view-id reload-ui?]]
-   (let [[theme status-bar-theme nav-bar-color]
-         ;; Status bar theme represents status bar icons colors, so opposite to app theme
-         (if (or (= theme-type constants/theme-type-dark)
-                 (and (= theme-type constants/theme-type-system)
-                      (theme/device-theme-dark?)))
-           [:dark :light colors/neutral-100]
-           [:light :dark colors/white])]
+   (let [theme (if (or (= theme-type constants/theme-type-dark)
+                       (and (= theme-type constants/theme-type-system)
+                            (theme/device-theme-dark?)))
+                 :dark
+                 :light)]
      (theme/set-theme theme)
-     (re-frame/dispatch [:change-shell-status-bar-style
-                         (if (shell.utils/home-stack-open?) status-bar-theme :light)])
+     (rf/dispatch [:reload-status-nav-color view-id])
      (when reload-ui?
        (re-frame/dispatch [:dismiss-all-overlays])
        (when js/goog.DEBUG
-         (hot-reload/reload))
-       (when-not (= view-id :shell-stack)
-         (re-frame/dispatch [:change-shell-nav-bar-color nav-bar-color]))))))
+         (hot-reload/reload))))))

src/status_im/contexts/shell/jump_to/animation.cljs

@@ -14,9 +14,7 @@
     (reanimated/set-shared-value (:home-stack-state @state/shared-values-atom) home-stack-state-value)
     (utils/change-selected-stack-id stack-id true home-stack-state-value)
     (js/setTimeout
-     (fn []
-       (utils/load-stack stack-id)
-       (utils/change-shell-status-bar-style))
+     #(utils/load-stack stack-id)
      (if animate? shell.constants/shell-animation-time 0))))
 
 (defn change-tab
@@ -41,7 +39,6 @@
     (reanimated/set-shared-value (:animate-home-stack-left @state/shared-values-atom) true)
     (reanimated/set-shared-value (:home-stack-state @state/shared-values-atom) home-stack-state-value)
     (utils/change-selected-stack-id stack-id true home-stack-state-value)
-    (utils/change-shell-status-bar-style)
     (when animate? (utils/update-view-id (or stack-id :shell)))))
 
 ;;;; Floating Screen

src/status_im/contexts/shell/jump_to/events.cljs

@@ -108,16 +108,6 @@
      :dispatch [:set-view-id :shell]
      :effects.shell/navigate-to-jump-to nil}))
 
-(rf/defn change-shell-status-bar-style
-  {:events [:change-shell-status-bar-style]}
-  [_ style]
-  {:merge-options {:id "shell-stack" :options {:statusBar {:style style}}}})
-
-(rf/defn change-shell-nav-bar-color
-  {:events [:change-shell-nav-bar-color]}
-  [_ color]
-  {:merge-options {:id "shell-stack" :options {:navigationBar {:backgroundColor color}}}})
-
 (rf/defn shell-navigate-to
   {:events [:shell/navigate-to]}
   [{:keys [db now]} go-to-view-id screen-params animation hidden-screen?]

src/status_im/contexts/shell/jump_to/utils.cljs

@@ -1,6 +1,5 @@
 (ns status-im.contexts.shell.jump-to.utils
   (:require
-    [quo.theme :as quo.theme]
     [react-native.async-storage :as async-storage]
     [react-native.core :as rn]
     [react-native.platform :as platform]
@@ -136,12 +135,3 @@
 (defn update-view-id
   [view-id]
   (rf/dispatch [:set-view-id view-id]))
-
-;;; Misc
-(defn change-shell-status-bar-style
-  []
-  (rf/dispatch [:change-shell-status-bar-style
-                (if (or (= :dark (quo.theme/get-theme))
-                        (not (home-stack-open?)))
-                  :light
-                  :dark)]))

src/status_im/navigation/effects.cljs

@@ -1,29 +1,61 @@
 (ns status-im.navigation.effects
   (:require
+    [quo.foundations.colors :as colors]
     [quo.theme]
     [react-native.core :as rn]
     [react-native.navigation :as navigation]
+    [react-native.platform :as platform]
+    [status-im.contexts.shell.jump-to.constants :as shell.constants]
+    [status-im.contexts.shell.jump-to.utils :as jump-to.utils]
     [status-im.navigation.options :as options]
     [status-im.navigation.roots :as roots]
     [status-im.navigation.state :as state]
     [status-im.navigation.view :as views]
     [taoensso.timbre :as log]
     [utils.re-frame :as rf]))
 
-(defn- set-status-bar-color
-  [theme]
-  (rn/set-status-bar-style
-   (if (= theme :dark)
-     "light-content"
-     "dark-content")
-   true))
+(defn get-status-nav-color
+  [view-id]
+  (let [theme (or (get-in views/screens [view-id :options :theme])
+                  (quo.theme/get-theme))
+        [rnn-status-bar rn-status-bar]
+        (if (or (= theme :dark)
+                @state/alert-banner-shown?
+                (and (= view-id :shell-stack) (not (jump-to.utils/home-stack-open?))))
+          [:light "light-content"]
+          [:dark "dark-content"])
+        home-stack? (some #(= view-id %) shell.constants/stacks-ids)
+        ;; Home screen nav bar always dark due to bottom tabs
+        nav-bar-color (if (or home-stack?
+                              (= view-id :shell-stack)
+                              (= theme :dark))
+                        colors/neutral-100
+                        colors/white)
+        comp-id (if (or home-stack?
+                        (jump-to.utils/shell-navigation? view-id)
+                        (= view-id :shell))
+                  :shell-stack
+                  view-id)]
+    [rnn-status-bar rn-status-bar nav-bar-color comp-id]))
+
+(defn reload-status-nav-color-fx
+  [view-id]
+  (when (and (= @state/root-id :shell-stack) view-id)
+    (let [[rnn-status-bar rn-status-bar nav-bar-color comp-id] (get-status-nav-color view-id)]
+      (if platform/ios?
+        (rn/set-status-bar-style rn-status-bar true)
+        (navigation/merge-options
+         (name comp-id)
+         {:statusBar     {:style rnn-status-bar}
+          :navigationBar {:backgroundColor nav-bar-color}})))))
+
+(rf/reg-fx :reload-status-nav-color-fx reload-status-nav-color-fx)
 
 (rf/reg-fx :set-view-id-fx
  (fn [view-id]
+   (reload-status-nav-color-fx view-id)
    (rf/dispatch [:screens/on-will-focus view-id])
-   (when-let [{:keys [on-focus options]} (get views/screens view-id)]
-     (set-status-bar-color (or (:theme options)
-                               (quo.theme/get-theme)))
+   (when-let [{:keys [on-focus]} (get views/screens view-id)]
      (when on-focus
        (rf/dispatch on-focus)))))
 
@@ -167,11 +199,12 @@
                                  opts)}})))
 
 (rf/reg-fx :show-toasts
- (fn []
-   (show-overlay "toasts"
-                 {:overlay {:interceptTouchOutside false}
-                  :layout  {:componentBackgroundColor :transparent
-                            :orientation              ["portrait"]}})))
+ (fn [view-id]
+   (let [[rnn-status-bar nav-bar-color] (get-status-nav-color view-id)]
+     (show-overlay "toasts"
+                   (assoc (options/statusbar-and-navbar-options nil rnn-status-bar nav-bar-color)
+                          :overlay
+                          {:interceptTouchOutside false})))))
 
 (rf/reg-fx :hide-toasts
  (fn [] (navigation/dissmiss-overlay "toasts")))
@@ -186,10 +219,16 @@
 
 ;;;; Alert Banner
 (rf/reg-fx :show-alert-banner
- (fn [] (show-overlay "alert-banner" {:overlay {:interceptTouchOutside false}})))
+ (fn [view-id]
+   (show-overlay "alert-banner" {:overlay {:interceptTouchOutside false}})
+   (reset! state/alert-banner-shown? true)
+   (reload-status-nav-color-fx view-id)))
 
 (rf/reg-fx :hide-alert-banner
- (fn [] (navigation/dissmiss-overlay "alert-banner")))
+ (fn [view-id]
+   (navigation/dissmiss-overlay "alert-banner")
+   (reset! state/alert-banner-shown? false)
+   (reload-status-nav-color-fx view-id)))
 
 ;;;; Merge options
 

src/status_im/navigation/events.cljs

@@ -101,8 +101,9 @@
   (let [{:keys [sheets]} (:bottom-sheet db)
         rest-sheets      (butlast sheets)]
     (merge
-     {:db                (assoc db :bottom-sheet {:sheets rest-sheets :hide? false})
-      :hide-bottom-sheet nil}
+     {:db                         (assoc db :bottom-sheet {:sheets rest-sheets :hide? false})
+      :hide-bottom-sheet          nil
+      :reload-status-nav-color-fx (:view-id db)}
      (when (seq rest-sheets)
        {:dispatch [:show-next-bottom-sheet]}))))
 
@@ -134,7 +135,11 @@
 (rf/defn set-view-id
   {:events [:set-view-id]}
   [{:keys [db]} view-id]
-  (when-not (= view-id (:view-id db))
-    (let [view-id (if (= view-id :shell-stack) (shell.utils/calculate-view-id) view-id)]
-      {:db             (assoc db :view-id view-id)
-       :set-view-id-fx view-id})))
+  (let [view-id (if (= view-id :shell-stack) (shell.utils/calculate-view-id) view-id)]
+    {:db             (assoc db :view-id view-id)
+     :set-view-id-fx view-id}))
+
+(rf/defn reload-status-nav-color
+  {:events [:reload-status-nav-color]}
+  [{:keys [db]} view-id]
+  {:reload-status-nav-color-fx (or view-id (:view-id db))})

src/status_im/navigation/screens.cljs

@@ -450,11 +450,7 @@
      :component settings-password/view}]
 
    [{:name    :shell
-     :options {:theme :dark}}
-    {:name :communities-stack}
-    {:name :chats-stack}
-    {:name :wallet-stack}
-    {:name :browser-stack}]
+     :options {:theme :dark}}]
 
    (when js/goog.DEBUG
      [{:name      :dev-component-preview

src/status_im/navigation/state.cljs

@@ -4,6 +4,7 @@
 (defonce root-id (atom nil))
 (defonce modals (atom []))
 (defonce dissmissing (atom false))
+(defonce alert-banner-shown? (atom false))
 
 (defonce ^:private navigation-state (atom []))