feat: add new theming mechanism (#16191)

* chore: set react-dom to same version as react

package.json

@@ -37,7 +37,7 @@
     "node-libs-react-native": "^1.2.1",
     "qrcode": "^1.4.1",
     "react": "18.0.0",
-    "react-dom": "^16.4.2",
+    "react-dom": "18.0.0",
     "react-native": "0.69.10",
     "react-native-background-timer": "^2.1.1",
     "react-native-blob-util": "^0.13.18",

src/quo2/components/buttons/button.cljs

@@ -204,7 +204,7 @@
          (when disabled
            {:opacity 0.3})))
 
-(defn button
+(defn- button-internal
   "with label
    [button opts \"label\"]
    opts
@@ -223,17 +223,15 @@
   (let [pressed-in (reagent/atom false)]
     (fn
       [{:keys [on-press disabled type size before after above icon-secondary-no-color
-               width customization-color override-theme override-background-color pressed
+               width customization-color theme override-background-color pressed
                on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
         :or   {type                :primary
                size                40
                customization-color :primary}}
        children]
       (let [{:keys [icon-color icon-secondary-color background-color label-color border-color]}
             (get-in (themes customization-color)
-                    [(or
-                      override-theme
-                      (theme/get-theme)) type])
+                    [theme type])
             state (cond disabled                 :disabled
                         (or @pressed-in pressed) :pressed
                         :else                    :default)
@@ -309,3 +307,5 @@
                 :no-color        icon-secondary-no-color
                 :color           icon-secondary-color
                 :size            icon-size}]])]]]))))
+
+(def button (theme/with-theme button-internal))

src/quo2/components/dividers/divider_label.cljs

@@ -1,5 +1,6 @@
 (ns quo2.components.dividers.divider-label
-  (:require [quo2.components.icon :as icons]
+  (:require [quo2.theme :as theme]
+            [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as markdown.text]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]))
@@ -8,15 +9,16 @@
 
 (def chevron-icon-container-height 20)
 
-(defn divider-label
+(defn themed-view
   "label -> string
    chevron-position -> :left, :right
    chevron-icon -> keyword
    on-press -> function
    padding-bottom -> number
    counter-value -> number
    increase-padding-top? -> boolean
-   blur? -> boolean"
+   blur? -> boolean
+   theme -> theme value passed from with-theme HOC"
   [{:keys [label
            chevron-position
            chevron-icon
@@ -25,8 +27,9 @@
            padding-bottom
            blur?
            container-style
-           on-press]}]
-  (let [dark?                       (colors/dark?)
+           on-press
+           theme]}]
+  (let [dark?                       (= :dark theme)
         border-and-counter-bg-color (if dark?
                                       (if blur? colors/white-opa-5 colors/neutral-70)
                                       colors/neutral-10)
@@ -83,3 +86,5 @@
            :weight :medium
            :style  {:color counter-text-color}}
           counter-value]])]]))
+
+(def divider-label (theme/with-theme themed-view))

src/quo2/components/tabs/tab/style.cljs

@@ -1,6 +1,5 @@
 (ns quo2.components.tabs.tab.style
-  (:require [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]))
+  (:require [quo2.foundations.colors :as colors]))
 
 (def tab-background-opacity 0.3)
 
@@ -99,10 +98,10 @@
                       :label            {:style {:color colors/white}}}}})
 
 (defn by-theme
-  [{:keys [override-theme disabled active blur?]}]
+  [{:keys [disabled active blur? theme]}]
   (let [state (cond disabled :disabled
                     active   :active
-                    :else    :default)
-        theme (or override-theme (theme/get-theme))]
+                    :else    :default)]
+
     (get-in (if blur? themes-for-blur-background themes)
             [theme state])))

src/quo2/components/tabs/tab/view.cljs

@@ -1,8 +1,9 @@
 (ns quo2.components.tabs.tab.view
   (:require [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
-            [quo2.components.tabs.tab.style :as style]
             [quo2.components.notifications.notification-dot :as notification-dot]
+            [quo2.components.tabs.tab.style :as style]
+            [quo2.theme :as theme]
             [react-native.core :as rn]
             [react-native.svg :as svg]))
 
@@ -46,7 +47,7 @@
      (vector? children)
      children)])
 
