fix some buttons are not responding after theme change (#14811)

src/status_im/add_new/core.cljs

@@ -91,7 +91,7 @@
                                         (i18n/label :t/use-valid-contact-code)
                                         :yourself
                                         (i18n/label :t/can-not-add-yourself))
-                          :on-dismiss #(re-frame/dispatch [:pop-to-root-tab :chat-stack])}})))
+                          :on-dismiss #(re-frame/dispatch [:pop-to-root-tab :shell-stack])}})))
 
 (rf/defn qr-code-scanned
   {:events [:contact/qr-code-scanned]}

src/status_im/contact/block.cljs

@@ -76,7 +76,7 @@
                  (re-frame/dispatch [:hide-popover])))
               ;; reset navigation to avoid going back to non existing one to one chat
               (if from-one-to-one-chat?
-                (navigation/pop-to-root-tab :chat-stack)
+                (navigation/pop-to-root-tab :shell-stack)
                 (navigation/navigate-back)))))
 
 (rf/defn contact-unblocked

src/status_im/events.cljs

@@ -112,10 +112,13 @@
 
 (rf/defn system-theme-mode-changed
   {:events [:system-theme-mode-changed]}
-  [cofx _]
+  [{:keys [db] :as cofx} _]
-  (when (multiaccounts.model/logged-in? cofx)
+  (let [current-theme-type (get-in cofx [:db :multiaccount :appearance])]
-    {:multiaccounts.ui/switch-theme (get-in cofx [:db :multiaccount :appearance])
+    (when (and (multiaccounts.model/logged-in? cofx)
-     :dispatch                      [:reload-new-ui]}))
+               (= current-theme-type status-im2.constants/theme-type-system))
+      {:multiaccounts.ui/switch-theme
+       [(get-in db [:multiaccount :appearance])
+        (:view-id db) true]})))
 
 (def authentication-options
   {:reason (i18n/label :t/biometric-auth-reason-login)})

src/status_im/group_chats/core.cljs

@@ -23,7 +23,7 @@
   (rf/merge cofx
             {:db         (dissoc (:db cofx) :current-chat-id)
              :dispatch-n [[:sanitize-messages-and-process-response response]
-                          [:pop-to-root-tab :chat-stack]]}
+                          [:pop-to-root-tab :shell-stack]]}
             (activity-center/notifications-fetch-unread-count)))
 
 (rf/defn handle-chat-update
@@ -124,7 +124,7 @@
   [cofx chat-id]
   (rf/merge cofx
             (chat.events/deactivate-chat chat-id)
-            (navigation/pop-to-root-tab :chat-stack)))
+            (navigation/pop-to-root-tab :shell-stack)))
 
 (def not-blank?
   (complement string/blank?))

src/status_im/multiaccounts/core.cljs

@@ -8,11 +8,15 @@
             [status-im.native-module.core :as native-module]
             [status-im.theme.core :as theme]
             [utils.re-frame :as rf]
+            [quo2.foundations.colors :as colors]
+            [status-im2.constants :as constants]
             [status-im.utils.gfycat.core :as gfycat]
             [status-im.utils.identicon :as identicon]
             [status-im.utils.utils :as utils]
+            [status-im2.setup.hot-reload :as hot-reload]
             [status-im2.common.theme.core :as utils.theme]
