From 35e71289dce758ba04e3772cf64bbf63bef59dd2 Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Fri, 9 Aug 2024 20:12:49 +0530 Subject: [PATCH] Improve theme switch (#20984) --- src/legacy/status_im/events.cljs | 3 +-- src/status_im/common/theme/effects.cljs | 8 ++++++++ src/status_im/common/theme/events.cljs | 18 +++++++++++++++--- src/status_im/common/theme/utils.cljs | 17 +++++++++++++++++ src/status_im/contexts/preview/quo/common.cljs | 6 +++--- .../preview/quo/gradient/gradient_cover.cljs | 2 +- .../contexts/preview/quo/preview.cljs | 4 ++-- .../contexts/profile/login/events.cljs | 7 +------ .../contexts/profile/settings/effects.cljs | 17 +---------------- .../contexts/profile/settings/events.cljs | 9 +-------- src/status_im/events.cljs | 1 + src/status_im/navigation/effects.cljs | 4 +--- src/status_im/navigation/roots.cljs | 11 ----------- 13 files changed, 52 insertions(+), 55 deletions(-) create mode 100644 src/status_im/common/theme/effects.cljs create mode 100644 src/status_im/common/theme/utils.cljs diff --git a/src/legacy/status_im/events.cljs b/src/legacy/status_im/events.cljs index 56f3792153..22a904c86c 100644 --- 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]}] diff --git a/src/status_im/common/theme/effects.cljs b/src/status_im/common/theme/effects.cljs new file mode 100644 index 0000000000..03cd6ea969 --- /dev/null +++ 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))) diff --git a/src/status_im/common/theme/events.cljs b/src/status_im/common/theme/events.cljs index 40aa9ef3b3..4fc45945fa 100644 --- 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))]]]}))) diff --git a/src/status_im/common/theme/utils.cljs b/src/status_im/common/theme/utils.cljs new file mode 100644 index 0000000000..574c23ddd0 --- /dev/null +++ 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)) diff --git a/src/status_im/contexts/preview/quo/common.cljs b/src/status_im/contexts/preview/quo/common.cljs index cea42ce91a..a3666d49e4 100644 --- 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])))}])) diff --git a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs index 69bd944019..e3566205f5 100644 --- 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 diff --git a/src/status_im/contexts/preview/quo/preview.cljs b/src/status_im/contexts/preview/quo/preview.cljs index dd726452d1..f00afea65f 100644 --- 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) diff --git a/src/status_im/contexts/profile/login/events.cljs b/src/status_im/contexts/profile/login/events.cljs index d6dbd553f1..a48371dd45 100644 --- 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 diff --git a/src/status_im/contexts/profile/settings/effects.cljs b/src/status_im/contexts/profile/settings/effects.cljs index b31b1e4b66..ac44d74544 100644 --- 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])))) diff --git a/src/status_im/contexts/profile/settings/events.cljs b/src/status_im/contexts/profile/settings/events.cljs index 728041f7b0..6a7cfb529d 100644 --- 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] diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 756aceab28..b0e6e05276 100644 --- 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 diff --git a/src/status_im/navigation/effects.cljs b/src/status_im/navigation/effects.cljs index b0b9079e7a..b15195d059 100644 --- 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 diff --git a/src/status_im/navigation/roots.cljs b/src/status_im/navigation/roots.cljs index 6c938f8b6b..33e49ca36f 100644 --- 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