-(defn view
+(defn- themed-view
   [{:keys [accessibility-label
            active
            before
@@ -56,7 +57,7 @@
            disabled
            id
            on-press
-           override-theme
+           theme
            segmented?
            size
            notification-dot?]
@@ -65,11 +66,10 @@
   (let [show-notification-dot? (and notification-dot? (= size 32))
         {:keys [icon-color
                 background-color
-                label]}
-        (style/by-theme {:override-theme override-theme
-                         :blur?          blur?
-                         :disabled       disabled
-                         :active         active})]
+                label]}        (style/by-theme {:theme    theme
+                                                :blur?    blur?
+                                                :disabled disabled
+                                                :active   active})]
     [rn/touchable-without-feedback
      (merge {:disabled            disabled
              :accessibility-label accessibility-label}
@@ -101,3 +101,5 @@
           :height           size
           :disabled         disabled
           :background-color background-color}])]]))
+
+(def view (theme/with-theme themed-view))

src/quo2/components/tabs/tabs.cljs

@@ -65,7 +65,6 @@
            flat-list-ref
            number-of-items
            on-change
-           override-theme
            scroll-on-press?
            size
            style]}
@@ -80,7 +79,6 @@
      :notification-dot?   notification-dot?
      :accessibility-label accessibility-label
      :size                size
-     :override-theme      override-theme
      :blur?               blur?
      :active              (= id @active-tab-id)
      :on-press            (fn [id]
@@ -101,7 +99,6 @@
   - `blur?` Boolean passed down to `quo2.components.tabs.tab/tab`.
   - `data` Vector of tab items.
   - `on-change` Callback called after a tab is selected.
-  - `override-theme` Passed down to `quo2.components.tabs.tab/tab`.
   - `size` 32/24
   - `style` Style map passed to View wrapping tabs or to the FlatList when tabs
     are scrollable.
@@ -132,7 +129,6 @@
                style
                size
                blur?
-               override-theme
                in-scroll-view?]
         :or   {fade-end-percentage fade-end-percentage
                fade-end?           false
@@ -183,7 +179,6 @@
                                                           :flat-list-ref    flat-list-ref
                                                           :number-of-items  (count data)
                                                           :on-change        on-change
-                                                          :override-theme   override-theme
                                                           :scroll-on-press? scroll-on-press?
                                                           :size             size
                                                           :style            style})})]]]
@@ -195,7 +190,6 @@
                           :blur?           blur?
                           :number-of-items (count data)
                           :on-change       on-change
-                          :override-theme  override-theme
                           :size            size
                           :style           style}
                          item

src/quo2/theme.cljs

@@ -1,19 +1,23 @@
 (ns quo2.theme
-  (:require [reagent.core :as reagent]))
+  (:require [react-native.core :as rn]
+            ["react" :as react]
+            [reagent.core :as reagent]
+            utils.transforms))
 
-(def theme (reagent/atom :light))
+(defonce ^:private theme-context (react/createContext :light))
+(defonce ^:private theme-state (reagent/atom :light))
 
 (defn dark?
   []
-  (= :dark @theme))
+  (= :dark @theme-state))
 
 (defn get-theme
   []
-  @theme)
+  @theme-state)
 
 (defn set-theme
   [value]
-  (reset! theme value))
+  (reset! theme-state value))
 
 (defn theme-value
   "Returns a value based on the current/override-theme theme."
@@ -22,3 +26,31 @@
   ([light-value dark-value override-theme]
    (let [theme (or override-theme (get-theme))]
      (if (= theme :light) light-value dark-value))))
+
+(defn provider
+  "Wrap `children` in a React Provider using `quo2.theme/theme-context` as the
+  context.
+
+  `options`: Clojure map. Currently we only use the `:theme` key. In the future
+  we may support other settings.
+  "
+  [options & children]
+  (into [:> (.-Provider theme-context) {:value options}]
+        children))
+
+(defn use-theme
+  "A hook that returns the current theme context."
+  []
+  (utils.transforms/js->clj (rn/use-context theme-context)))
+
+(defn ^:private f-with-theme
+  [component props & args]
+  (let [theme (-> (use-theme) :theme keyword)]
+    (into [component (assoc props :theme theme)] args)))
+
+(defn with-theme
+  "Create a functional component that assoc `:theme` into the first arg of
+  `component`. The theme value is taken from the nearest `quo2.theme/provider`."
+  [component]
+  (fn [& args]
+    (into [:f> f-with-theme component] args)))

src/react_native/core.cljs

@@ -95,6 +95,10 @@
   [ref]
   (oops/oget ref "current"))
 
