From 7b60a5f86799a56806017a678815542f9087fb6a Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Fri, 24 Mar 2023 22:04:55 +0530 Subject: [PATCH] Refactor app theme management (#15455) --- src/status_im/events.cljs | 2 +- src/status_im/multiaccounts/core.cljs | 19 +++++++++----- src/status_im/multiaccounts/login/core.cljs | 9 +------ src/status_im/theme/core.cljs | 14 ----------- src/status_im2/common/theme/core.cljs | 25 ++++++++++++------- src/status_im2/contexts/quo_preview/main.cljs | 2 +- src/status_im2/events.cljs | 8 ++---- src/status_im2/navigation/core.cljs | 3 +++ src/status_im2/navigation/roots.cljs | 17 ++++++++++--- 9 files changed, 51 insertions(+), 48 deletions(-) delete mode 100644 src/status_im/theme/core.cljs diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 3122ab068f..5b6bbb46b1 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -117,7 +117,7 @@ (let [current-theme-type (get-in cofx [:db :multiaccount :appearance])] (when (and (multiaccounts.model/logged-in? cofx) (= current-theme-type status-im2.constants/theme-type-system)) - {:multiaccounts.ui/switch-theme + {:multiaccounts.ui/switch-theme-fx [(get-in db [:multiaccount :appearance]) (:view-id db) true]}))) diff --git a/src/status_im/multiaccounts/core.cljs b/src/status_im/multiaccounts/core.cljs index 6736cb0261..24cf462047 100644 --- a/src/status_im/multiaccounts/core.cljs +++ b/src/status_im/multiaccounts/core.cljs @@ -5,14 +5,13 @@ [status-im2.common.bottom-sheet.events :as bottom-sheet] [status-im.multiaccounts.update.core :as multiaccounts.update] [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-im2.setup.hot-reload :as hot-reload] - [status-im2.common.theme.core :as utils.theme] + [status-im2.common.theme.core :as theme] [taoensso.timbre :as log] [status-im2.contexts.shell.animation :as shell.animation] [status-im.contact.db :as contact.db])) @@ -137,16 +136,16 @@ {::blank-preview-flag-changed private?})) (re-frame/reg-fx - :multiaccounts.ui/switch-theme + :multiaccounts.ui/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) - (utils.theme/dark-mode?))) + (theme/device-theme-dark?))) [:dark :light colors/neutral-100] [:light :dark colors/white])] - (theme/change-theme theme) + (theme/set-theme theme) (re-frame/dispatch [:change-root-status-bar-style (if (shell.animation/home-stack-open?) status-bar-theme :light)]) (when reload-ui? @@ -158,9 +157,17 @@ {:events [:multiaccounts.ui/appearance-switched]} [cofx theme] (rf/merge cofx - {:multiaccounts.ui/switch-theme [theme :appearance true]} + {:multiaccounts.ui/switch-theme-fx [theme :appearance true]} (multiaccounts.update/multiaccount-update :appearance theme {}))) +(rf/defn switch-theme + {:events [:multiaccounts.ui/switch-theme]} + [cofx theme view-id] + (let [theme (or theme + (get-in cofx [:db :multiaccount :appearance]) + constants/theme-type-dark)] + {:multiaccounts.ui/switch-theme-fx [theme view-id false]})) + (rf/defn switch-profile-picture-show-to {:events [:multiaccounts.ui/profile-picture-show-to-switched]} [cofx id] diff --git a/src/status_im/multiaccounts/login/core.cljs b/src/status_im/multiaccounts/login/core.cljs index 0f47acbcd5..94f421c09e 100644 --- a/src/status_im/multiaccounts/login/core.cljs +++ b/src/status_im/multiaccounts/login/core.cljs @@ -339,10 +339,6 @@ {:method "permissions_getDappPermissions" :on-success #(re-frame/dispatch [::initialize-dapp-permissions %])}]}) -(rf/defn initialize-appearance - [cofx] - {:multiaccounts.ui/switch-theme [(get-in cofx [:db :multiaccount :appearance]) nil false]}) - (rf/defn get-group-chat-invitations [_] {:json-rpc/call @@ -394,7 +390,6 @@ #(do (re-frame/dispatch [:chats-list/load-success %]) (rf/dispatch [:communities/get-user-requests-to-join]) (re-frame/dispatch [::get-chats-callback]))}) - (initialize-appearance) (initialize-wallet-connect) (get-node-config) (communities/fetch) @@ -532,7 +527,6 @@ (assoc-in [:multiaccount :multiaccounts/first-account] first-account?)) ::get-tokens [network-id accounts recovered-account?]} (finish-keycard-setup) - (initialize-appearance) (transport/start-messenger) (communities/fetch) (data-store.chats/fetch-chats-rpc @@ -636,8 +630,7 @@ login) (rf/merge cofx - {:db (dissoc db :goto-key-storage?) - :theme/change-theme :dark} + {:db (dissoc db :goto-key-storage?)} (when keycard-account? {:db (-> db (assoc-in [:keycard :pin :status] nil) diff --git a/src/status_im/theme/core.cljs b/src/status_im/theme/core.cljs deleted file mode 100644 index 0a372c7faa..0000000000 --- a/src/status_im/theme/core.cljs +++ /dev/null @@ -1,14 +0,0 @@ -(ns status-im.theme.core - (:require [quo.theme :as quo.theme] - [quo2.theme :as quo2.theme] - [re-frame.core :as re-frame])) - -(defn change-theme - [theme] - (quo.theme/set-theme theme) - (quo2.theme/set-theme theme)) - -(re-frame/reg-fx - :theme/change-theme - (fn [theme] - (change-theme theme))) diff --git a/src/status_im2/common/theme/core.cljs b/src/status_im2/common/theme/core.cljs index c5a91527a6..b53df8ac3d 100644 --- a/src/status_im2/common/theme/core.cljs +++ b/src/status_im2/common/theme/core.cljs @@ -1,17 +1,24 @@ (ns status-im2.common.theme.core - (:require [react-native.core :as rn])) + (:require [quo.theme :as quo] + [quo2.theme :as quo2] + [react-native.core :as rn])) -(def initial-mode (atom (rn/get-color-scheme))) +(def device-theme (atom (rn/get-color-scheme))) ;; Note - don't use value returned by change listener ;; https://github.com/facebook/react-native/issues/28525 -(defn add-mode-change-listener +(defn add-device-theme-change-listener [callback] - (rn/appearance-add-change-listener #(let [mode (rn/get-color-scheme)] - (when-not (= mode @initial-mode) - (reset! initial-mode mode) - (callback (keyword mode)))))) + (rn/appearance-add-change-listener #(let [theme (rn/get-color-scheme)] + (when-not (= theme @device-theme) + (reset! device-theme theme) + (callback (keyword theme)))))) -(defn dark-mode? +(defn device-theme-dark? [] - (= @initial-mode "dark")) + (= @device-theme "dark")) + +(defn set-theme + [value] + (quo/set-theme value) + (quo2/set-theme value)) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 552fde2c08..fae61867f1 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -4,9 +4,9 @@ [quo2.components.buttons.button :as quo2-button] [quo2.components.markdown.text :as quo2-text] [quo2.foundations.colors :as colors] - [quo2.theme :as theme] [re-frame.core :as re-frame] [react-native.core :as rn] + [status-im2.common.theme.core :as theme] [status-im2.contexts.quo-preview.animated-header-list.animated-header-list :as animated-header-list] [status-im2.contexts.quo-preview.avatars.account-avatar :as account-avatar] [status-im2.contexts.quo-preview.avatars.channel-avatar :as channel-avatar] diff --git a/src/status_im2/events.cljs b/src/status_im2/events.cljs index a7a66c01c0..43c2b83a9f 100644 --- a/src/status_im2/events.cljs +++ b/src/status_im2/events.cljs @@ -1,7 +1,5 @@ (ns status-im2.events (:require [clojure.string :as string] - [quo.theme :as quo.theme] - [quo2.theme :as quo2.theme] [re-frame.core :as re-frame] [status-im.multiaccounts.login.core :as multiaccounts.login] [status-im.native-module.core :as status] @@ -32,10 +30,8 @@ (re-frame/reg-fx :setup/init-theme (fn [] - (theme/add-mode-change-listener #(re-frame/dispatch [:system-theme-mode-changed %])) - (quo2.theme/set-theme :dark) - ;; TODO legacy support - (quo.theme/set-theme :dark))) + (theme/add-device-theme-change-listener + #(re-frame/dispatch [:system-theme-mode-changed %])))) (rf/defn initialize-views {:events [:setup/initialize-view]} diff --git a/src/status_im2/navigation/core.cljs b/src/status_im2/navigation/core.cljs index f13df3f223..e9754327c2 100644 --- a/src/status_im2/navigation/core.cljs +++ b/src/status_im2/navigation/core.cljs @@ -190,6 +190,9 @@ (let [root (get (roots/roots) new-root-id)] (log/debug :init-root-fx new-root-id) (dismiss-all-modals) + (re-frame/dispatch [:multiaccounts.ui/switch-theme + (get roots/themes new-root-id) + new-root-id]) (reset! state/root-id (or (get-in root [:root :stack :id]) new-root-id)) (navigation/set-root root)))) diff --git a/src/status_im2/navigation/roots.cljs b/src/status_im2/navigation/roots.cljs index 6728a9b3a3..96fe90531c 100644 --- a/src/status_im2/navigation/roots.cljs +++ b/src/status_im2/navigation/roots.cljs @@ -1,5 +1,6 @@ (ns status-im2.navigation.roots - (:require [quo2.foundations.colors :as colors] + (:require [status-im2.constants :as constants] + [quo2.foundations.colors :as colors] [react-native.platform :as platform] [status-im2.navigation.view :as views] [status-im2.navigation.state :as state])) @@ -136,6 +137,16 @@ (status-bar-options) {:topBar (assoc (topbar-options) :visible false)})}}}}) +;; Theme Order for navigation roots +;; 1. Themes hardcoded in below map +;; 2. If nil or no entry in map, then theme stored in +;; [:db :multiaccount :appearance] will be used (for mulitaccounts) +;; 3). Fallback theme - Dark +(def themes + {:intro constants/theme-type-dark + :profiles constants/theme-type-dark + :shell-stack nil}) + (defn roots [] ;;TABS @@ -146,8 +157,8 @@ {:stack {:id :intro :children [{:component {:name :intro :id :intro - :options {:statusBar {:style :light} - :topBar {:visible false}}}}]}}}} + :options (merge (status-bar-options) + {:topBar {:visible false}})}}]}}}} {:shell-stack {:root {:stack {:id :shell-stack