From 0ae1e9bc5a6f2a56027a55adb27ba6a3bd159fd5 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Thu, 21 Sep 2023 00:41:00 +0200 Subject: [PATCH] chore: updating theming in quo2 components and chat (#17199) --- .../animated_header_flatlist/style.cljs | 17 +++--- .../animated_header_flatlist/view.cljs | 25 +++++---- src/quo2/components/header.cljs | 19 ++++--- src/quo2/components/loaders/skeleton.cljs | 20 ++++--- .../loaders/skeleton_list/view.cljs | 11 ++-- .../settings/{ => privacy_option}/style.cljs | 30 +++++------ .../view.cljs} | 47 ++++++++++------- src/quo2/components/wallet/keypair/view.cljs | 2 +- .../wallet/network_bridge/style.cljs | 4 +- .../wallet/network_bridge/view.cljs | 4 +- src/quo2/core.cljs | 4 +- .../ui/components/search_input/view.cljs | 52 ------------------- .../contexts/chat/composer/style.cljs | 27 +++++----- .../contexts/chat/composer/sub_view.cljs | 12 ++--- .../contexts/chat/composer/view.cljs | 24 ++++++--- .../chat/home/contact_request/style.cljs | 4 +- .../chat/home/contact_request/view.cljs | 19 ++++--- src/status_im2/contexts/chat/home/view.cljs | 4 +- .../contexts/chat/messages/content/view.cljs | 16 +++--- .../contexts/chat/messages/list/style.cljs | 13 ++--- .../contexts/chat/messages/list/view.cljs | 52 +++++++++++-------- .../chat/messages/navigation/view.cljs | 4 +- .../components/floating_screens/style.cljs | 4 +- .../components/floating_screens/view.cljs | 36 +++++++------ .../jump_to/components/home_stack/style.cljs | 4 +- .../jump_to/components/home_stack/view.cljs | 8 +-- 26 files changed, 232 insertions(+), 230 deletions(-) rename src/quo2/components/settings/{ => privacy_option}/style.cljs (87%) rename src/quo2/components/settings/{privacy_option.cljs => privacy_option/view.cljs} (61%) diff --git a/src/quo2/components/animated_header_flatlist/style.cljs b/src/quo2/components/animated_header_flatlist/style.cljs index 295ec03177..290528a67c 100644 --- a/src/quo2/components/animated_header_flatlist/style.cljs +++ b/src/quo2/components/animated_header_flatlist/style.cljs @@ -12,18 +12,19 @@ :height view-height}) (defn button-container - [position] + [{:keys [left right theme]}] (merge {:width 32 :height 32 :border-radius 10 :justify-content :center :align-items :center - :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40) + :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme) :position :absolute :top 56 - :z-index 3} - position)) + :z-index 3 + :left left + :right right})) (defn blur-view [animation] @@ -38,7 +39,7 @@ :overflow :hidden})) (defn entity-picture - [animation] + [animation theme] (reanimated/apply-animations-to-style {:width animation :height animation} @@ -49,11 +50,11 @@ :left 20 :justify-content :center :align-items :center - :background-color (colors/theme-colors colors/white colors/neutral-100) + :background-color (colors/theme-colors colors/white colors/neutral-100 theme) :overflow :hidden})) (defn header-bottom-part - [animation] + [animation theme] (reanimated/apply-animations-to-style {:border-top-right-radius animation :border-top-left-radius animation} @@ -62,7 +63,7 @@ :height 86 :left 0 :right 0 - :background-color (colors/theme-colors colors/white colors/neutral-100)})) + :background-color (colors/theme-colors colors/white colors/neutral-100 theme)})) (defn header-comp [y-animation opacity-animation] diff --git a/src/quo2/components/animated_header_flatlist/view.cljs b/src/quo2/components/animated_header_flatlist/view.cljs index 4a82f9d928..645a58e8de 100644 --- a/src/quo2/components/animated_header_flatlist/view.cljs +++ b/src/quo2/components/animated_header_flatlist/view.cljs @@ -9,7 +9,8 @@ [reagent.core :as reagent] [quo2.foundations.colors :as colors] [quo2.components.animated-header-flatlist.style :as style] - [oops.core :as oops])) + [oops.core :as oops] + [quo2.theme :as quo.theme])) (def header-height 234) (def cover-height 192) @@ -30,7 +31,7 @@ (reanimated/set-shared-value scroll-y current-y))) (defn header - [{:keys [theme-color f-display-picture-comp cover-uri title-comp]} top-inset scroll-y] + [{:keys [theme-color f-display-picture-comp cover-uri title-comp theme]} top-inset scroll-y] (let [input-range [0 (* threshold 0.33)] picture-scale-down 0.4 size-animation (interpolate scroll-y input-range [80 (* 80 picture-scale-down)]) @@ -38,21 +39,23 @@ border-animation (interpolate scroll-y input-range [12 0])] [rn/view {:style {:height header-height - :background-color (or theme-color (colors/theme-colors colors/white colors/neutral-95)) + :background-color (or theme-color + (colors/theme-colors colors/white colors/neutral-95 theme)) :margin-top (when platform/ios? (- top-inset))}} (when cover-uri [fast-image/fast-image {:style {:width "100%" :height cover-height} :source {:uri cover-uri}}]) - [reanimated/view {:style (style/header-bottom-part border-animation)} + [reanimated/view {:style (style/header-bottom-part border-animation theme)} [title-comp]] - [reanimated/view {:style (style/entity-picture size-animation)} + [reanimated/view {:style (style/entity-picture size-animation theme)} [:f> f-display-picture-comp image-animation]]])) (defn- f-animated-header-list [{:keys [header-comp main-comp back-button-on-press] :as params}] - (let [window-height (:height (rn/get-window)) + (let [theme (quo.theme/use-theme-value) + window-height (:height (rn/get-window)) {:keys [top bottom]} (safe-area/get-insets) ;; view height calculation is different because window height is different on iOS and Android: view-height (if platform/ios? @@ -69,12 +72,12 @@ [rn/touchable-opacity {:active-opacity 1 :on-press back-button-on-press - :style (style/button-container {:left 20})} - [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]] + :style (style/button-container {:left 20 :theme theme})} + [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]] [rn/touchable-opacity {:active-opacity 1 - :style (style/button-container {:right 20})} - [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]] + :style (style/button-container {:right 20 :theme theme})} + [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]] [reanimated/blur-view {:blurAmount 32 :blurType :light @@ -86,7 +89,7 @@ {:data [nil] :render-fn main-comp :key-fn str - :header (reagent/as-element (header params top scroll-y)) + :header (reagent/as-element (header (assoc params :theme theme) top scroll-y)) ;; TODO: https://github.com/status-im/status-mobile/issues/14924 :scroll-event-throttle 8 :on-scroll (fn [event] (scroll-handler event initial-y scroll-y))}]])) diff --git a/src/quo2/components/header.cljs b/src/quo2/components/header.cljs index 0bf111a210..e78fa45fa0 100644 --- a/src/quo2/components/header.cljs +++ b/src/quo2/components/header.cljs @@ -3,6 +3,7 @@ [quo2.components.buttons.button.view :as button] [quo2.components.markdown.text :as text] [quo2.foundations.colors :as colors] + [quo2.theme :as quo.theme] [react-native.core :as rn] [react-native.reanimated :as reanimated] [reagent.core :as reagent])) @@ -10,11 +11,12 @@ (def header-height 56) (defn header-wrapper-style - [{:keys [height border-bottom background]}] + [{:keys [height border-bottom background theme]}] (merge {:background-color (colors/theme-colors colors/neutral-5 - colors/neutral-95) + colors/neutral-95 + theme) :height height} (when background {:background-color background}) @@ -22,7 +24,8 @@ {:border-bottom-width 1 :border-bottom-color (colors/theme-colors colors/neutral-5 - colors/neutral-95)}))) + colors/neutral-95 + theme)}))) (def absolute-fill {:position :absolute @@ -129,7 +132,7 @@ :size :large} title])]) -(defn header +(defn- header-internal [{:keys [left-width right-width]}] (let [layout (reagent/atom {:left {:width (or left-width 8) :height header-height} @@ -153,7 +156,7 @@ [{:keys [left-accessories left-component border-bottom right-accessories right-component insets get-layout title subtitle title-component style title-align - background] + background theme] :or {title-align :center border-bottom false}}] (let [status-bar-height (get insets :top 0) @@ -161,7 +164,8 @@ [reanimated/view {:style (header-wrapper-style {:height height :background background - :border-bottom border-bottom})} + :border-bottom border-bottom + :theme theme})} [rn/view {:pointer-events :box-none :height status-bar-height}] @@ -192,7 +196,6 @@ :subtitle subtitle :title-align title-align :component title-component}]] - [rn/view {:style right-style :on-layout (handle-layout :right get-layout) @@ -200,3 +203,5 @@ [header-actions {:accessories right-accessories :component right-component}]]]]]])))) + +(def header (quo.theme/with-theme header-internal)) diff --git a/src/quo2/components/loaders/skeleton.cljs b/src/quo2/components/loaders/skeleton.cljs index e0a0cb75b5..5ef8ebb503 100644 --- a/src/quo2/components/loaders/skeleton.cljs +++ b/src/quo2/components/loaders/skeleton.cljs @@ -3,7 +3,8 @@ [react-native.core :as rn] [react-native.masked-view :as masked-view] [react-native.reanimated :as reanimated] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [quo2.theme :as quo.theme])) (def message-skeleton-height 54) @@ -22,10 +23,10 @@ ;; Standlone message skeleton (defn- f-message-skeleton {:deprecated "quo2.components.loaders.skeleton-list.view should be used instead"} - [] + [{:keys [theme]}] - (let [color (colors/theme-colors colors/neutral-5 colors/neutral-70) - loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60) + (let [color (colors/theme-colors colors/neutral-5 colors/neutral-70 theme) + loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60 theme) content-width (rand-nth message-content-width) author-width (content-width :author) message-width (content-width :message) @@ -76,14 +77,17 @@ :end {:x 1 :y 0} :style animated-gradient-style}]]])) -(defn skeleton - [parent-height] +(defn- view-internal + [{:keys [parent-height theme]}] (let [number-of-skeletons (int (Math/floor (/ parent-height message-skeleton-height)))] [rn/view {:style {:background-color (colors/theme-colors colors/white - colors/neutral-90) + colors/neutral-90 + theme) :flex 1}} (doall (for [n (range number-of-skeletons)] - [:f> f-message-skeleton {:key n}]))])) + [:f> f-message-skeleton {:key n :theme theme}]))])) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/loaders/skeleton_list/view.cljs b/src/quo2/components/loaders/skeleton_list/view.cljs index e64f3c77cf..eddae21d13 100644 --- a/src/quo2/components/loaders/skeleton_list/view.cljs +++ b/src/quo2/components/loaders/skeleton_list/view.cljs @@ -34,8 +34,8 @@ :color color})}])]]) (defn- f-animated-skeleton-view - [{:keys [style color skeleton-height animated? translate-x window-width] :as data}] - (let [loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60)] + [{:keys [style color skeleton-height animated? translate-x window-width theme] :as data}] + (let [loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60 theme)] (rn/use-effect (fn [] @@ -73,10 +73,9 @@ :height "100%"}) skeleton-height (get-in constants/layout-dimensions [content :height]) number-of-skeletons (int (Math/ceil (/ parent-height skeleton-height))) - color (cond - (and blur? (= theme :dark)) colors/white-opa-5 - (= theme :dark) colors/neutral-90 - :else colors/neutral-5) + color (if (and blur? (= theme :dark)) + colors/white-opa-5 + (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)) component (if animated? animated-skeleton-view static-skeleton-view)] [rn/view {:style {:padding 8} diff --git a/src/quo2/components/settings/style.cljs b/src/quo2/components/settings/privacy_option/style.cljs similarity index 87% rename from src/quo2/components/settings/style.cljs rename to src/quo2/components/settings/privacy_option/style.cljs index 82323432b7..2cdf511454 100644 --- a/src/quo2/components/settings/style.cljs +++ b/src/quo2/components/settings/privacy_option/style.cljs @@ -1,4 +1,4 @@ -(ns quo2.components.settings.style +(ns quo2.components.settings.privacy-option.style (:require [quo2.foundations.colors :as colors])) (def bullet-container @@ -8,8 +8,8 @@ :align-self :flex-start}) (defn bullet - [] - {:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50) + [theme] + {:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) :border-radius 100 :width 8 :height 8 @@ -28,23 +28,23 @@ :padding-horizontal 12}) (defn selection-indicator-container - [active?] + [active? theme] {:height 20 :width 20 :border-radius 20 :border-width 1 :border-color (if active? - (colors/theme-colors colors/primary-50 colors/primary-60) - (colors/theme-colors colors/neutral-20 colors/neutral-80))}) + (colors/theme-colors colors/primary-50 colors/primary-60 theme) + (colors/theme-colors colors/neutral-20 colors/neutral-80 theme))}) (defn selection-indicator - [active?] + [active? theme] {:margin-left :auto :height 14 :width 14 :background-color (if active? - (colors/theme-colors colors/primary-50 colors/primary-60) - (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)) + (colors/theme-colors colors/primary-50 colors/primary-60 theme) + (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)) :border-radius 20 :margin-right :auto :margin-top :auto @@ -60,7 +60,7 @@ :align-self :center}) (defn card-footer - [] + [theme] {:flex 1 :flex-direction :row :justify-content :space-between @@ -70,8 +70,8 @@ :padding-vertical 12 :border-radius 12 :border-width 1 - :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90) - :border-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}) + :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme) + :border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)}) (def card-header-container {:flex-direction :row @@ -85,9 +85,9 @@ :margin-left 4}) (defn privacy-option-card - [active?] + [active? theme] {:border-radius 16 :border-width 1 :border-color (if active? - (colors/theme-colors colors/primary-50 colors/primary-60) - (colors/theme-colors colors/neutral-10 colors/neutral-80))}) + (colors/theme-colors colors/primary-50 colors/primary-60 theme) + (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}) diff --git a/src/quo2/components/settings/privacy_option.cljs b/src/quo2/components/settings/privacy_option/view.cljs similarity index 61% rename from src/quo2/components/settings/privacy_option.cljs rename to src/quo2/components/settings/privacy_option/view.cljs index dbbcf6c0a8..f42b594ef2 100644 --- a/src/quo2/components/settings/privacy_option.cljs +++ b/src/quo2/components/settings/privacy_option/view.cljs @@ -1,29 +1,30 @@ -(ns quo2.components.settings.privacy-option +(ns quo2.components.settings.privacy-option.view (:require [quo2.components.icon :as icons] [quo2.components.markdown.text :as text] [quo2.components.selectors.selectors.view :as selectors] - [quo2.components.settings.style :as style] + [quo2.components.settings.privacy-option.style :as style] [quo2.foundations.colors :as colors] - [react-native.core :as rn])) + [react-native.core :as rn] + [quo2.theme :as quo.theme])) (defn- bullet - [] + [theme] [rn/view {:style style/bullet-container} - [rn/view {:style (style/bullet)}]]) + [rn/view {:style (style/bullet theme)}]]) (defn- unordered-list - [container-style list-items] + [{:keys [container-style theme]} list-items] [rn/view {:style (merge style/list-container container-style)} (for [item list-items] ^{:key (hash item)} [rn/view {:style style/list-item} - [bullet] + [bullet theme] [text/text {:size :paragraph-2} item]])]) (defn- card-footer - [{:keys [active? label on-toggle]}] + [{:keys [active? label on-toggle theme]}] [rn/touchable-without-feedback - [rn/view {:style (style/card-footer)} + [rn/view {:style (style/card-footer theme)} [rn/view {:style style/card-footer-label-container} [text/text {:size :paragraph-2} label]] [rn/view {:style style/card-footer-toggle-container} @@ -32,36 +33,42 @@ :on-change on-toggle}]]]]) (defn- selection-indicator - [active?] - [rn/view {:style (style/selection-indicator-container active?)} - [rn/view {:style (style/selection-indicator active?)}]]) + [active? theme] + [rn/view {:style (style/selection-indicator-container active? theme)} + [rn/view {:style (style/selection-indicator active? theme)}]]) (defn- card-header - [{:keys [icon label active?]}] + [{:keys [icon label active? theme]}] [rn/view {:style style/card-header-container} [icons/icon icon {:size 20 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}] + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}] [rn/view {:style style/card-header-label-container} [text/text {:weight :semi-bold} label]] [selection-indicator active?]]) -(defn card - [{:keys [active? header footer list-items icon on-select on-toggle] +(defn- view-internal + [{:keys [active? header footer list-items icon on-select on-toggle theme] :or {icon :i/world active? false}}] [rn/touchable-without-feedback {:on-press on-select :accessibility-label :privacy-option-card :testID :privacy-option-card} - [rn/view (style/privacy-option-card active?) + [rn/view (style/privacy-option-card active? theme) [card-header - {:active? active? + {:theme theme + :active? active? :icon icon :label header}] - [unordered-list (when-not footer {:margin-bottom 8}) list-items] + [unordered-list + {:theme theme + :container-style (when-not footer {:margin-bottom 8})} list-items] (when footer [card-footer - {:active? active? + {:theme theme + :active? active? :label footer :on-toggle on-toggle}])]]) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/wallet/keypair/view.cljs b/src/quo2/components/wallet/keypair/view.cljs index 9f876175c8..b62d0f0aed 100644 --- a/src/quo2/components/wallet/keypair/view.cljs +++ b/src/quo2/components/wallet/keypair/view.cljs @@ -67,7 +67,7 @@ [rn/view {:style {:margin-left 4}} [icon/icon :i/keycard-card {:size 16 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]])]) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]])]) (defn- view-internal [] diff --git a/src/quo2/components/wallet/network_bridge/style.cljs b/src/quo2/components/wallet/network_bridge/style.cljs index 7d21d21c27..8eebeaa3ea 100644 --- a/src/quo2/components/wallet/network_bridge/style.cljs +++ b/src/quo2/components/wallet/network_bridge/style.cljs @@ -13,9 +13,9 @@ :opacity (when (= state :disabled) 0.3)}) (defn add-container - [] + [theme] {:border-style :dashed - :border-color (colors/theme-colors colors/neutral-30 colors/neutral-70) + :border-color (colors/theme-colors colors/neutral-30 colors/neutral-70 theme) :justify-content :center :align-items :center :padding-vertical 0 diff --git a/src/quo2/components/wallet/network_bridge/view.cljs b/src/quo2/components/wallet/network_bridge/view.cljs index f3bd67333a..a1412c62a5 100644 --- a/src/quo2/components/wallet/network_bridge/view.cljs +++ b/src/quo2/components/wallet/network_bridge/view.cljs @@ -11,8 +11,8 @@ (defn network-bridge-add - [{:keys [network state]}] - [rn/view {:style (merge (style/container network state) (style/add-container))} + [{:keys [network state theme]}] + [rn/view {:style (merge (style/container network state) (style/add-container theme))} [icon/icon :i/add-circle {:size 12 :no-color true}]]) (defn view-internal diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index a8842a2353..fe561af2a1 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -100,7 +100,7 @@ quo2.components.selectors.selectors.view quo2.components.settings.accounts.view quo2.components.settings.data-item.view - quo2.components.settings.privacy-option + quo2.components.settings.privacy-option.view quo2.components.settings.reorder-item.view quo2.components.settings.settings-item.view quo2.components.settings.category.view @@ -306,7 +306,7 @@ (def checkbox quo2.components.selectors.selectors.view/checkbox) ;;;; Settings -(def privacy-option quo2.components.settings.privacy-option/card) +(def privacy-option quo2.components.settings.privacy-option.view/view) (def account quo2.components.settings.accounts.view/account) (def settings-item quo2.components.settings.settings-item.view/view) (def reorder-item quo2.components.settings.reorder-item.view/reorder-item) diff --git a/src/status_im/ui/components/search_input/view.cljs b/src/status_im/ui/components/search_input/view.cljs index 65a9e78e9a..52f38e104d 100644 --- a/src/status_im/ui/components/search_input/view.cljs +++ b/src/status_im/ui/components/search_input/view.cljs @@ -1,61 +1,9 @@ (ns status-im.ui.components.search-input.view (:require [quo.core :as quo] [quo.design-system.colors :as colors] - [quo2.foundations.colors :as quo2.colors] [reagent.core :as reagent] [utils.i18n :as i18n])) -(defn search-input - [{:keys [search-active?]}] - (let [input-ref (atom nil) - search-active? (or search-active? (reagent/atom nil))] - (fn [{:keys [on-focus on-change on-blur on-cancel search-filter auto-focus]}] - [quo/text-input - {:placeholder (i18n/label :t/search) - :accessibility-label :search-input - :blur-on-submit true - :multiline false - :get-ref #(reset! input-ref %) - :default-value search-filter - :auto-focus auto-focus - :on-cancel on-cancel - :show-cancel true - :auto-correct false - :auto-capitalize :none - :container-style {:border-radius 10 - :border-width 1 - :border-color (:ui-01 @colors/theme) - :background-color (quo2.colors/theme-colors quo2.colors/white - quo2.colors/neutral-90) - :overflow :hidden} - :input-style {:height 32 - :padding-top 2 - :padding-bottom 2 - :background-color (quo2.colors/theme-colors quo2.colors/white - quo2.colors/neutral-90)} - :before {:icon :main-icons/search2 - :style {:padding-horizontal 8 - :background-color (quo2.colors/theme-colors - quo2.colors/white - quo2.colors/neutral-90)} - :on-press #(some-> ^js @input-ref - (.focus)) - :icon-opts {:color (quo2.colors/theme-colors quo2.colors/neutral-50 - quo2.colors/white)}} - :on-focus #(do - (when on-focus - (on-focus search-filter)) - (reset! search-active? true)) - :on-blur #(do - (when on-blur - (on-blur)) - (reset! search-active? false)) - :on-change (fn [e] - (let [^js native-event (.-nativeEvent ^js e) - text (.-text native-event)] - (when on-change - (on-change text))))}]))) - (defn search-input-old [{:keys [search-active?]}] (let [input-ref (atom nil) diff --git a/src/status_im2/contexts/chat/composer/style.cljs b/src/status_im2/contexts/chat/composer/style.cljs index 2d5956e780..4e36e25811 100644 --- a/src/status_im2/contexts/chat/composer/style.cljs +++ b/src/status_im2/contexts/chat/composer/style.cljs @@ -3,15 +3,16 @@ [quo2.foundations.typography :as typography] [react-native.platform :as platform] [react-native.reanimated :as reanimated] - [status-im2.contexts.chat.composer.constants :as constants])) + [status-im2.contexts.chat.composer.constants :as constants] + [quo2.theme :as quo.theme])) (defn shadow - [focused?] + [focused? theme] (if platform/ios? {:shadow-radius 20 - :shadow-opacity (colors/theme-colors 0.1 0.7) + :shadow-opacity (colors/theme-colors 0.1 0.7 theme) :shadow-color colors/neutral-100 - :shadow-offset {:width 0 :height (colors/theme-colors -4 -8)}} + :shadow-offset {:width 0 :height (colors/theme-colors -4 -8 theme)}} {:elevation (if @focused? 10 0)})) (def composer-sheet-and-jump-to-container @@ -21,17 +22,17 @@ :right 0}) (defn sheet-container - [insets {:keys [focused?]} {:keys [container-opacity]}] + [insets {:keys [focused?]} {:keys [container-opacity]} theme] (reanimated/apply-animations-to-style {:opacity container-opacity} (merge {:border-top-left-radius 20 :border-top-right-radius 20 :padding-horizontal 20 - :background-color (colors/theme-colors colors/white colors/neutral-95) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme) :z-index 3 :padding-bottom (:bottom insets)} - (shadow focused?)))) + (shadow focused? theme)))) (def bar-container {:height constants/bar-container-height @@ -43,11 +44,11 @@ :align-items :center}) (defn bar - [] + [theme] {:width 32 :height 4 :border-radius 100 - :background-color (colors/theme-colors colors/neutral-100-opa-5 colors/white-opa-10)}) + :background-color (colors/theme-colors colors/neutral-100-opa-5 colors/white-opa-10 theme)}) (defn input-container [height max-height] @@ -67,9 +68,9 @@ [{:keys [saved-emoji-kb-extra-height]} {:keys [focused? maximized?]} {:keys [link-previews? images]} - max-height] + {:keys [max-height theme]}] (merge typography/paragraph-1 - {:color (colors/theme-colors :black :white) + {:color (colors/theme-colors :black :white theme) :text-align-vertical :top :position (if @saved-emoji-kb-extra-height :relative :absolute) :top 0 @@ -105,10 +106,10 @@ :overflow :hidden})) (defn blur-view - [] + [theme] {:style {:flex 1} :blur-radius (if platform/ios? 20 10) - :blur-type (colors/theme-colors :light :dark) + :blur-type (quo.theme/theme-value :light :dark theme) :blur-amount 20}) (defn shell-button diff --git a/src/status_im2/contexts/chat/composer/sub_view.cljs b/src/status_im2/contexts/chat/composer/sub_view.cljs index 7ee5a6d7b3..8230ca3d17 100644 --- a/src/status_im2/contexts/chat/composer/sub_view.cljs +++ b/src/status_im2/contexts/chat/composer/sub_view.cljs @@ -10,18 +10,18 @@ [utils.re-frame :as rf])) (defn bar - [] + [theme] [rn/view {:style style/bar-container} - [rn/view {:style (style/bar)}]]) + [rn/view {:style (style/bar theme)}]]) (defn f-blur-view - [layout-height focused?] + [{:keys [layout-height focused? theme]}] [reanimated/view {:style (style/blur-container layout-height focused?)} - [blur/view (style/blur-view)]]) + [blur/view (style/blur-view theme)]]) (defn blur-view - [layout-height focused?] - [:f> f-blur-view layout-height focused?]) + [props] + [:f> f-blur-view props]) (defn- f-shell-button [{:keys [focused?]} scroll-to-bottom-fn show-floating-scroll-down-button?] diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs index 2d31a0d43f..c1bb60e7e9 100644 --- a/src/status_im2/contexts/chat/composer/view.cljs +++ b/src/status_im2/contexts/chat/composer/view.cljs @@ -23,7 +23,7 @@ [status-im2.contexts.chat.composer.handlers :as handler] [status-im2.contexts.chat.composer.gradients.view :as gradients] [status-im2.contexts.chat.composer.selection :as selection] - [quo2.theme :as theme])) + [quo2.theme :as quo.theme])) (defn sheet-component [{:keys [insets @@ -32,7 +32,8 @@ window-height blur-height opacity - background-y]} props state] + background-y + theme]} props state] (let [{:keys [chat-screen-loaded?] :as subscriptions} (utils/init-subs) content-height (reagent/atom (or (:input-content-height @@ -87,7 +88,7 @@ {:gesture (drag-gesture/drag-gesture props state animations subscriptions dimensions keyboard-shown)} [reanimated/view - {:style (style/sheet-container insets state animations) + {:style (style/sheet-container insets state animations theme) :on-layout #(handler/layout % state blur-height)} [sub-view/bar] (when chat-screen-loaded? @@ -119,13 +120,17 @@ :on-change-text #(handler/change-text % props state) :on-selection-change #(handler/selection-change % props state) :on-selection #(selection/on-selection % props state) - :keyboard-appearance (theme/theme-value :light :dark) + :keyboard-appearance (quo.theme/theme-value :light :dark) :max-height max-height :max-font-size-multiplier 1 :multiline true :placeholder (i18n/label :t/type-something) :placeholder-text-color (colors/theme-colors colors/neutral-30 colors/neutral-50) - :style (style/input-text props state subscriptions max-height) + :style (style/input-text props + state + subscriptions + {:max-height max-height + :theme theme}) :max-length constants/max-text-size :accessibility-label :chat-message-input}]] (when chat-screen-loaded? @@ -139,6 +144,7 @@ (defn composer [{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?]}] (let [window-height (:height (rn/get-window)) + theme (quo.theme/use-theme-value) opacity (reanimated/use-shared-value 0) background-y (reanimated/use-shared-value (- window-height)) blur-height (reanimated/use-shared-value (+ constants/composer-default-height @@ -149,10 +155,14 @@ :show-floating-scroll-down-button? show-floating-scroll-down-button? :blur-height blur-height :opacity opacity - :background-y background-y} + :background-y background-y + :theme theme} props (utils/init-props) state (utils/init-state)] [rn/view (when platform/ios? {:style {:z-index 1}}) [reanimated/view {:style (style/background opacity background-y window-height)}] - [sub-view/blur-view blur-height (:focused? state)] + [sub-view/blur-view + {:layout-height blur-height + :focused? (:focused? state) + :theme theme}] [:f> sheet-component extra-params props state]])) diff --git a/src/status_im2/contexts/chat/home/contact_request/style.cljs b/src/status_im2/contexts/chat/home/contact_request/style.cljs index 695cd86bae..493a84d4d8 100644 --- a/src/status_im2/contexts/chat/home/contact_request/style.cljs +++ b/src/status_im2/contexts/chat/home/contact_request/style.cljs @@ -9,11 +9,11 @@ :align-items :center}) (defn contact-requests-icon - [] + [theme] {:justify-content :center :align-items :center :width 32 :height 32 :border-radius 16 :border-width 1 - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80)}) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)}) diff --git a/src/status_im2/contexts/chat/home/contact_request/view.cljs b/src/status_im2/contexts/chat/home/contact_request/view.cljs index 5552a8ed3a..956ac9a2f2 100644 --- a/src/status_im2/contexts/chat/home/contact_request/view.cljs +++ b/src/status_im2/contexts/chat/home/contact_request/view.cljs @@ -6,7 +6,8 @@ [react-native.core :as rn] [status-im2.contexts.shell.activity-center.notification-types :as notification-types] [status-im2.contexts.chat.home.contact-request.style :as style] - [utils.re-frame :as rf])) + [utils.re-frame :as rf] + [quo2.theme :as quo.theme])) (defn get-display-name [{:keys [chat-id message]}] @@ -32,8 +33,8 @@ " " (- (count requests) 2) " " (i18n/label :t/more)))) -(defn contact-requests - [requests] +(defn- view-internal + [{:keys [theme requests]}] (let [customization-color (rf/sub [:profile/customization-color])] [rn/touchable-opacity {:active-opacity 1 @@ -43,20 +44,22 @@ {:filter-status :unread :filter-type notification-types/contact-request}])) :style style/contact-requests} - [rn/view {:style (style/contact-requests-icon)} - [quo/icon :i/pending-user {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]] + [rn/view {:style (style/contact-requests-icon theme)} + [quo/icon :i/pending-user + {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]] [rn/view {:style {:margin-left 8 :flex 1}} [quo/text {:size :paragraph-1 - :weight :semi-bold - :style {:color (colors/theme-colors colors/neutral-100 colors/white)}} + :weight :semi-bold} (i18n/label :t/pending-requests)] [quo/text {:size :paragraph-2 - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} (requests-summary requests)]] [quo/counter {:container-style {:margin-right 2} :customization-color customization-color :accessibility-label :pending-contact-requests-count} (count requests)]])) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/chat/home/view.cljs b/src/status_im2/contexts/chat/home/view.cljs index 5066752655..d6abf0188d 100644 --- a/src/status_im2/contexts/chat/home/view.cljs +++ b/src/status_im2/contexts/chat/home/view.cljs @@ -97,8 +97,8 @@ :header [:<> [common.header-spacing/view] (when (seq pending-contact-requests) - [contact-request/contact-requests - pending-contact-requests])] + [contact-request/view + {:requests pending-contact-requests}])] :sections items :sticky-section-headers-enabled false :render-section-header-fn contact-list/contacts-section-header diff --git a/src/status_im2/contexts/chat/messages/content/view.cljs b/src/status_im2/contexts/chat/messages/content/view.cljs index 7e6d89aa19..44402235cf 100644 --- a/src/status_im2/contexts/chat/messages/content/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/view.cljs @@ -25,7 +25,8 @@ [utils.datetime :as datetime] [reagent.core :as reagent] [utils.address :as address] - [react-native.gesture :as gesture])) + [react-native.gesture :as gesture] + [quo2.theme :as quo.theme])) (def delivery-state-showing-time-ms 3000) @@ -107,10 +108,10 @@ (declare on-long-press) -(defn user-message-content +(defn- user-message-content-internal [] (let [show-delivery-state? (reagent/atom false)] - (fn [{:keys [message-data context keyboard-shown? show-reactions? show-user-info?]}] + (fn [{:keys [message-data context keyboard-shown? show-reactions? show-user-info? theme]}] (let [{:keys [content-type quoted-message content outgoing outgoing-status pinned-by]} message-data first-image (first (:album message-data)) @@ -133,7 +134,7 @@ {:accessibility-label (if (and outgoing (= outgoing-status :sending)) :message-sending :message-sent) - :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90) + :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme) :style (style/user-message-content {:first-in-group? (:first-in-group? message-data) :outgoing outgoing @@ -194,12 +195,15 @@ (when show-reactions? [reactions/message-reactions-row message-data [rn/view {:pointer-events :none} - [user-message-content - {:message-data message-data + [user-message-content-internal + {:theme theme + :message-data message-data :context context :keyboard-shown? keyboard-shown? :show-reactions? false}]]])]])))) +(def user-message-content (quo.theme/with-theme user-message-content-internal)) + (defn on-long-press [message-data context keyboard-shown?] (rf/dispatch [:dismiss-keyboard]) diff --git a/src/status_im2/contexts/chat/messages/list/style.cljs b/src/status_im2/contexts/chat/messages/list/style.cljs index 60e196f520..bc6f41629e 100644 --- a/src/status_im2/contexts/chat/messages/list/style.cljs +++ b/src/status_im2/contexts/chat/messages/list/style.cljs @@ -18,29 +18,30 @@ {:padding-vertical 16}) (defn header-container - [show?] + [show? theme] {:display (if show? :flex :none) - :background-color (colors/theme-colors colors/white colors/neutral-100) + :background-color (colors/theme-colors colors/white colors/neutral-100 theme) :top (- overscroll-cover-height) :margin-bottom (- overscroll-cover-height)}) (defn header-cover - [cover-bg-color] + [cover-bg-color theme] {:flex 1 :height (+ overscroll-cover-height cover-height) :background-color (colors/theme-colors (colors/custom-color cover-bg-color 50 20) - (colors/custom-color cover-bg-color 50 40))}) + (colors/custom-color cover-bg-color 50 40) + theme)}) (defn header-bottom-part - [animation] + [animation theme] (reanimated/apply-animations-to-style {:border-top-right-radius animation :border-top-left-radius animation} {:top -16 :margin-bottom -16 :padding-bottom 24 - :background-color (colors/theme-colors colors/white colors/neutral-95)})) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)})) (def header-avatar {:top header-avatar-top-offset diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index 4860deb066..19ed3dada8 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/src/status_im2/contexts/chat/messages/list/view.cljs @@ -19,7 +19,8 @@ [status-im2.contexts.chat.messages.navigation.style :as navigation.style] [status-im2.contexts.shell.jump-to.constants :as jump-to.constants] [utils.i18n :as i18n] - [utils.re-frame :as rf])) + [utils.re-frame :as rf] + [quo2.theme :as quo.theme])) (defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75) (defonce ^:const loading-indicator-extra-spacing 250) @@ -83,8 +84,8 @@ on-loaded]) (if platform/low-device? 700 100))))) -(defn contact-icon - [{:keys [ens-verified added?]}] +(defn- contact-icon + [{:keys [ens-verified added?]} theme] (when (or ens-verified added?) [rn/view {:style {:padding-left 10 @@ -93,18 +94,21 @@ [quo/icon :i/verified {:no-color true :size 20 - :color (colors/theme-colors colors/success-50 colors/success-60)}] + :color (colors/theme-colors + (colors/custom-color :success 50) + (colors/custom-color :success 60) + theme)}] (when added? [quo/icon :i/contact {:no-color true :size 20 - :color (colors/theme-colors colors/primary-50 colors/primary-60)}]))])) + :color (colors/theme-colors colors/primary-50 colors/primary-60 theme)}]))])) (def header-extrapolation-option {:extrapolateLeft "clamp" :extrapolateRight "clamp"}) -(defn skeleton-list-props +(defn- skeleton-list-props [content parent-height animated?] {:content content :parent-height parent-height @@ -128,9 +132,9 @@ [quo/skeleton-list (skeleton-list-props :messages parent-height true)]]))) (defn list-header - [insets able-to-send-message?] + [insets able-to-send-message? theme] [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-95) + {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) :height (+ (if able-to-send-message? (+ composer.constants/composer-default-height jump-to.constants/floating-shell-button-height @@ -190,7 +194,7 @@ chat-id]))}]}])) (defn f-list-footer - [{:keys [chat scroll-y cover-bg-color on-layout]}] + [{:keys [chat scroll-y cover-bg-color on-layout theme]}] (let [{:keys [chat-id chat-name emoji chat-type group-chat]} chat all-loaded? (rf/sub [:chats/all-loaded? chat-id]) @@ -211,10 +215,10 @@ header-extrapolation-option)] [rn/view (add-inverted-y-android {:flex 1}) [rn/view - {:style (style/header-container all-loaded?) + {:style (style/header-container all-loaded? theme) :on-layout on-layout} - [rn/view {:style (style/header-cover cover-bg-color)}] - [reanimated/view {:style (style/header-bottom-part border-animation)} + [rn/view {:style (style/header-cover cover-bg-color theme)}] + [reanimated/view {:style (style/header-bottom-part border-animation theme)} [rn/view {:style style/header-avatar} [rn/view {:style {:align-items :flex-start}} (when-not group-chat @@ -229,7 +233,7 @@ :style {:margin-top (if group-chat 54 12)} :number-of-lines 1} display-name - [contact-icon contact]] + [contact-icon contact theme]] (when bio [quo/text {:style style/bio} bio]) @@ -251,11 +255,12 @@ (reset! messages-view-header-height (+ height y)))) (defn render-fn - [{:keys [type value content-type] :as message-data} _ _ + [{:keys [type value content-type theme] :as message-data} _ _ {:keys [context keyboard-shown?]}] (when (not= content-type constants/content-type-contact-request) [rn/view - (add-inverted-y-android {:background-color (colors/theme-colors colors/white colors/neutral-95)}) + (add-inverted-y-android + {:background-color (colors/theme-colors colors/white colors/neutral-95 theme)}) (cond (= type :datemark) [quo/divider-date value] @@ -275,7 +280,8 @@ (defn f-messages-list-content [{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown?]}] - (let [{window-height :height} (rn/get-window) + (let [theme (quo.theme/use-theme-value) + {window-height :height} (rn/get-window) {:keys [keyboard-height]} (hooks/use-keyboard) context (rf/sub [:chats/current-chat-message-list-view-context]) messages (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)]) @@ -286,16 +292,18 @@ {:key-fn list-key-fn :ref list-ref :header [:<> - [list-header insets (:able-to-send-message? context)] + [list-header insets (:able-to-send-message? context) theme] (when (= (:chat-type chat) constants/private-group-chat-type) [list-group-chat-header chat])] :footer [list-footer - {:chat chat + {:theme theme + :chat chat :scroll-y scroll-y :cover-bg-color cover-bg-color :on-layout footer-on-layout}] :data messages - :render-data {:context context + :render-data {:theme theme + :context context :keyboard-shown? keyboard-shown? :insets insets} :render-fn render-fn @@ -341,10 +349,12 @@ 20) (colors/custom-color cover-bg-color 50 - 40)) + 40) + theme) (colors/theme-colors colors/white - colors/neutral-95))}) + colors/neutral-95 + theme))}) ;;TODO(rasom) https://github.com/facebook/react-native/issues/30034 :inverted (when platform/ios? true) :on-layout (fn [e] diff --git a/src/status_im2/contexts/chat/messages/navigation/view.cljs b/src/status_im2/contexts/chat/messages/navigation/view.cljs index 13c2cfda30..8195ce6e20 100644 --- a/src/status_im2/contexts/chat/messages/navigation/view.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/view.cljs @@ -1,7 +1,7 @@ (ns status-im2.contexts.chat.messages.navigation.view (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] - [quo2.theme :as theme] + [quo2.theme :as quo.theme] [re-frame.db] [react-native.blur :as blur] [react-native.core :as rn] @@ -108,4 +108,4 @@ [params] [:f> f-view params]) -(def navigation-view (theme/with-theme internal-navigation-view)) +(def navigation-view (quo.theme/with-theme internal-navigation-view)) diff --git a/src/status_im2/contexts/shell/jump_to/components/floating_screens/style.cljs b/src/status_im2/contexts/shell/jump_to/components/floating_screens/style.cljs index 232c75bf0e..c1bc3dd243 100644 --- a/src/status_im2/contexts/shell/jump_to/components/floating_screens/style.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/floating_screens/style.cljs @@ -5,7 +5,7 @@ (defn screen [{:keys [screen-left screen-top screen-width screen-height screen-border-radius screen-z-index]} - screen-id] + {:keys [screen-id theme]}] (reanimated/apply-animations-to-style {:left screen-left :top screen-top @@ -13,7 +13,7 @@ :height screen-height :border-radius screen-border-radius :z-index screen-z-index} - {:background-color (colors/theme-colors colors/white colors/neutral-95) + {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) :overflow :hidden ;; KeyboardAvoidingView which is used for chat screen composer, ;; not working when we use :absolute layout. One fix is to add diff --git a/src/status_im2/contexts/shell/jump_to/components/floating_screens/view.cljs b/src/status_im2/contexts/shell/jump_to/components/floating_screens/view.cljs index 649d77ead3..da9e71efb3 100644 --- a/src/status_im2/contexts/shell/jump_to/components/floating_screens/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/floating_screens/view.cljs @@ -8,27 +8,31 @@ [status-im2.contexts.shell.jump-to.animation :as animation] [status-im2.contexts.shell.jump-to.constants :as shell.constants] [status-im2.contexts.communities.overview.view :as communities.overview] - [status-im2.contexts.shell.jump-to.components.floating-screens.style :as style])) + [status-im2.contexts.shell.jump-to.components.floating-screens.style :as style] + [quo2.theme :as quo.theme])) (def screens-map {shell.constants/community-screen communities.overview/overview shell.constants/chat-screen chat/chat}) (defn f-screen - [screen-id {:keys [id animation clock] :as screen-param}] - ;; First render screen, then animate (smoother animation) - (rn/use-effect - (fn [] - (animation/animate-floating-screen screen-id screen-param)) - [animation id clock]) - [reanimated/view - {:style (style/screen (get @state/shared-values-atom screen-id) screen-id)} - [rn/view - {:style (style/screen-container (utils/dimensions)) - :accessibility-label (str screen-id "-floating-screen") - :accessible true - :key id} - [(get screens-map screen-id) id]]]) + [{:keys [screen-id id animation clock] :as screen-param}] + (let [theme (quo.theme/use-theme-value)] + ;; First render screen, then animate (smoother animation) + (rn/use-effect + (fn [] + (animation/animate-floating-screen screen-id screen-param)) + [animation id clock]) + [reanimated/view + {:style (style/screen (get @state/shared-values-atom screen-id) + {:theme theme + :screen-id screen-id})} + [rn/view + {:style (style/screen-container (utils/dimensions)) + :accessibility-label (str screen-id "-floating-screen") + :accessible true + :key id} + [(get screens-map screen-id) id]]])) ;; Currently chat screen and events both depends on current-chat-id, once we remove ;; use of current-chat-id from view then we can keep last chat loaded, for fast navigation @@ -36,7 +40,7 @@ [screen-id] (let [screen-param (rf/sub [:shell/floating-screen screen-id])] (when screen-param - [:f> f-screen screen-id screen-param]))) + [:f> f-screen (assoc screen-param :screen-id screen-id)]))) (defn view [] diff --git a/src/status_im2/contexts/shell/jump_to/components/home_stack/style.cljs b/src/status_im2/contexts/shell/jump_to/components/home_stack/style.cljs index 32b7a9916a..6488c97194 100644 --- a/src/status_im2/contexts/shell/jump_to/components/home_stack/style.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/home_stack/style.cljs @@ -4,7 +4,7 @@ [status-im2.contexts.shell.jump-to.utils :as utils])) (defn home-stack - [shared-values {:keys [width height]}] + [shared-values {:keys [width height theme]}] (reanimated/apply-animations-to-style {:top (:home-stack-top shared-values) :left (:home-stack-left shared-values) @@ -14,7 +14,7 @@ :transform [{:scale (:home-stack-scale shared-values)}]} {:border-bottom-left-radius 20 :border-bottom-right-radius 20 - :background-color (colors/theme-colors colors/white colors/neutral-95) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme) :overflow :hidden :position :absolute :width width diff --git a/src/status_im2/contexts/shell/jump_to/components/home_stack/view.cljs b/src/status_im2/contexts/shell/jump_to/components/home_stack/view.cljs index 762b83fb01..ae022c3256 100644 --- a/src/status_im2/contexts/shell/jump_to/components/home_stack/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/home_stack/view.cljs @@ -8,7 +8,8 @@ [status-im2.contexts.communities.home.view :as communities] [status-im2.contexts.shell.jump-to.constants :as shell.constants] [status-im2.contexts.shell.jump-to.components.home-stack.style :as style] - [status-im.ui.screens.browser.stack :as browser.stack])) + [status-im.ui.screens.browser.stack :as browser.stack] + [quo2.theme :as quo.theme])) (defn load-stack? [stack-id] @@ -44,8 +45,9 @@ (defn f-home-stack [] - (let [shared-values @state/shared-values-atom] - [reanimated/view {:style (style/home-stack shared-values (utils/dimensions))} + (let [shared-values @state/shared-values-atom + theme (quo.theme/use-theme-value)] + [reanimated/view {:style (style/home-stack shared-values (assoc (utils/dimensions) :theme theme))} [lazy-screen :communities-stack shared-values] [lazy-screen :chats-stack shared-values] [lazy-screen :browser-stack shared-values]