+(def create-context react/createContext)
+
+(def use-context react/useContext)
+
 (defn use-effect
   ([effect-fn]
    (use-effect effect-fn []))

src/status_im/bottom_sheet/sheets.cljs

@@ -1,5 +1,6 @@
 (ns status-im.bottom-sheet.sheets
   (:require [utils.re-frame :as rf]
+            [quo2.theme :as theme]
             [status-im.ui.screens.about-app.views :as about-app]
             [status-im.ui.screens.keycard.views :as keycard]
             [status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
@@ -28,14 +29,16 @@
           (merge keycard/more-sheet)
 
           (= view :learn-more)
-          (merge about-app/learn-more))]
+          (merge about-app/learn-more))
+        page-theme (:theme options)]
 
     [:f>
      (fn []
        (rn/use-effect (fn []
                         (rn/hw-back-add-listener dismiss-bottom-sheet-callback)
                         (fn []
                           (rn/hw-back-remove-listener dismiss-bottom-sheet-callback))))
-       [bottom-sheet/bottom-sheet opts
-        (when content
-          [content (when options options)])])]))
+       [theme/provider {:theme (or page-theme (theme/get-theme))}
+        [bottom-sheet/bottom-sheet opts
+         (when content
+           [content (when options options)])]])]))

src/status_im2/contexts/activity_center/view.cljs

@@ -83,7 +83,6 @@
      {:size                32
       :scrollable?         true
       :blur?               true
-      :override-theme      :dark
       :style               style/tabs
       :fade-end-percentage 0.79
       :scroll-on-press?    true

src/status_im2/contexts/onboarding/profiles/view.cljs

@@ -120,8 +120,7 @@
         :size                32
         :icon                true
         :on-press            show-new-account-options
-        :accessibility-label :show-new-account-options
-        :override-theme      :dark}
+        :accessibility-label :show-new-account-options}
        :main-icons/add]]
      [rn/flat-list
       {:data                    (sort-by :timestamp > profiles-data)

src/status_im2/contexts/shell/components/shell_screen/view.cljs

@@ -2,6 +2,7 @@
   (:require [utils.i18n :as i18n]
             [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
             [utils.re-frame :as rf]
             [react-native.core :as rn]
             [react-native.blur :as blur]
@@ -98,17 +99,18 @@
         width          (rf/sub [:dimensions/window-width])
         top            (safe-area/get-top)
         shell-margin   (/ (- width (* 2 shell.constants/switcher-card-size)) 3)]
-    [rn/view
-     {:style {:top              0
-              :left             0
-              :right            0
-              :bottom           -1
-              :position         :absolute
-              :background-color colors/neutral-100}}
-     [jump-to-list switcher-cards shell-margin]
-     [top-nav-blur-overlay top]
-     [common.home/top-nav
-      {:type   :shell
-       :avatar {:customization-color customization-color}
-       :style  {:margin-top top
-                :z-index    2}}]]))
+    [theme/provider {:theme :dark}
+     [rn/view
+      {:style {:top              0
+               :left             0
+               :right            0
+               :bottom           -1
+               :position         :absolute
+               :background-color colors/neutral-100}}
+      [jump-to-list switcher-cards shell-margin]
+      [top-nav-blur-overlay top]
+      [common.home/top-nav
+       {:type   :shell
+        :avatar {:customization-color customization-color}
+        :style  {:margin-top top
+                 :z-index    2}}]]]))

src/status_im2/contexts/syncing/setup_syncing/view.cljs

@@ -118,17 +118,16 @@
                :default-shown? true
                :editable       false}]
              [quo/button
-              {:on-press       (fn []
-                                 (clipboard/set-string @code)
-                                 (rf/dispatch [:toasts/upsert
-                                               {:icon       :correct
-                                                :icon-color colors/success-50
-                                                :text       (i18n/label
-                                                             :t/sharing-copied-to-clipboard)}]))
-               :override-theme :dark
-               :type           :grey
-               :style          {:margin-top 12}
-               :before         :i/copy}
+              {:on-press (fn []
+                           (clipboard/set-string @code)
+                           (rf/dispatch [:toasts/upsert
+                                         {:icon       :correct
+                                          :icon-color colors/success-50
+                                          :text       (i18n/label
+                                                       :t/sharing-copied-to-clipboard)}]))
+               :type     :grey
+               :style    {:margin-top 12}
+               :before   :i/copy}
               (i18n/label :t/copy-qr)]])]]
         [rn/view {:style style/sync-code}
          [quo/divider-label