fix status bar colors

components/src/status_im/ui/components/react.cljs

@@ -38,6 +38,7 @@
 (def safe-area-view (get-class "SafeAreaView"))
 (def progress-bar (get-class "ProgressBarAndroid"))
 
+(def status-bar-class (when-not platform/desktop? (get-react-property "StatusBar")))
 (def status-bar (get-class (if platform/desktop? "View" "StatusBar")))
 
 (def scroll-view (get-class "ScrollView"))

src/status_im/ui/components/status_bar/styles.cljs

@@ -25,9 +25,20 @@
    :android (create-status-bar-style {:translucent?     true
                                       :bar-style        "dark-content"})})
 
+(defstyle status-bar-main-main
+  {:ios     (create-status-bar-style {:background-color colors/white
+                                      :bar-style        "default"})
+   :android (create-status-bar-style {:background-color colors/black
+                                      :bar-style        "light-content"})})
+
 (def view-main
   (create-view-style {:background-color colors/white}))
 
+(defstyle view-modal-main
+  {:ios     (create-view-style {:background-color colors/white})
+   :android (create-view-style {:background-color colors/black
+                                :height           0})})
+
 ;; :transparent
 (defstyle status-bar-transparent
   {:ios     (create-status-bar-style {:background-color colors/transparent})

src/status_im/ui/components/status_bar/view.cljs

@@ -1,19 +1,117 @@
 (ns status-im.ui.components.status-bar.view
   (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.status-bar.styles :as styles]))
+            [status-im.ui.components.status-bar.styles :as styles]
+            [status-im.utils.platform :as platform]))
 
 (defn status-bar [{:keys [type flat?]}]
-  (let [[status-bar-style view-style]
+  (let [view-style
         (case type
-          :main         [styles/status-bar-main styles/view-main]
+          :main styles/view-main
-          :transparent  [styles/status-bar-transparent styles/view-transparent]
+          :modal-main styles/view-modal-main
-          :modal        [styles/status-bar-modal styles/view-modal]
+          :transparent styles/view-transparent
-          :modal-white  [styles/status-bar-modal-white styles/view-modal-white]
+          :modal styles/view-modal
-          :modal-wallet [styles/status-bar-modal-wallet styles/view-modal-wallet]
+          :modal-white styles/view-modal-white
-          :transaction  [styles/status-bar-transaction styles/view-transaction]
+          :modal-wallet styles/view-modal-wallet
-          :wallet       [styles/status-bar-wallet styles/view-wallet]
+          :transaction styles/view-transaction
-          :wallet-tab   [styles/status-bar-wallet-tab styles/view-wallet-tab]
+          :wallet styles/view-wallet
-          [styles/status-bar-default styles/view-default])]
+          :wallet-tab styles/view-wallet-tab
-    [react/view
+          styles/view-default)]
-     [react/status-bar (cond-> status-bar-style flat? (assoc :elevation 0))]
+    [react/view {:style (cond-> view-style flat? (assoc :elevation 0))}]))
-     [react/view {:style (cond-> view-style flat? (assoc :elevation 0))}]]))
+
+(defn get-config [view-id]
+  (get
+   {:create-account                  {:flat? true}
+    :chat-modal                      {:type :modal-white}
+    :intro                           {:flat? true}
+    :home                            {:type :main}
+    :chat-stack                      {:type :main}
+    :new                             {:type :main}
+    :new-chat                        {:type :main}
+    :contact-toggle-list             {:type :main}
+    :new-public-chat                 {:type :main}
+    :qr-scanner                      {:type :main}
+    :open-dapp                       {:type :main}
+    :my-profile                      {:type :main}
+    :profile-stack                   {:type :main}
+    :contacts-list                   {:type :main}
+    :browser                         {:type :main}
+    :mobile-network-settings         {:type :main}
+    :backup-seed                     {:type :main}
+    :currency-settings               {:type :main}
+    :installations                   {:type :main}
+    :transactions-history            {:type :main}
+    :dapps-permissions               {:type :main}
+    :help-center                     {:type :main}
+    :about-app                       {:type :main}
+    :offline-messaging-settings      {:type :main}
+    :bootnodes-settings              {:type :main}
+    :fleet-settings                  {:type :main}
+    :log-level-settings              {:type :main}
+    :stickers-pack-modal             {:type :main}
+    :show-extension-modal            {:type :main}
+    :wallet                          {:type :wallet-tab}
+    :wallet-stack                    {:type :wallet-tab}
+    :profile-qr-viewer               {:type :modal-white}
+    :recipient-qr-code               {:type :transparent}
+    :wallet-send-assets              {:type :wallet}
+    :wallet-request-assets           {:type :wallet}
+    :recent-recipients               {:type :wallet}
+    :contact-code                    {:type :wallet}
+    :wallet-onboarding-setup         {:type :wallet}
+    :wallet-send-transaction-request {:type :wallet}
+    :wallet-request-transaction      {:type :wallet-tab}
+    :wallet-send-transaction-chat    {:type :wallet}
+    :wallet-send-transaction         {:type :wallet-tab}
+    :sign-message-modal              {:type :modal-wallet}
+    :wallet-transaction-fee          {:type :modal-wallet}
+    :wallet-modal                    {:type :modal-wallet}
+    :wallet-onboarding-setup-modal   {:type :modal-wallet}
+    :wallet-send-transaction-modal   {:type :modal-wallet}
+    :wallet-settings-assets          {:type :modal-wallet}
+    :wallet-sign-message-modal       {:type :modal-wallet}
+    :wallet-settings-hook            {:type :wallet}
+    :wallet-transaction-sent         {:type :transparent}
+    :wallet-transaction-sent-modal   {:type :modal-wallet}
+    :wallet-transactions-filter      {:type :modal-main}}
+   view-id))
+
+(defn set-status-bar
+  "If more than one `StatusBar` is rendered, the one which was mounted last will
+  have higher priority
+  https://facebook.github.io/react-native/docs/statusbar.html
+
+  This means that if we have more than one screen rendered at the same time
+  (which happens due to bottom nav change), it might happen that the screen
+  which was already rendered before will be reopened but the `StatusBar` from
+  a different screen which still exists but is blurred will be applied.
+  Thus we need to set props to `StatusBar` imperatively when a particular screen
+  is shown. At the same time, the background of `StatusBar` should be rendered
+  inside the screen in order to have better transitions between screens."
+  [view-id]
+  (let [{:keys [type]} (get-config view-id)
+        {:keys [background-color bar-style hidden
+                network-activity-indicator-visible
+                translucent]}
+        (case type
+          :main styles/status-bar-main
+          :modal-main styles/status-bar-main-main
+          :transparent styles/status-bar-transparent
+          :modal styles/status-bar-modal
+          :modal-white styles/status-bar-modal-white
+          :modal-wallet styles/status-bar-modal-wallet
+          :transaction styles/status-bar-transaction
+          :wallet styles/status-bar-wallet
+          :wallet-tab styles/status-bar-wallet-tab
+          styles/status-bar-default)]
+    (when (and background-color platform/android?)
+      (.setBackgroundColor react/status-bar-class (clj->js background-color)))
+    (when bar-style
+      (.setBarStyle react/status-bar-class (clj->js bar-style)))
+    (when hidden
+      (.setHidden react/status-bar-class (clj->js hidden)))
+    (when network-activity-indicator-visible
+      (.setNetworkActivityIndicatorVisible
+       react/status-bar-class
+       (clj->js network-activity-indicator-visible)))
+    (when translucent
+      (.setTranslucent react/status-bar-class (clj->js translucent)))))

