Improve theme switch (#20984)

2024-08-09 20:12:49 +05:30 · 2024-08-09 20:12:49 +05:30 · 35e71289dc
parent 0dfc8384e6
commit 35e71289dc
13 changed files with 52 additions and 55 deletions
--- a/src/legacy/status_im/events.cljs
+++ b/src/legacy/status_im/events.cljs
@ -102,8 +102,7 @@
  (let [current-theme-type (get-in cofx [:db :profile/profile :appearance])]
    (when (and (multiaccounts.model/logged-in? db)
               (= current-theme-type status-im.constants/theme-type-system))
-      {:profile.settings/switch-theme-fx
-       [(get-in db [:profile/profile :appearance]) (:view-id db)]})))
+      {:dispatch [:theme/switch]})))

 (defn- on-biometric-auth-fail
  [{:keys [code]}]
--- a/src/status_im/common/theme/effects.cljs
+++ b/src/status_im/common/theme/effects.cljs
@ -0,0 +1,8 @@
+(ns status-im.common.theme.effects
+  (:require
+    [status-im.common.theme.core :as theme]
+    [utils.re-frame :as rf]))
+
+(rf/reg-fx :theme/legacy-theme-fx
+ (fn [theme]
+   (theme/set-legacy-theme theme)))
--- a/src/status_im/common/theme/events.cljs
+++ b/src/status_im/common/theme/events.cljs
@ -1,7 +1,8 @@
 (ns status-im.common.theme.events
  (:require
    [re-frame.core :as re-frame]
-    [status-im.common.theme.core :as theme]))
+    [status-im.common.theme.core :as theme]
+    [status-im.common.theme.utils :as utils]))

 (re-frame/reg-fx
 :theme/init-theme
@ -10,5 +11,16 @@

 (re-frame/reg-event-fx
 :theme/switch
- (fn [{db :db} [theme]]
-   {:db (assoc db :theme theme)}))
+ (fn [{db :db} [{:keys [theme view-id theme-type]}]]
+   "Switches the theme and triggers related effects.
+   Parameters:
+   - theme: Optional theme keyword to apply. If not provided, defaults to the theme determined by theme-type.
+   - theme-type: Optional theme type to determine the theme. If not provided, defaults to the theme type from the user's profile.
+   - view-id: Optional view ID for updating status color. If not provided, uses the current view ID from the database."
+   (let [theme-type (or theme-type (get-in db [:profile/profile :appearance]))
+         theme      (or theme (utils/theme-type->theme-value theme-type))]
+     {:db (assoc db :theme theme)
+      :fx [[:theme/legacy-theme-fx theme]
+           [:dispatch
+            [:reload-status-nav-color
+             (or view-id (:view-id db))]]]})))
--- a/src/status_im/common/theme/utils.cljs
+++ b/src/status_im/common/theme/utils.cljs
@ -0,0 +1,17 @@
+(ns status-im.common.theme.utils
+  (:require
+    [status-im.common.theme.core :as theme]
+    [status-im.constants :as constants]))
+
+(defn theme-type->theme-value
+  "Converts theme type identifier to a theme keyword.
+  Returns `:light` or `:dark` based on `theme-type`:
+  - `theme-type-light` (1): Light theme.
+  - `theme-type-dark` (2): Dark theme.
+  - `theme-type-system` (0): Uses system preference."
+  [theme-type]
+  (condp = theme-type
+    constants/theme-type-dark   :dark
+    constants/theme-type-light  :light
+    constants/theme-type-system (if (theme/device-theme-dark?) :dark :light)
+    :dark))
--- a/src/status_im/contexts/preview/quo/common.cljs
+++ b/src/status_im/contexts/preview/quo/common.cljs
@ -19,10 +19,10 @@
      :icon-name  :i/close
      :right-side [{:icon-name (if light? :i/dark :i/light)
                    :on-press  #(if light?
-                                  (rf/dispatch [:theme/switch :dark])
-                                  (rf/dispatch [:theme/switch :light]))}]
+                                  (rf/dispatch [:theme/switch {:theme :dark}])
+                                  (rf/dispatch [:theme/switch {:theme :light}]))}]
      :on-press   #(if (or logged-in? (not= (rf/sub [:view-id]) :quo-preview))
                     (rf/dispatch [:navigate-back])
                     (do
-                       (rf/dispatch [:theme/switch :dark])
+                       (rf/dispatch [:theme/switch {:theme :dark}])
                       (rf/dispatch [:init-root root])))}]))