-            [taoensso.timbre :as log]))
+            [taoensso.timbre :as log]
+            [status-im2.contexts.shell.animation :as shell.animation]))
 
 ;; validate that the given mnemonic was generated from Status Dictionary
 (re-frame/reg-fx
@@ -173,17 +177,27 @@
 
 (re-frame/reg-fx
  :multiaccounts.ui/switch-theme
- (fn [theme-id]
+ (fn [[theme-type view-id reload-ui?]]
-   (let [theme (if (or (= 2 theme-id) (and (= 0 theme-id) (utils.theme/dark-mode?)))
+   (let [[theme status-bar-theme nav-bar-color]
-                 :dark
+         ;; Status bar theme represents status bar icons colors, so opposite to app theme
-                 :light)]
+         (if (or (= theme-type constants/theme-type-dark)
-     (theme/change-theme theme))))
+                 (and (= theme-type constants/theme-type-system)
+                      (utils.theme/dark-mode?)))
+           [:dark :light colors/neutral-100]
+           [:light :dark colors/white])]
+     (theme/change-theme theme)
+     (re-frame/dispatch [:change-root-status-bar-style
+                         (if (shell.animation/home-stack-open?) status-bar-theme :light)])
+     (when reload-ui?
+       (hot-reload/reload)
+       (when-not (= view-id :shell-stack)
+         (re-frame/dispatch [:change-root-nav-bar-color nav-bar-color]))))))
 
 (rf/defn switch-appearance
   {:events [:multiaccounts.ui/appearance-switched]}
   [cofx theme]
   (rf/merge cofx
-            {:multiaccounts.ui/switch-theme theme}
+            {:multiaccounts.ui/switch-theme [theme :appearance true]}
             (multiaccounts.update/multiaccount-update :appearance theme {})))
 
 (rf/defn switch-profile-picture-show-to

src/status_im/multiaccounts/login/core.cljs

@@ -351,7 +351,7 @@
 
 (rf/defn initialize-appearance
   [cofx]
-  {:multiaccounts.ui/switch-theme (get-in cofx [:db :multiaccount :appearance])})
+  {:multiaccounts.ui/switch-theme [(get-in cofx [:db :multiaccount :appearance]) nil false]})
 
 (rf/defn get-group-chat-invitations
   [_]
@@ -490,7 +490,7 @@
   "Decides which root should be initialised depending on user and app state"
   [db]
   (if (get db :tos/accepted?)
-    (re-frame/dispatch [:init-root (if config/new-ui-enabled? :shell-stack :chat-stack)])
+    (re-frame/dispatch [:init-root :shell-stack])
     (re-frame/dispatch [:init-root :tos])))
 
 (rf/defn login-only-events
@@ -539,14 +539,7 @@
               (multiaccounts/switch-preview-privacy-mode-flag)
               (link-preview/request-link-preview-whitelist)
               (logging/set-log-level (:log-level multiaccount))
-
+              (navigation/init-root :shell-stack))))
-              (if config/new-ui-enabled?
-                (navigation/init-root :shell-stack)
-                ;; if it's a first account, the ToS will be accepted at welcome carousel
-                ;; if not a first account, the ToS might have been accepted by other account logins
-                (if (or first-account? tos-accepted?)
-                  (navigation/init-root :onboarding-notification)
-                  (navigation/init-root :tos))))))
 
 (defn- keycard-setup?
   [cofx]
@@ -564,7 +557,7 @@
               :multiaccount)
       (assoc :tos-accept-next-root
              (if login-only?
-               :chat-stack
+               :shell-stack
                :onboarding-notification))
       (assoc :logged-in-since now)
       (assoc :view-id :home)))