src/status_im/ui/screens/routing/core.cljs

@@ -13,7 +13,22 @@
    [status-im.ui.screens.routing.chat-stack :as chat-stack]
    [status-im.ui.screens.routing.wallet-stack :as wallet-stack]
    [status-im.ui.screens.routing.profile-stack :as profile-stack]
-   [status-im.ui.components.bottom-bar.core :as bottom-bar]))
+   [status-im.ui.components.bottom-bar.core :as bottom-bar]
+   [status-im.ui.components.status-bar.view :as status-bar]))
+
+(defn navigation-events [view-id modal?]
+  [:> navigation/navigation-events
+   {:on-will-focus
+    (fn []
+      (log/debug :on-will-focus view-id)
+      (when modal?
+        (status-bar/set-status-bar view-id))
+      (re-frame/dispatch [:screens/on-will-focus view-id]))
+    :on-did-focus
+    (fn []
+      (log/debug :on-did-focus view-id)
+      (when-not modal?
+        (status-bar/set-status-bar view-id)))}])
 
 (defn wrap [view-id component]
   "Wraps screen with main view and adds navigation-events component"
@@ -21,11 +36,7 @@
     (let [main-view (react/create-main-screen-view view-id)]
       [main-view common-styles/flex
        [component]
-       [:> navigation/navigation-events
+       [navigation-events view-id false]])))
-        {:on-will-focus
-         (fn []
-           (log/debug :on-will-focus view-id)
-           (re-frame/dispatch [:screens/on-will-focus view-id]))}]])))
 
 (defn wrap-modal [modal-view component]
   "Wraps modal screen with necessary styling and adds :on-request-close handler
@@ -47,9 +58,11 @@
                                :else
                                (re-frame/dispatch [:navigate-back])))}
         [react/main-screen-modal-view modal-view
-         [component]]]]
+         [component]]
+        [navigation-events modal-view true]]]
       [react/main-screen-modal-view modal-view
-       [component]])))
+       [component]
+       [navigation-events modal-view true]])))
 
 (defn prepare-config [config]
   (-> config

src/status_im/ui/screens/wallet/transactions/views.cljs

@@ -139,7 +139,7 @@
 (defview filter-history []
   (letsubs [filter-data [:wallet.transactions/filters]]
     [react/view styles/filter-container
-     [status-bar/status-bar {:type :modal-white}]
+     [status-bar/status-bar {:type :modal-main}]
      [toolbar/toolbar {}
       [toolbar/nav-clear-text {:accessibility-label :done-button} (i18n/label :t/done)]
       [toolbar/content-title (i18n/label :t/transactions-filter-title)]