--- a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs
+++ b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs
@ -50,7 +50,7 @@
     (fn []
       (rn/use-effect (fn []
                        (when @blur?
-                          (rf/dispatch [:theme/switch :dark])))
+                          (rf/dispatch [:theme/switch {:theme :dark}])))
                      [@blur?])
       [preview/preview-container {:state state :descriptor descriptor}
        [rn/view
--- a/src/status_im/contexts/preview/quo/preview.cljs
+++ b/src/status_im/contexts/preview/quo/preview.cljs
@ -377,8 +377,8 @@
    (rn/use-effect (fn []
                     (when blur-dark-only?
                       (if blur?
-                         (rf/dispatch [:theme/switch :dark])
-                         (rf/dispatch [:theme/switch :light]))))
+                         (rf/dispatch [:theme/switch {:theme :dark}])
+                         (rf/dispatch [:theme/switch {:theme :light}]))))
                   [blur? blur-dark-only?])
    [rn/view
     {:style {:top  (safe-area/get-top)
--- a/src/status_im/contexts/profile/login/events.cljs
+++ b/src/status_im/contexts/profile/login/events.cljs
@ -4,7 +4,6 @@
    [native-module.core :as native-module]
    [status-im.common.keychain.events :as keychain]
    [status-im.config :as config]
-    [status-im.constants :as constants]
    status-im.contexts.profile.login.effects
    [status-im.contexts.profile.rpc :as profile.rpc]
    [status-im.feature-flags :as ff]
@ -80,11 +79,7 @@
                  [[:dispatch [:onboarding/finalize-setup]]]

                  :else
-                  [[:profile.settings/switch-theme-fx
-                    [(or (:appearance settings)
-                         constants/theme-type-dark)
-                     :shell-stack]]
-                   [:dispatch [:init-root :shell-stack]]
+                  [[:dispatch [:init-root :shell-stack]]
                   [:dispatch [:profile/show-testnet-mode-banner-if-enabled]]]))})))

 ;; login phase 2: we want to load and show chats faster, so we split login into 2 phases
--- a/src/status_im/contexts/profile/settings/effects.cljs
+++ b/src/status_im/contexts/profile/settings/effects.cljs
@ -1,10 +1,7 @@
 (ns status-im.contexts.profile.settings.effects
  (:require [native-module.core :as native-module]
            [re-frame.core :as re-frame]
-            [react-native.platform :as platform]
-            [status-im.common.theme.core :as theme]
-            [status-im.constants :as constants]
-            [utils.re-frame :as rf]))
+            [react-native.platform :as platform]))

 (re-frame/reg-fx
 :profile.settings/blank-preview-flag-changed
@ -16,15 +13,3 @@
 (fn [value]
   (when platform/android?
     (native-module/toggle-webview-debug value))))
-
-(re-frame/reg-fx
- :profile.settings/switch-theme-fx
- (fn [[theme-type view-id]]
-   (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-legacy-theme theme)
-     (rf/dispatch [:theme/switch theme])
-     (rf/dispatch [:reload-status-nav-color view-id]))))
--- a/src/status_im/contexts/profile/settings/events.cljs
+++ b/src/status_im/contexts/profile/settings/events.cljs
@ -95,14 +95,7 @@
 (rf/reg-event-fx :profile.settings/change-appearance
 (fn [_ [theme]]
   {:fx [[:dispatch [:profile.settings/profile-update :appearance theme]]
-         [:profile.settings/switch-theme-fx [theme :appearance]]]}))
-
-(rf/reg-event-fx :profile.settings/switch-theme
- (fn [{:keys [db]} [theme view-id]]
-   (let [theme (or theme
-                   (get-in db [:profile/profile :appearance])
-                   constants/theme-type-dark)]
-     {:fx [[:profile.settings/switch-theme-fx [theme view-id]]]})))
+         [:dispatch [:theme/switch {:theme-type theme}]]]}))

 (rf/reg-fx :profile.settings/get-profile-picture
 (fn [key-uid]
--- a/src/status_im/events.cljs
+++ b/src/status_im/events.cljs
@ -12,6 +12,7 @@
    status-im.common.peer-stats.events
    status-im.common.shared-urls.events
    status-im.common.signals.events
+    status-im.common.theme.effects
    status-im.common.theme.events
    [status-im.common.toasts.events]
    status-im.common.universal-links
--- a/src/status_im/navigation/effects.cljs
+++ b/src/status_im/navigation/effects.cljs
@ -74,9 +74,7 @@
   (let [[status-bar-theme] (get-status-nav-color root-id theme)
         root               (get (roots/roots status-bar-theme) root-id)]
     (dismiss-all-modals)
-     (rf/dispatch [:profile.settings/switch-theme
-                   (get roots/themes root-id)
-                   root-id])
+     (rf/dispatch [:theme/switch {:view-id root-id}])
     (reset! state/root-id (or (get-in root [:root :stack :id]) root-id))
     (navigation/set-root root)
     (state/navigation-state-reset [{:id   root-id
--- a/src/status_im/navigation/roots.cljs
+++ b/src/status_im/navigation/roots.cljs
@ -1,19 +1,8 @@
 (ns status-im.navigation.roots
  (:require
    [quo.foundations.colors :as colors]
-    [status-im.constants :as constants]
    [status-im.navigation.options :as options]))

-;; Theme Order for navigation roots
-;; 1. Themes hardcoded in below map
-;; 2. If nil or no entry in map, then theme stored in
-;;    [:db :profile/profile :appearance] will be used (for mulitaccounts)
-;; 3). Fallback theme - Dark
-(def themes
-  {:screen/onboarding.intro constants/theme-type-dark
-   :screen/profile.profiles constants/theme-type-dark
-   :shell-stack             nil})
-
 (defn roots-internal
  [status-bar-theme]
  {:screen/onboarding.intro