@@ -737,7 +730,7 @@
 (rf/defn welcome-lets-go
   {:events [:welcome-lets-go]}
   [_]
-  {:init-root-fx :chat-stack})
+  {:init-root-fx :shell-stack})
 
 (rf/defn multiaccount-selected
   {:events [:multiaccounts.login.ui/multiaccount-selected]}

src/status_im/qr_scanner/core.cljs

@@ -76,7 +76,7 @@
       :else
       {:utils/show-popup {:title      (i18n/label :t/unable-to-read-this-code)
                           :content    (i18n/label :t/ens-name-not-found)
-                          :on-dismiss #(re-frame/dispatch [:pop-to-root-tab :chat-stack])}})))
+                          :on-dismiss #(re-frame/dispatch [:pop-to-root-tab :shell-stack])}})))
 
 (rf/defn handle-eip681
   [cofx data]
@@ -116,7 +116,7 @@
                  :event ::match-scanned-value})
       {:dispatch         [:navigate-back]
        :utils/show-popup {:title      (i18n/label :t/unable-to-read-this-code)
-                          :on-dismiss #(re-frame/dispatch [:pop-to-root-tab :chat-stack])}})))
+                          :on-dismiss #(re-frame/dispatch [:pop-to-root-tab :shell-stack])}})))
 
 (rf/defn on-scan
   {:events [::on-scan-success]}

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

@@ -5,17 +5,12 @@
             [re-frame.core :as re-frame]
             [utils.i18n :as i18n]
             [status-im.react-native.resources :as resources]
-            [status-im.ui.components.react :as react]
+            [status-im.ui.components.react :as react]))
-            [status-im2.config :as config]))
 
 (defn button
   [label icon theme selected?]
   [react/touchable-highlight
-   {:on-press (fn []
+   {:on-press #(re-frame/dispatch [:multiaccounts.ui/appearance-switched theme])}
-                (re-frame/dispatch [:multiaccounts.ui/appearance-switched theme])
-                (re-frame/dispatch (if config/new-ui-enabled? [:reload-new-ui] [:init-root :chat-stack]))
-                (re-frame/dispatch [:navigate-change-tab :profile])
-                (js/setTimeout #(re-frame/dispatch [:navigate-to :appearance]) 1000))}
    [react/view
     (merge {:align-items :center :padding 8 :border-radius 20}
            (when selected?

src/status_im2/config.cljs

@@ -142,9 +142,6 @@
 
 (def wallet-connect-project-id "87815d72a81d739d2a7ce15c2cfdefb3")
 
-;;TODO for development only should be removed in status 2.0
-(def new-ui-enabled? true)
-
 (def delete-message-undo-time-limit-ms 4000)
 (def delete-message-for-me-undo-time-limit-ms 4000)
 

src/status_im2/constants.cljs

@@ -265,3 +265,7 @@
 (def ^:const multi-code-prefix
   "We prefix our keys with 0xe701 prior to serialisation them"
   "0xe701")
+
+(def ^:const theme-type-system 0)
+(def ^:const theme-type-light 1)
+(def ^:const theme-type-dark 2)

src/status_im2/contexts/chat/events.cljs

@@ -167,9 +167,12 @@
                {:db (dissoc db :current-chat-id)}
                (let [community-id (get-in db [:chats chat-id :community-id])]
                  ;; When navigating back from community chat to community, update switcher card
+                 ;; A close chat event is also called while opening any chat.
+                 ;; That might lead to duplicate :dispatch keys in fx/merge, that's why dispatch-n is
+                 ;; used here.
                  (when (and community-id (not navigate-to-shell?))
-                   {:dispatch [:shell/add-switcher-card
+                   {:dispatch-n [[:shell/add-switcher-card
-                               :community {:community-id community-id}]})))
+                                  :community {:community-id community-id}]]})))
               (delete-for-me/sync-all)
               (delete-message/send-all)
               (offload-messages chat-id))))

src/status_im2/contexts/shell/animation.cljs

@@ -1,6 +1,6 @@
 (ns status-im2.contexts.shell.animation
   (:require [quo2.foundations.colors :as colors]
-            [re-frame.core :as re-frame]
+            [utils.re-frame :as rf]
             [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
             [status-im.async-storage.core :as async-storage]
@@ -142,6 +142,14 @@
 
 ;; Animations
 
+(defn change-root-status-bar-style
+  []
+  (rf/dispatch [:change-root-status-bar-style
+                (if (or (colors/dark?)
+                        (not (home-stack-open?)))
+                  :light
+                  :dark)]))
+
 (defn open-home-stack
   [stack-id animate?]
   (let [home-stack-state-value (if animate?
@@ -153,11 +161,10 @@
     (reanimated/set-shared-value
      (:home-stack-state @shared-values-atom)
      home-stack-state-value)
-    (when-not (colors/dark?)
-      (js/setTimeout
-       #(re-frame/dispatch [:change-root-status-bar-style :dark])
-       shell.constants/shell-animation-time))
     (reset! home-stack-state home-stack-state-value)
+    (js/setTimeout
+     change-root-status-bar-style
+     shell.constants/shell-animation-time)
     (reset! selected-stack-id stack-id)
     (async-storage/set-item! :selected-stack-id stack-id)))
 
@@ -190,8 +197,7 @@
     (reanimated/set-shared-value
      (:home-stack-state @shared-values-atom)
      home-stack-state-value)
-    (when-not (colors/dark?)
-      (re-frame/dispatch [:change-root-status-bar-style :light]))
     (reset! home-stack-state home-stack-state-value)
+    (change-root-status-bar-style)
     (reset! selected-stack-id nil)
     (async-storage/set-item! :selected-stack-id nil)))

src/status_im2/contexts/shell/events.cljs

@@ -4,6 +4,7 @@
             [status-im.utils.core :as utils]
             [status-im2.constants :as constants]
             [status-im2.navigation.events :as navigation]
+            [status-im.async-storage.core :as async-storage]
             [status-im2.contexts.shell.animation :as animation]
             [status-im2.contexts.shell.constants :as shell.constants]
             [status-im.data-store.switcher-cards :as switcher-cards-store]))
@@ -24,6 +25,7 @@
  :shell/reset-bottom-tabs
  (fn []
    (let [selected-stack-id @animation/selected-stack-id]
+     (async-storage/set-item! :selected-stack-id nil)
      (reset! animation/load-communities-stack? (= selected-stack-id :communities-stack))
      (reset! animation/load-chats-stack? (= selected-stack-id :chats-stack))
      (reset! animation/load-wallet-stack? (= selected-stack-id :wallet-stack))

src/status_im2/contexts/shell/view.cljs

@@ -112,6 +112,7 @@
   [:f>
    (fn []
      (let [shared-values (animation/calculate-shared-values)]
+       (animation/change-root-status-bar-style)
        [rn/view
         {:style     {:flex 1}
          :on-layout (when-not @animation/screen-height

src/status_im2/navigation/core.cljs

@@ -372,6 +372,11 @@
  (fn [style]
    (navigation/merge-options "shell-stack" {:statusBar {:style style}})))
 
+(re-frame/reg-fx
+ :change-root-nav-bar-color-fx
+ (fn [color]
+   (navigation/merge-options "shell-stack" {:navigationBar {:backgroundColor color}})))
+
 (re-frame/reg-fx
  :pop-to-root-tab-fx
  (fn [tab]

src/status_im2/navigation/events.cljs

@@ -123,3 +123,8 @@
   {:events [:change-root-status-bar-style]}
   [_ style]
   {:change-root-status-bar-style-fx style})
+
+(rf/defn change-root-nav-bar-color
+  {:events [:change-root-nav-bar-color]}
+  [_ color]
+  {:change-root-nav-bar-color-fx color})

src/status_im2/navigation/roots.cljs

@@ -1,16 +1,19 @@
 (ns status-im2.navigation.roots
   (:require [quo2.foundations.colors :as colors]
             [react-native.platform :as platform]
-            [status-im2.navigation.view :as views]))
+            [status-im2.navigation.view :as views]
+            [status-im2.navigation.state :as state]
+            [status-im2.common.theme.core :as utils.theme]))
 
 (defn status-bar-options
   []
-  (if platform/android?
+  (let [dark-mode? (if (= @state/root-id :shell-stack) (colors/dark?) (utils.theme/dark-mode?))]
-    {:navigationBar {:backgroundColor colors/neutral-100}
+    (if platform/android?
-     :statusBar     {:backgroundColor :transparent
+      {:navigationBar {:backgroundColor colors/neutral-100}
-                     :style           :light
+       :statusBar     {:backgroundColor :transparent
-                     :drawBehind      true}}
+                       :style           (if dark-mode? :light :dark)
-    {:statusBar {:style :light}}))
+                       :drawBehind      true}}
+      {:statusBar {:style (if dark-mode? :light :dark)}})))
 
 (defn topbar-options
   []

src/status_im2/subs/home.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.subs.home
-  (:require [re-frame.core :as re-frame]
+  (:require [re-frame.core :as re-frame]))
-            [status-im2.config :as config]))
 
 (def memo-home-items (atom nil))
 
@@ -12,8 +11,7 @@
  :<- [:view-id]
  :<- [:home-items-show-number]
  (fn [[search-filter filtered-chats communities view-id home-items-show-number]]
-   (if (or (= view-id :home)
+   (if (= view-id :shell-stack)
-           (and config/new-ui-enabled? (= view-id :shell-stack)))
      (let [communities-count          (count communities)
            chats-count                (count filtered-chats)
            ;; If we have both communities & chats we want to display