diff --git a/scripts/lint/re-frame-in-quo-components.sh b/scripts/lint/re-frame-in-quo-components.sh index 645dd47f6e..bdb098ef82 100755 --- a/scripts/lint/re-frame-in-quo-components.sh +++ b/scripts/lint/re-frame-in-quo-components.sh @@ -1,9 +1,9 @@ #!/usr/bin/env sh -INVALID_CHANGES=$(grep -E -r '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|evt|status-im\.)' --include '*.cljs' --include '*.clj' './src/quo') +INVALID_CHANGES=$(grep -E -r '(/atom|re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|evt|status-im\.)' --include '*.cljs' --include '*.clj' './src/quo') if test -n "$INVALID_CHANGES"; then - echo "WARNING: re-frame, status-im are not allowed in quo components" + echo "WARNING: re-frame, status-im, reagent atoms are not allowed in quo components" echo '' echo "$INVALID_CHANGES" exit 1 diff --git a/src/legacy/status_im/bottom_sheet/sheets.cljs b/src/legacy/status_im/bottom_sheet/sheets.cljs index 537d4117b0..c8de382b5a 100644 --- a/src/legacy/status_im/bottom_sheet/sheets.cljs +++ b/src/legacy/status_im/bottom_sheet/sheets.cljs @@ -3,7 +3,7 @@ [legacy.status-im.bottom-sheet.view :as bottom-sheet] [legacy.status-im.ui.screens.about-app.views :as about-app] [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [utils.re-frame :as rf])) @@ -23,8 +23,7 @@ (merge mobile-network-settings/offline-sheet) (= view :learn-more) - (merge about-app/learn-more)) - page-theme (:theme options)] + (merge about-app/learn-more))] [:f> (fn [] @@ -32,7 +31,7 @@ (rn/hw-back-add-listener dismiss-bottom-sheet-callback) (fn [] (rn/hw-back-remove-listener dismiss-bottom-sheet-callback)))) - [theme/provider {:theme (or page-theme (theme/get-theme))} + [quo.theme/provider (or (:theme options)) [bottom-sheet/bottom-sheet opts (when content [content (when options options)])]])])) diff --git a/src/legacy/status_im/events.cljs b/src/legacy/status_im/events.cljs index aab3f6c096..84d381e76e 100644 --- a/src/legacy/status_im/events.cljs +++ b/src/legacy/status_im/events.cljs @@ -189,8 +189,8 @@ :db (assoc db :screens/was-focused-once? true)} (not (get db :screens/was-focused-once?)) - {:db (assoc db :screens/was-focused-once? true)}) - )) + {:db (assoc db :screens/was-focused-once? true)}))) + ;;TODO :replace by named events (rf/defn set-event diff --git a/src/legacy/status_im/ui/components/chat_icon/screen.cljs b/src/legacy/status_im/ui/components/chat_icon/screen.cljs index f1cc9efcd8..b19d3e2fc9 100644 --- a/src/legacy/status_im/ui/components/chat_icon/screen.cljs +++ b/src/legacy/status_im/ui/components/chat_icon/screen.cljs @@ -8,7 +8,7 @@ [legacy.status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils] [quo.components.avatars.user-avatar.style :as user-avatar.style] [quo.core :as quo] - [quo.theme :as theme] + [quo.theme] [re-frame.core :as re-frame.core] [react-native.core :as rn] [status-im.contexts.profile.utils :as profile.utils] @@ -52,7 +52,8 @@ (defn profile-photo-plus-dot-view [{:keys [public-key full-name customization-color photo-container photo-path community?]}] - (let [photo-container (if (nil? photo-container) + (let [theme @(re-frame.core/subscribe [:theme]) + photo-container (if (nil? photo-container) styles/container-chat-list photo-container) size (:width photo-container) @@ -71,8 +72,7 @@ {:size size :full-name full-name :font-size (get text-style :font-size) - :background-color (user-avatar.style/customization-color customization-color - (theme/get-theme)) + :background-color (user-avatar.style/customization-color customization-color theme) :indicator-size 0 :indicator-border 0 :indicator-color "#000000" diff --git a/src/legacy/status_im/ui/components/topbar.cljs b/src/legacy/status_im/ui/components/topbar.cljs index d8543b0767..60142957de 100644 --- a/src/legacy/status_im/ui/components/topbar.cljs +++ b/src/legacy/status_im/ui/components/topbar.cljs @@ -2,6 +2,7 @@ (:require [legacy.status-im.ui.components.core :as quo] [quo.foundations.colors :as quo.colors] + [quo.theme] [re-frame.core :as re-frame] [react-native.safe-area :as safe-area])) @@ -32,7 +33,8 @@ :or {border-bottom? true new-ui? false} :as props}] - (let [navigation (if (= navigation :none) + (let [theme (quo.theme/use-theme) + navigation (if (= navigation :none) nil [(default-navigation modal? navigation)])] [quo/header @@ -47,4 +49,5 @@ {:right-accessories right-accessories}) (when new-ui? {:background (quo.colors/theme-colors quo.colors/neutral-5 - quo.colors/neutral-95)}))])) + quo.colors/neutral-95 + theme)}))])) diff --git a/src/legacy/status_im/ui/screens/chat/message/legacy_style.cljs b/src/legacy/status_im/ui/screens/chat/message/legacy_style.cljs index 2774b21c34..012fa121ea 100644 --- a/src/legacy/status_im/ui/screens/chat/message/legacy_style.cljs +++ b/src/legacy/status_im/ui/screens/chat/message/legacy_style.cljs @@ -46,22 +46,22 @@ :color colors/gray}) (defn message-default-style - [] + [theme] {:font-family "Inter-Regular" - :color (quo.colors/theme-colors quo.colors/neutral-100 quo.colors/white) + :color (quo.colors/theme-colors quo.colors/neutral-100 quo.colors/white theme) :font-size 15 :line-height 21.75 :letter-spacing -0.135}) ;; Markdown styles (defn default-text-style - [] + [theme] {:max-font-size-multiplier react/max-font-size-multiplier - :style (message-default-style)}) + :style (message-default-style theme)}) (defn system-text-style - [] - (update (default-text-style) + [theme] + (update (default-text-style theme) :style assoc :color colors/gray :line-height 20 @@ -70,65 +70,65 @@ :font-weight "400")) (defn text-style - [content-type in-popover?] + [content-type in-popover? theme] (merge (when in-popover? {:number-of-lines 2}) (cond - (= content-type constants/content-type-system-text) (system-text-style) - (= content-type constants/content-type-system-pinned-message) (system-text-style) - :else (default-text-style)))) + (= content-type constants/content-type-system-text) (system-text-style theme) + (= content-type constants/content-type-system-pinned-message) (system-text-style theme) + :else (default-text-style theme)))) (defn emph-text-style - [] - (update (default-text-style) + [theme] + (update (default-text-style theme) :style assoc :font-style :italic)) (defn emph-style - [] - (emph-text-style)) + [theme] + (emph-text-style theme)) (defn strong-text-style - [] - (update (default-text-style) + [theme] + (update (default-text-style theme) :style assoc :font-weight "700")) (defn outgoing-strong-text-style - [] - (update (strong-text-style) + [theme] + (update (strong-text-style theme) :style assoc :color colors/white-persist)) (defn strong-style - [] - (outgoing-strong-text-style) - (strong-text-style)) + [theme] + (outgoing-strong-text-style theme) + (strong-text-style theme)) (defn strong-emph-style - [] - (update (strong-style) + [theme] + (update (strong-style theme) :style assoc :font-style :italic)) (defn strikethrough-style - [] - (cond-> (update (default-text-style) + [theme] + (cond-> (update (default-text-style theme) :style assoc :text-decoration-line :line-through))) (defn edited-style - [] + [theme] (cond-> - (update (default-text-style) + (update (default-text-style theme) :style assoc - :color (quo.colors/theme-colors quo.colors/neutral-40 quo.colors/neutral-50) + :color (quo.colors/theme-colors quo.colors/neutral-40 quo.colors/neutral-50 theme) :font-size 13 :line-height 18.2 :letter-spacing (typography/tracking 13)))) @@ -149,8 +149,8 @@ (default-blockquote-style)) (defn default-blockquote-text-style - [] - (update (default-text-style) + [theme] + (update (default-text-style theme) :style assoc :line-height 19 @@ -158,16 +158,16 @@ :color colors/black-transparent-50)) (defn outgoing-blockquote-text-style - [] - (update (default-blockquote-text-style) + [theme] + (update (default-blockquote-text-style theme) :style assoc :color colors/white-transparent-70-persist)) (defn blockquote-text-style - [] - (outgoing-blockquote-text-style) - (default-blockquote-text-style)) + [theme] + (outgoing-blockquote-text-style theme) + (default-blockquote-text-style theme)) (defn community-verified [] diff --git a/src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs b/src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs index 64a57c0bb8..41c6295b56 100644 --- a/src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs +++ b/src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs @@ -6,6 +6,7 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [quo.foundations.typography :as typography] + [quo.theme] [react-native.core :as rn] [status-im.constants :as constants] [status-im.contexts.chat.messenger.messages.delete-message-for-me.events] @@ -26,7 +27,7 @@ (defn render-inline [_message-text content-type acc {:keys [type literal destination]} - community-id] + community-id theme] (case type "" (conj acc literal) @@ -35,24 +36,25 @@ (conj acc [rn/text literal]) "emph" - (conj acc [rn/text (style/emph-style) literal]) + (conj acc [rn/text (style/emph-style theme) literal]) "strong" - (conj acc [rn/text (style/strong-style) literal]) + (conj acc [rn/text (style/strong-style theme) literal]) "strong-emph" - (conj acc [quo/text (style/strong-emph-style) literal]) + (conj acc [quo/text (style/strong-emph-style theme) literal]) "del" - (conj acc [rn/text (style/strikethrough-style) literal]) + (conj acc [rn/text (style/strikethrough-style theme) literal]) "link" - (conj acc - [rn/text - {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60) - :text-decoration-line :underline} - :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])} - destination]) + (conj + acc + [rn/text + {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60 theme) + :text-decoration-line :underline} + :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])} + destination]) "mention" (conj @@ -66,17 +68,18 @@ #(rf/dispatch [:chat.ui/show-profile literal]))} [mention-element literal]]]) "status-tag" - (conj acc - [rn/text - (when community-id - {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60) - :text-decoration-line :underline} - :on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])}) - "#" - literal]) + (conj + acc + [rn/text + (when community-id + {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60 theme) + :text-decoration-line :underline} + :on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])}) + "#" + literal]) "edited" - (conj acc [rn/text (style/edited-style) (str " (" (i18n/label :t/edited) ")")]) + (conj acc [rn/text (style/edited-style theme) (str " (" (i18n/label :t/edited) ")")]) (conj acc literal))) @@ -84,7 +87,7 @@ (defn render-block [{:keys [content content-type edited-at in-popover?]} acc {:keys [type ^js literal children]} - community-id] + community-id theme] (case type @@ -96,8 +99,9 @@ content-type acc e - community-id)) - [rn/text (style/text-style content-type in-popover?)] + community-id + theme)) + [rn/text (style/text-style content-type in-popover? theme)] (conj children (when edited-at @@ -106,7 +110,7 @@ "blockquote" (conj acc [rn/view (style/blockquote-style) - [rn/text (style/blockquote-text-style) + [rn/text (style/blockquote-text-style theme) (.substring literal 0 (.-length literal))]]) "codeblock" @@ -119,12 +123,14 @@ (defn render-parsed-text [{:keys [content chat-id] :as message-data}] - (let [community-id (rf/sub [:community-id-by-chat-id chat-id])] + (let [community-id (rf/sub [:community-id-by-chat-id chat-id]) + theme (quo.theme/use-theme)] (reduce (fn [acc e] (render-block message-data acc e - community-id)) + community-id + theme)) [:<>] (:parsed-text content)))) @@ -137,12 +143,13 @@ ;; STATUS ? whats that ? (defmethod ->message constants/content-type-status [{:keys [content content-type]}] - [rn/view style/status-container - [rn/text {:style (style/status-text)} - (reduce - (fn [acc e] (render-inline (:text content) content-type acc e nil)) - [rn/text {:style (style/status-text)}] - (-> content :parsed-text peek :children))]]) + (let [theme (quo.theme/use-theme)] + [rn/view style/status-container + [rn/text {:style (style/status-text)} + (reduce + (fn [acc e] (render-inline (:text content) content-type acc e nil theme)) + [rn/text {:style (style/status-text)}] + (-> content :parsed-text peek :children))]])) (defn contact-request-status-pending [] diff --git a/src/legacy/status_im/ui/screens/profile/contact/views.cljs b/src/legacy/status_im/ui/screens/profile/contact/views.cljs index deea93e5a4..8d18f4ec21 100644 --- a/src/legacy/status_im/ui/screens/profile/contact/views.cljs +++ b/src/legacy/status_im/ui/screens/profile/contact/views.cljs @@ -11,7 +11,7 @@ [legacy.status-im.ui.components.topbar :as topbar] [legacy.status-im.ui.screens.profile.components.sheets :as sheets] [quo.components.avatars.user-avatar.style :as user-avatar.style] - [quo.theme :as theme] + [quo.theme] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.constants :as constants] @@ -184,6 +184,7 @@ :as profile} @(re-frame/subscribe [:contacts/current-contact]) muted? @(re-frame/subscribe [:chats/muted public-key]) customization-color (or customization-color :primary) + theme @(re-frame/subscribe [:theme]) on-share #(re-frame/dispatch [:show-popover (merge {:view :share-chat-key @@ -205,8 +206,7 @@ {:on-press on-share :bottom-separator false :title (profile.utils/displayed-name profile) - :color (user-avatar.style/customization-color customization-color - (theme/get-theme)) + :color (user-avatar.style/customization-color customization-color theme) :photo (profile.utils/photo profile) :monospace (not ens-verified) :subtitle secondary-name diff --git a/src/legacy/status_im/ui/screens/profile/user/views.cljs b/src/legacy/status_im/ui/screens/profile/user/views.cljs index d1bb8bef38..129bb74b6c 100644 --- a/src/legacy/status_im/ui/screens/profile/user/views.cljs +++ b/src/legacy/status_im/ui/screens/profile/user/views.cljs @@ -14,7 +14,7 @@ [legacy.status-im.ui.screens.profile.visibility-status.views :as visibility-status] [legacy.status-im.utils.utils :as utils] [quo.components.avatars.user-avatar.style :as user-avatar.style] - [quo.theme :as theme] + [quo.theme] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.common.qr-codes.view :as qr-codes] @@ -200,6 +200,7 @@ @(re-frame/subscribe [:profile/profile-with-image]) customization-color (or (:color @(re-frame/subscribe [:onboarding/profile])) @(re-frame/subscribe [:profile/customization-color key-uid])) + theme @(re-frame/subscribe [:theme]) on-share #(re-frame/dispatch [:show-popover {:view :share-chat-key :address (or compressed-key @@ -221,7 +222,7 @@ {:content (edit/bottom-sheet has-picture)}]) :color (user-avatar.style/customization-color customization-color - (theme/get-theme)) + theme) :title (profile.utils/displayed-name profile) :photo (profile.utils/photo profile) :monospace (not ens-verified) diff --git a/src/legacy/status_im/ui/screens/profile/visibility_status/styles.cljs b/src/legacy/status_im/ui/screens/profile/visibility_status/styles.cljs index 7a81abcdf4..dd53ca0d18 100644 --- a/src/legacy/status_im/ui/screens/profile/visibility_status/styles.cljs +++ b/src/legacy/status_im/ui/screens/profile/visibility_status/styles.cljs @@ -17,14 +17,14 @@ :padding-right 12}) (defn visibility-status-dot - [{:keys [color size new-ui?]}] + [{:keys [color size new-ui?]} theme] (if new-ui? {:background-color color :width size :height size :border-radius (/ size 2) :border-width 3.5 - :border-color (quo.colors/theme-colors quo.colors/white quo.colors/neutral-90)} + :border-color (quo.colors/theme-colors quo.colors/white quo.colors/neutral-90 theme)} {:background-color color :width size :height size @@ -33,10 +33,11 @@ :border-color colors/white})) (defn visibility-status-profile-dot - [{:keys [color size border-width margin-left new-ui?]}] + [{:keys [color size border-width margin-left new-ui?]} theme] (merge (visibility-status-dot {:color color :size size - :new-ui? new-ui?}) + :new-ui? new-ui?} + theme) {:margin-right 6 :margin-left margin-left :border-width border-width})) diff --git a/src/legacy/status_im/ui/screens/profile/visibility_status/utils.cljs b/src/legacy/status_im/ui/screens/profile/visibility_status/utils.cljs index 5d10d4bf1b..5895361110 100644 --- a/src/legacy/status_im/ui/screens/profile/visibility_status/utils.cljs +++ b/src/legacy/status_im/ui/screens/profile/visibility_status/utils.cljs @@ -3,6 +3,7 @@ [legacy.status-im.ui.components.colors :as colors] [legacy.status-im.ui.screens.profile.visibility-status.styles :as styles] [quo.foundations.colors :as quo.colors] + [quo.theme] [status-im.constants :as constants] [utils.datetime :as datetime] [utils.i18n :as i18n] @@ -90,13 +91,15 @@ (defn icon-visibility-status-dot [public-key container-size] (let [status (rf/sub [:visibility-status-updates/visibility-status-update public-key]) + theme (quo.theme/use-theme) size (icon-dot-size container-size) margin -2 dot-color (icon-dot-color status) new-ui? true] (merge (styles/visibility-status-dot {:color dot-color :size size - :new-ui? new-ui?}) + :new-ui? new-ui?} + theme) {:bottom margin :right margin :position :absolute diff --git a/src/legacy/status_im/ui/screens/profile/visibility_status/views.cljs b/src/legacy/status_im/ui/screens/profile/visibility_status/views.cljs index 0402dc7018..b5936ad687 100644 --- a/src/legacy/status_im/ui/screens/profile/visibility_status/views.cljs +++ b/src/legacy/status_im/ui/screens/profile/visibility_status/views.cljs @@ -37,7 +37,7 @@ (dispatch-popover page-y)))) (defn profile-visibility-status-dot - [status-type color] + [status-type color theme] (let [automatic? (= status-type constants/visibility-status-automatic) [border-width margin-left size] (if automatic? [1 -10 12] [0 6 10]) @@ -50,14 +50,16 @@ :size size :border-width border-width :margin-left 6 - :new-ui? new-ui?})}]) + :new-ui? new-ui?} + theme)}]) [rn/view {:style (styles/visibility-status-profile-dot {:color color :size size :border-width border-width :margin-left margin-left - :new-ui? new-ui?})}]])) + :new-ui? new-ui?} + theme)}]])) (defn visibility-status-button [on-press props] diff --git a/src/quo/components/animated_header_flatlist/view.cljs b/src/quo/components/animated_header_flatlist/view.cljs index 17920a318d..5e3e14e2e2 100644 --- a/src/quo/components/animated_header_flatlist/view.cljs +++ b/src/quo/components/animated_header_flatlist/view.cljs @@ -54,7 +54,7 @@ (defn- f-animated-header-list [{:keys [header-comp main-comp back-button-on-press] :as params}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) 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 diff --git a/src/quo/components/avatars/account_avatar/component_spec.cljs b/src/quo/components/avatars/account_avatar/component_spec.cljs index 0be906c59a..f63de93c59 100644 --- a/src/quo/components/avatars/account_avatar/component_spec.cljs +++ b/src/quo/components/avatars/account_avatar/component_spec.cljs @@ -29,7 +29,7 @@ {:height (:size opts) :width (:size opts) :borderRadius (style/get-border-radius (:size opts)) - :backgroundColor (colors/resolve-color (:customization-color opts) :dark)}) + :backgroundColor (colors/resolve-color (:customization-color opts) :light)}) (h/is-truthy (h/query-by-label-text :account-emoji)) (h/has-style (h/query-by-label-text :account-emoji) {:fontSize (style/get-emoji-size (:size opts))}) @@ -65,7 +65,7 @@ {:height (:size opts) :width (:size opts) :borderRadius (style/get-border-radius (:size opts)) - :backgroundColor (colors/resolve-color (:customization-color opts) :dark)}) + :backgroundColor (colors/resolve-color (:customization-color opts) :light)}) (h/is-truthy (h/query-by-label-text :account-emoji)) (h/has-style (h/query-by-label-text :account-emoji) {:fontSize (style/get-emoji-size (:size opts))}) diff --git a/src/quo/components/avatars/account_avatar/style.cljs b/src/quo/components/avatars/account_avatar/style.cljs index 97fbc34aaf..25d87527cb 100644 --- a/src/quo/components/avatars/account_avatar/style.cljs +++ b/src/quo/components/avatars/account_avatar/style.cljs @@ -56,9 +56,10 @@ (defn root-container - [{:keys [type size theme customization-color] + [{:keys [type size customization-color] :or {size default-size - customization-color :blue}}] + customization-color :blue}} + theme] (let [watch-only? (= type :watch-only) width (cond-> size (keyword? size) (container-size size))] diff --git a/src/quo/components/avatars/account_avatar/view.cljs b/src/quo/components/avatars/account_avatar/view.cljs index 570ea5fe9a..6364df33c0 100644 --- a/src/quo/components/avatars/account_avatar/view.cljs +++ b/src/quo/components/avatars/account_avatar/view.cljs @@ -5,7 +5,7 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal +(defn view "Opts: :type - keyword -> :default/:watch-only @@ -21,15 +21,14 @@ :or {size style/default-size emoji "🍑"} :as opts}] - (let [emoji-size (style/get-emoji-size size)] + (let [theme (quo.theme/use-theme) + emoji-size (style/get-emoji-size size)] [rn/view {:accessible true :accessibility-label :account-avatar - :style (style/root-container opts)} + :style (style/root-container opts theme)} [rn/text {:accessibility-label :account-emoji :adjusts-font-size-to-fit true :style {:font-size emoji-size}} (when emoji (string/trim emoji))]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/avatars/channel_avatar/view.cljs b/src/quo/components/avatars/channel_avatar/view.cljs index d48c477ecb..9a3747df94 100644 --- a/src/quo/components/avatars/channel_avatar/view.cljs +++ b/src/quo/components/avatars/channel_avatar/view.cljs @@ -34,7 +34,7 @@ :container-style style/lock-icon :size 12}]])) -(defn- view-internal +(defn view "Options: :size - keyword (default nil) - Container size, for the moment, @@ -52,22 +52,21 @@ :full-name - string (default nil) - When :emoji is blank, this value will be used to extract the initials. " - [{:keys [size emoji customization-color locked? full-name theme]}] - [rn/view - {:accessibility-label :channel-avatar - :style (style/outer-container {:theme theme - :size size - :customization-color customization-color})} - (if (string/blank? emoji) - [initials - {:full-name full-name - :size size - :customization-color customization-color - :theme theme}] - [rn/text - {:style (style/emoji-size size) - :accessibility-label :emoji} - (when emoji (string/trim emoji))]) - [lock locked? size theme]]) - -(def view (quo.theme/with-theme view-internal)) + [{:keys [size emoji customization-color locked? full-name]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:accessibility-label :channel-avatar + :style (style/outer-container {:theme theme + :size size + :customization-color customization-color})} + (if (string/blank? emoji) + [initials + {:full-name full-name + :size size + :customization-color customization-color + :theme theme}] + [rn/text + {:style (style/emoji-size size) + :accessibility-label :emoji} + (when emoji (string/trim emoji))]) + [lock locked? size theme]])) diff --git a/src/quo/components/avatars/collection_avatar/view.cljs b/src/quo/components/avatars/collection_avatar/view.cljs index 96bafbadd1..9d1fe45b9d 100644 --- a/src/quo/components/avatars/collection_avatar/view.cljs +++ b/src/quo/components/avatars/collection_avatar/view.cljs @@ -4,17 +4,16 @@ [quo.theme :as quo.theme] [react-native.fast-image :as fast-image])) -(defn- view-internal +(defn view "Opts: :image - collection image :theme - keyword -> :light/:dark" - [{:keys [image theme size on-load-end on-error] :or {size :size-24}}] - [fast-image/fast-image - {:accessibility-label :collection-avatar - :source image - :on-load-end on-load-end - :on-error on-error - :style (style/collection-avatar theme size)}]) - -(def view (quo.theme/with-theme view-internal)) + [{:keys [image size on-load-end on-error] :or {size :size-24}}] + (let [theme (quo.theme/use-theme)] + [fast-image/fast-image + {:accessibility-label :collection-avatar + :source image + :on-load-end on-load-end + :on-error on-error + :style (style/collection-avatar theme size)}])) diff --git a/src/quo/components/avatars/group_avatar/view.cljs b/src/quo/components/avatars/group_avatar/view.cljs index b9440dc64c..8f5f50349d 100644 --- a/src/quo/components/avatars/group_avatar/view.cljs +++ b/src/quo/components/avatars/group_avatar/view.cljs @@ -21,46 +21,44 @@ :size-80 {:icon 32 :container 80}}) -(defn- view-internal - [_] - (fn [{:keys [size theme customization-color picture icon-name emoji chat-name] - :or {size :size-20 - customization-color :blue - picture nil - icon-name :i/members}}] - (let [container-size (get-in sizes [size :container]) - icon-size (get-in sizes [size :icon])] - [rn/view - {:accessibility-label :group-avatar - :style (style/container {:container-size container-size - :customization-color customization-color - :theme theme})} - (if picture - [fast-image/fast-image - {:source picture - :style {:width container-size - :height container-size}}] - (cond - emoji - (if (= size :size-80) - [rn/text - {:style (style/avatar-identifier theme)} - emoji] - [text/text - {:size :paragraph-1 - :style (dissoc (style/avatar-identifier theme) :font-size)} - emoji]) - chat-name - (if (= size :size-80) - [rn/text - {:style (style/avatar-identifier theme)} - ((comp first string/upper-case) chat-name)] - [text/text - {:size :paragraph-1} - ((comp first string/upper-case) chat-name)]) - :else - [icon/icon icon-name - {:size icon-size - :color colors/white-opa-70}]))]))) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [size customization-color picture icon-name emoji chat-name] + :or {size :size-20 + customization-color :blue + picture nil + icon-name :i/members}}] + (let [theme (quo.theme/use-theme) + container-size (get-in sizes [size :container]) + icon-size (get-in sizes [size :icon])] + [rn/view + {:accessibility-label :group-avatar + :style (style/container {:container-size container-size + :customization-color customization-color + :theme theme})} + (if picture + [fast-image/fast-image + {:source picture + :style {:width container-size + :height container-size}}] + (cond + emoji + (if (= size :size-80) + [rn/text + {:style (style/avatar-identifier theme)} + emoji] + [text/text + {:size :paragraph-1 + :style (dissoc (style/avatar-identifier theme) :font-size)} + emoji]) + chat-name + (if (= size :size-80) + [rn/text + {:style (style/avatar-identifier theme)} + ((comp first string/upper-case) chat-name)] + [text/text + {:size :paragraph-1} + ((comp first string/upper-case) chat-name)]) + :else + [icon/icon icon-name + {:size icon-size + :color colors/white-opa-70}]))])) diff --git a/src/quo/components/avatars/icon_avatar.cljs b/src/quo/components/avatars/icon_avatar.cljs index fe3ac54301..3ee56af290 100644 --- a/src/quo/components/avatars/icon_avatar.cljs +++ b/src/quo/components/avatars/icon_avatar.cljs @@ -15,11 +15,12 @@ :size-20 {:component 20 :icon 12}}) -(defn icon-avatar-internal - [{:keys [size icon color opacity border? theme] +(defn icon-avatar + [{:keys [size icon color opacity border?] :or {opacity 20 size :size-32}}] - (let [{component-size :component icon-size :icon} (get sizes size) + (let [theme (quo.theme/use-theme) + {component-size :component icon-size :icon} (get sizes size) circle-color (colors/resolve-color color theme opacity) icon-color (colors/resolve-color color theme)] (if (keyword? icon) @@ -38,5 +39,3 @@ [rn/image {:source icon :style {:width component-size :height component-size}}]))) - -(def icon-avatar (quo.theme/with-theme icon-avatar-internal)) diff --git a/src/quo/components/avatars/user_avatar/schema.cljs b/src/quo/components/avatars/user_avatar/schema.cljs index a75299762c..3c113616ad 100644 --- a/src/quo/components/avatars/user_avatar/schema.cljs +++ b/src/quo/components/avatars/user_avatar/schema.cljs @@ -14,7 +14,6 @@ [:status-indicator? {:optional true} [:maybe boolean?]] [:online? {:optional true} [:maybe boolean?]] [:ring? {:optional true} [:maybe boolean?]] - [:theme :schema.common/theme] [:profile-picture {:optional true} [:maybe :schema.quo/profile-picture-source]]]]] diff --git a/src/quo/components/avatars/user_avatar/style.cljs b/src/quo/components/avatars/user_avatar/style.cljs index 3d978ae852..0d16b049b5 100644 --- a/src/quo/components/avatars/user_avatar/style.cljs +++ b/src/quo/components/avatars/user_avatar/style.cljs @@ -66,8 +66,8 @@ :background-color (colors/resolve-color customization-color theme)})) (defn indicator-color - [] - {:online (colors/theme-colors colors/success-50 colors/success-60) + [theme] + {:online (colors/theme-colors colors/success-50 colors/success-60 theme) :offline colors/neutral-40}) (defn outer diff --git a/src/quo/components/avatars/user_avatar/view.cljs b/src/quo/components/avatars/user_avatar/view.cljs index 3fe4100b73..fa93e06ab8 100644 --- a/src/quo/components/avatars/user_avatar/view.cljs +++ b/src/quo/components/avatars/user_avatar/view.cljs @@ -11,9 +11,10 @@ utils.string)) (defn initials-avatar - [{:keys [full-name size customization-color theme] + [{:keys [full-name size customization-color] :or {customization-color :blue}}] - (let [font-size (get-in style/sizes [size :font-size]) + (let [theme (quo.theme/use-theme) + font-size (get-in style/sizes [size :font-size]) amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)] [rn/view {:accessibility-label :initials-avatar @@ -31,14 +32,14 @@ When calling the `profile-picture-fn` and passing the `:ring?` key, be aware that the `profile-picture-fn` may have an `:override-ring?` value. If it does then the `:ring?` value will not be used. For reference, refer to the `utils.image-server` namespace for these `profile-picture-fn` are generated." - [{:keys [full-name size profile-picture static? - status-indicator? online? ring? theme] + [{:keys [full-name size profile-picture static? status-indicator? online? ring?] :or {size :big status-indicator? true online? true ring? true} :as props}] - (let [full-name (or full-name "Your Name") + (let [theme (quo.theme/use-theme) + full-name (or full-name "Your Name") ;; image generated with `profile-picture-fn` is round cropped ;; no need to add border-radius for them outer-styles (style/outer size (not (:fn profile-picture))) @@ -49,7 +50,7 @@ font-size (get-in style/sizes [size :font-size]) amount-initials (if (#{:xs :xxs :xxxs} size) 1 2) sizes (get style/sizes size) - indicator-color (get (style/indicator-color) (if online? :online :offline)) + indicator-color (get (style/indicator-color theme) (if online? :online :offline)) profile-picture-fn (:fn profile-picture)] [rn/view {:style outer-styles :accessibility-label :user-avatar} @@ -66,7 +67,8 @@ {:length amount-initials :full-name full-name :font-size (:font-size (text/text-style {:size - font-size})) + font-size} + nil)) :indicator-size (when status-indicator? (:status-indicator sizes)) :indicator-border (when status-indicator? @@ -87,6 +89,4 @@ :else {:uri profile-picture})}])])) -(def user-avatar - (quo.theme/with-theme - (schema/instrument #'user-avatar-internal component-schema/?schema))) +(def user-avatar (schema/instrument #'user-avatar-internal component-schema/?schema)) diff --git a/src/quo/components/avatars/wallet_user_avatar/view.cljs b/src/quo/components/avatars/wallet_user_avatar/view.cljs index 2c39204344..357b5598c9 100644 --- a/src/quo/components/avatars/wallet_user_avatar/view.cljs +++ b/src/quo/components/avatars/wallet_user_avatar/view.cljs @@ -34,7 +34,7 @@ (= size second-smallest-possible))) (def biggest-possible (last (keys properties))) -(defn- view-internal +(defn wallet-user-avatar "Options: :full-name - string (default: nil) - used to generate initials @@ -44,9 +44,10 @@ :monospace? - boolean (default: false) - use monospace font :lowercase? - boolean (default: false) - lowercase text :neutral? - boolean (default: false) - use neutral colors variant" - [{:keys [full-name customization-color size theme monospace? lowercase? neutral?] + [{:keys [full-name customization-color size monospace? lowercase? neutral?] :or {size biggest-possible}}] - (let [circle-size (:size (size properties)) + (let [theme (quo.theme/use-theme) + circle-size (:size (size properties)) small? (check-if-size-small size) initials (utils.string/get-initials full-name (if small? 1 2))] [rn/view @@ -57,5 +58,3 @@ :weight (if monospace? :monospace (:font-weight (size properties))) :style (style/text customization-color neutral? theme)} (if (and initials lowercase?) (string/lower-case initials) initials)]])) - -(def wallet-user-avatar (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/banners/banner/view.cljs b/src/quo/components/banners/banner/view.cljs index e932e401dc..9f873956bc 100644 --- a/src/quo/components/banners/banner/view.cljs +++ b/src/quo/components/banners/banner/view.cljs @@ -8,27 +8,26 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [hide-pin? latest-pin-text pins-count on-press theme]}] - (when (pos? pins-count) - [rn/touchable-opacity - {:accessibility-label :pinned-banner - :style style/container - :active-opacity 1 - :on-press on-press} - (when-not hide-pin? - [rn/view {:style style/icon} - [icons/icon :i/pin - {:color (colors/theme-colors colors/neutral-100 colors/white theme) - :size 20}]]) - [rn/view {:style (style/text hide-pin?)} - [text/text - {:number-of-lines 1 - :size :paragraph-2} - latest-pin-text]] - [rn/view - {:accessibility-label :pins-count - :style style/counter} - [counter/view {:type :secondary} pins-count]]])) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [hide-pin? latest-pin-text pins-count on-press]}] + (let [theme (quo.theme/use-theme)] + (when (pos? pins-count) + [rn/touchable-opacity + {:accessibility-label :pinned-banner + :style style/container + :active-opacity 1 + :on-press on-press} + (when-not hide-pin? + [rn/view {:style style/icon} + [icons/icon :i/pin + {:color (colors/theme-colors colors/neutral-100 colors/white theme) + :size 20}]]) + [rn/view {:style (style/text hide-pin?)} + [text/text + {:number-of-lines 1 + :size :paragraph-2} + latest-pin-text]] + [rn/view + {:accessibility-label :pins-count + :style style/counter} + [counter/view {:type :secondary} pins-count]]]))) diff --git a/src/quo/components/browser/browser_input/style.cljs b/src/quo/components/browser/browser_input/style.cljs index 021324c5b1..4eb8b82a62 100644 --- a/src/quo/components/browser/browser_input/style.cljs +++ b/src/quo/components/browser/browser_input/style.cljs @@ -17,7 +17,8 @@ (defn input [disabled?] (assoc (text/text-style {:size :paragraph-1 - :weight :regular}) + :weight :regular} + nil) :flex 1 :min-height 36 :min-width 120 @@ -45,11 +46,12 @@ :z-index 10}) (defn text - [] + [theme] (assoc (text/text-style {:size :paragraph-1 - :weight :medium}) + :weight :medium} + nil) :color - (colors/theme-colors colors/neutral-100 colors/white))) + (colors/theme-colors colors/neutral-100 colors/white theme))) (def root-container {:height 60 diff --git a/src/quo/components/browser/browser_input/view.cljs b/src/quo/components/browser/browser_input/view.cljs index 488c3e5973..63f7cf9ecb 100644 --- a/src/quo/components/browser/browser_input/view.cljs +++ b/src/quo/components/browser/browser_input/view.cljs @@ -121,7 +121,7 @@ :size favicon-size}]) [rn/text {:accessibility-label :browser-input-label - :style (style/text)} + :style (style/text theme)} (remove-http-https-www value)] (when locked? [lock-icon {:blur? blur? :theme theme}])]) diff --git a/src/quo/components/buttons/button/view.cljs b/src/quo/components/buttons/button/view.cljs index 8f56d44d96..79993ba56b 100644 --- a/src/quo/components/buttons/button/view.cljs +++ b/src/quo/components/buttons/button/view.cljs @@ -5,7 +5,7 @@ [quo.components.icon :as quo.icons] [quo.components.markdown.text :as text] [quo.foundations.customization-colors :as customization-colors] - [quo.theme :as theme] + [quo.theme] [react-native.blur :as blur] [react-native.core :as rn])) @@ -36,7 +36,7 @@ customization-color (if (= type :primary) :blue nil)}} children] (let [[pressed-state? set-pressed-state] (rn/use-state false) - theme (theme/use-theme-value) + theme (quo.theme/use-theme) {:keys [icon-color background-color label-color border-color blur-type blur-overlay-color border-radius overlay-customization-color]} (button-properties/get-values {:customization-color customization-color diff --git a/src/quo/components/buttons/composer_button/view.cljs b/src/quo/components/buttons/composer_button/view.cljs index 3c9161aa6f..bbaa4a90dc 100644 --- a/src/quo/components/buttons/composer_button/view.cljs +++ b/src/quo/components/buttons/composer_button/view.cljs @@ -2,13 +2,13 @@ (:require [quo.components.buttons.composer-button.style :as style] [quo.components.icon :as quo.icons] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn view [{:keys [on-press on-long-press disabled? blur? icon accessibility-label container-style]}] (let [[pressed? set-pressed] (rn/use-state false) - theme (theme/use-theme-value) + theme (quo.theme/use-theme) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed nil))] [rn/pressable diff --git a/src/quo/components/buttons/dynamic_button/view.cljs b/src/quo/components/buttons/dynamic_button/view.cljs index d9f0f85d91..7c249f7563 100644 --- a/src/quo/components/buttons/dynamic_button/view.cljs +++ b/src/quo/components/buttons/dynamic_button/view.cljs @@ -52,7 +52,7 @@ :count mentions or notifications count :customization-color customize jump-to and mention button color}" [{:keys [type label on-press customization-color style] :as args}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) button-color (get-button-color {:type type :pressed? pressed? diff --git a/src/quo/components/buttons/logout_button/view.cljs b/src/quo/components/buttons/logout_button/view.cljs index 056f6ade4f..6faf2d46a5 100644 --- a/src/quo/components/buttons/logout_button/view.cljs +++ b/src/quo/components/buttons/logout_button/view.cljs @@ -10,7 +10,7 @@ (defn view [{:keys [on-press on-long-press disabled? container-style]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed nil))] diff --git a/src/quo/components/buttons/predictive_keyboard/view.cljs b/src/quo/components/buttons/predictive_keyboard/view.cljs index 7dc7cd10c4..42feb25a73 100644 --- a/src/quo/components/buttons/predictive_keyboard/view.cljs +++ b/src/quo/components/buttons/predictive_keyboard/view.cljs @@ -4,7 +4,7 @@ [quo.components.buttons.predictive-keyboard.style :as style] [quo.components.info.info-message :as info-message] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient])) @@ -26,7 +26,7 @@ [] [rn/view {:style {:width 8}}]) -(defn- view-internal +(defn view "Options - `type` `:words`/`:error`/`:info`/`:empty`. - `blur?` Boolean to enable blur background support. @@ -34,43 +34,42 @@ - `words` List of words to display in the keyboard. - `on-press` Callback called when a word is pressed `(fn [word])` - `theme` :light or :dark, received from with-theme HOC." - [{:keys [type blur? text words on-press theme]}] - [linear-gradient/linear-gradient - {:style {:flex-direction :row} - :accessibility-label :predictive-keyboard - :colors (if blur? - (gradients :blur) - (colors/theme-colors (gradients :light) (gradients :dark) theme))} - [rn/view {:style (style/wrapper type)} - (case type - :words - [rn/flat-list - {:keyboard-should-persist-taps :always - :data words - :content-container-style style/word-list - :render-fn word-component - :render-data {:on-press on-press} - :shows-horizontal-scroll-indicator false - :separator [separator] - :horizontal true - :key-fn str}] + [{:keys [type blur? text words on-press]}] + (let [theme (quo.theme/use-theme)] + [linear-gradient/linear-gradient + {:style {:flex-direction :row} + :accessibility-label :predictive-keyboard + :colors (if blur? + (gradients :blur) + (colors/theme-colors (gradients :light) (gradients :dark) theme))} + [rn/view {:style (style/wrapper type)} + (case type + :words + [rn/flat-list + {:keyboard-should-persist-taps :always + :data words + :content-container-style style/word-list + :render-fn word-component + :render-data {:on-press on-press} + :shows-horizontal-scroll-indicator false + :separator [separator] + :horizontal true + :key-fn str}] - :error - [info-message/info-message - {:icon :i/info - :size :default - :type :error} - text] + :error + [info-message/info-message + {:icon :i/info + :size :default + :type :error} + text] - :info - [info-message/info-message - (merge {:icon :i/info - :size :default - :type (if (= type :error) :error :default)} - (when blur? - {:text-color colors/white-opa-70 - :icon-color colors/white-opa-70})) - text] - nil)]]) - -(def view (theme/with-theme view-internal)) + :info + [info-message/info-message + (merge {:icon :i/info + :size :default + :type (if (= type :error) :error :default)} + (when blur? + {:text-color colors/white-opa-70 + :icon-color colors/white-opa-70})) + text] + nil)]])) diff --git a/src/quo/components/buttons/slide_button/view.cljs b/src/quo/components/buttons/slide_button/view.cljs index 76bf523bfd..dc9504f5e4 100644 --- a/src/quo/components/buttons/slide_button/view.cljs +++ b/src/quo/components/buttons/slide_button/view.cljs @@ -48,7 +48,7 @@ " [{:keys [on-complete track-text track-icon disabled? customization-color size container-style type blur?]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) x-pos (reanimated/use-shared-value 0) [track-width set-track-width] (rn/use-state nil) [sliding-complete? diff --git a/src/quo/components/buttons/wallet_button/view.cljs b/src/quo/components/buttons/wallet_button/view.cljs index e92416d468..f1602c4c4e 100644 --- a/src/quo/components/buttons/wallet_button/view.cljs +++ b/src/quo/components/buttons/wallet_button/view.cljs @@ -3,12 +3,12 @@ [quo.components.buttons.wallet-button.style :as style] [quo.components.icon :as quo.icons] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn view [{:keys [on-press on-long-press disabled? icon accessibility-label container-style]}] - (let [theme (theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed nil))] diff --git a/src/quo/components/buttons/wallet_ctas/view.cljs b/src/quo/components/buttons/wallet_ctas/view.cljs index fc77f4f08d..6fe9ab4be6 100644 --- a/src/quo/components/buttons/wallet_ctas/view.cljs +++ b/src/quo/components/buttons/wallet_ctas/view.cljs @@ -23,32 +23,31 @@ :style {:margin-top 4 :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} text]]) -(defn view-internal - [{:keys [theme buy-action send-action receive-action bridge-action]}] - [rn/view {:style style/container} - [action-button - {:icon :i/add - :text (i18n/label :t/buy) - :on-press buy-action - :theme theme - :accessibility-label :buy}] - [action-button - {:icon :i/send - :text (i18n/label :t/send) - :on-press send-action - :theme theme - :accessibility-label :send}] - [action-button - {:icon :i/receive - :text (i18n/label :t/receive) - :on-press receive-action - :theme theme - :accessibility-label :receive}] - [action-button - {:icon :i/bridge - :text (i18n/label :t/bridge) - :on-press bridge-action - :theme theme - :accessibility-label :bridge}]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [buy-action send-action receive-action bridge-action]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/container} + [action-button + {:icon :i/add + :text (i18n/label :t/buy) + :on-press buy-action + :theme theme + :accessibility-label :buy}] + [action-button + {:icon :i/send + :text (i18n/label :t/send) + :on-press send-action + :theme theme + :accessibility-label :send}] + [action-button + {:icon :i/receive + :text (i18n/label :t/receive) + :on-press receive-action + :theme theme + :accessibility-label :receive}] + [action-button + {:icon :i/bridge + :text (i18n/label :t/bridge) + :on-press bridge-action + :theme theme + :accessibility-label :bridge}]])) diff --git a/src/quo/components/calendar/calendar/month_picker/view.cljs b/src/quo/components/calendar/calendar/month_picker/view.cljs index 6efa19c1fd..80449ea18c 100644 --- a/src/quo/components/calendar/calendar/month_picker/view.cljs +++ b/src/quo/components/calendar/calendar/month_picker/view.cljs @@ -4,13 +4,14 @@ [quo.components.calendar.calendar.month-picker.style :as style] [quo.components.calendar.calendar.month-picker.utils :as utils] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [utils.number :as utils.number])) -(defn- view-internal - [{:keys [year month on-change theme]}] - (let [year (utils.number/parse-int year) +(defn view + [{:keys [year month on-change]}] + (let [theme (quo.theme/use-theme) + year (utils.number/parse-int year) month (utils.number/parse-int month)] [rn/view {:style style/container} @@ -35,5 +36,3 @@ :type :outline :on-press #(on-change (utils/next-month year month))} :i/chevron-right]])) - -(def view (theme/with-theme view-internal)) diff --git a/src/quo/components/calendar/calendar/view.cljs b/src/quo/components/calendar/calendar/view.cljs index efc5d946ce..fafbdeaeba 100644 --- a/src/quo/components/calendar/calendar/view.cljs +++ b/src/quo/components/calendar/calendar/view.cljs @@ -6,13 +6,13 @@ [quo.components.calendar.calendar.utils :as utils] [quo.components.calendar.calendar.weekdays-header.view :as weekdays-header] [quo.components.calendar.calendar.years-list.view :as years-list] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [utils.number :as utils.number])) (defn view [{:keys [on-change start-date end-date]}] - (let [theme (theme/use-theme-value) + (let [theme (quo.theme/use-theme) [selected-year set-selected-year] (rn/use-state (utils/current-year)) [selected-month set-selected-month] (rn/use-state (utils/current-month)) on-change-year (rn/use-callback #(set-selected-year %)) diff --git a/src/quo/components/calendar/calendar/weekdays_header/view.cljs b/src/quo/components/calendar/calendar/weekdays_header/view.cljs index ffb269c392..4c05a2807c 100644 --- a/src/quo/components/calendar/calendar/weekdays_header/view.cljs +++ b/src/quo/components/calendar/calendar/weekdays_header/view.cljs @@ -2,23 +2,22 @@ (:require [quo.components.calendar.calendar.weekdays-header.style :as style] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [utils.datetime :as datetime] [utils.i18n :as i18n])) -(defn- view-internal - [theme] - [rn/view - {:style style/container-weekday-row} - (for [weekday datetime/weekday-names] - [rn/view - {:style style/container-weekday - :key weekday} - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/text-weekdays theme)} - (str (i18n/label weekday))]])]) - -(def view (theme/with-theme view-internal)) +(defn view + [] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style style/container-weekday-row} + (for [weekday datetime/weekday-names] + [rn/view + {:style style/container-weekday + :key weekday} + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/text-weekdays theme)} + (str (i18n/label weekday))]])])) diff --git a/src/quo/components/calendar/calendar/years_list/view.cljs b/src/quo/components/calendar/calendar/years_list/view.cljs index c7b379ca6f..5c40945f33 100644 --- a/src/quo/components/calendar/calendar/years_list/view.cljs +++ b/src/quo/components/calendar/calendar/years_list/view.cljs @@ -3,7 +3,7 @@ [quo.components.calendar.calendar-year.view :as calendar-year] [quo.components.calendar.calendar.utils :as utils] [quo.components.calendar.calendar.years-list.style :as style] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient])) @@ -30,21 +30,20 @@ :start {:x 0 :y 0} :end {:x 0 :y 1}}]) -(defn view-internal - [{:keys [on-change-year year theme]}] - [rn/view - {:style (style/container-years theme)} - [rn/flat-list - {:data (utils/generate-years (utils/current-year)) - :key-fn str - :list-key :years-list - :inverted true - :shows-vertical-scroll-indicator false - :footer [footer] - :separator [separator] - :render-fn year-view - :render-data {:selected-year year - :on-press #(on-change-year %)}}] - [gradiant-overview theme]]) - -(def view (theme/with-theme view-internal)) +(defn view + [{:keys [on-change-year year]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (style/container-years theme)} + [rn/flat-list + {:data (utils/generate-years (utils/current-year)) + :key-fn str + :list-key :years-list + :inverted true + :shows-vertical-scroll-indicator false + :footer [footer] + :separator [separator] + :render-fn year-view + :render-data {:selected-year year + :on-press #(on-change-year %)}}] + [gradiant-overview theme]])) diff --git a/src/quo/components/calendar/calendar_day/view.cljs b/src/quo/components/calendar/calendar_day/view.cljs index 1f169b7753..df5073cabd 100644 --- a/src/quo/components/calendar/calendar_day/view.cljs +++ b/src/quo/components/calendar/calendar_day/view.cljs @@ -2,31 +2,30 @@ (:require [quo.components.calendar.calendar-day.style :as style] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [state in-range on-press customization-color theme] +(defn view + [{:keys [state in-range on-press customization-color] :or {state :default}} day] - [rn/view {:style style/wrapper} - [rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}] - [rn/touchable-opacity - {:on-press on-press - :style (style/container + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/wrapper} + [rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}] + [rn/touchable-opacity + {:on-press on-press + :style (style/container + {:state state + :theme theme + :customization-color customization-color}) + :disabled (= state :disabled)} + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/text {:state state :theme theme})} + day] + [rn/view + {:style (style/indicator {:state state :theme theme - :customization-color customization-color}) - :disabled (= state :disabled)} - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/text {:state state :theme theme})} - day] - [rn/view - {:style (style/indicator - {:state state - :theme theme - :customization-color customization-color})}]]]) - -(def view (theme/with-theme view-internal)) + :customization-color customization-color})}]]])) diff --git a/src/quo/components/calendar/calendar_year/view.cljs b/src/quo/components/calendar/calendar_year/view.cljs index 7fc37cdefe..6eb7566952 100644 --- a/src/quo/components/calendar/calendar_year/view.cljs +++ b/src/quo/components/calendar/calendar_year/view.cljs @@ -2,24 +2,23 @@ (:require [quo.components.calendar.calendar-year.style :as style] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [selected? disabled? on-press theme]} year] - [rn/touchable-opacity - {:on-press on-press - :style (style/container - {:selected? selected? - :disabled? disabled? - :theme theme}) - :disabled disabled?} - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/text - {:selected? selected? - :theme theme})} - year]]) - -(def view (theme/with-theme view-internal)) +(defn view + [{:keys [selected? disabled? on-press]} year] + (let [theme (quo.theme/use-theme)] + [rn/touchable-opacity + {:on-press on-press + :style (style/container + {:selected? selected? + :disabled? disabled? + :theme theme}) + :disabled disabled?} + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/text + {:selected? selected? + :theme theme})} + year]])) diff --git a/src/quo/components/code/snippet/view.cljs b/src/quo/components/code/snippet/view.cljs index 569e00e663..2999ca8b9f 100644 --- a/src/quo/components/code/snippet/view.cljs +++ b/src/quo/components/code/snippet/view.cljs @@ -1,16 +1,12 @@ (ns quo.components.code.snippet.view (:require - [quo.components.code.common.view :as code-common] - [quo.theme :as theme])) + [quo.components.code.common.view :as code-common])) -(defn- view-internal - [_] - (fn [{:keys [language max-lines on-copy-press]} children] - [code-common/view - {:language language - :max-lines max-lines - :on-copy-press on-copy-press - :preview? false} - children])) - -(def view (theme/with-theme view-internal)) +(defn view + [{:keys [language max-lines on-copy-press]} children] + [code-common/view + {:language language + :max-lines max-lines + :on-copy-press on-copy-press + :preview? false} + children]) diff --git a/src/quo/components/colors/color/view.cljs b/src/quo/components/colors/color/view.cljs index b32450ff3f..76d36724fb 100644 --- a/src/quo/components/colors/color/view.cljs +++ b/src/quo/components/colors/color/view.cljs @@ -14,16 +14,11 @@ [rn/view {:style (style/left-half theme)}] [rn/view {:style (style/right-half theme)}]]) -(defn- view-internal - [{:keys [color - selected? - on-press - blur? - theme - idx - window-width] +(defn view + [{:keys [color selected? on-press blur? idx window-width] :as props}] - (let [border? (and (not blur?) (not selected?)) + (let [theme (quo.theme/use-theme) + border? (and (not blur?) (not selected?)) hex-color (if (= :feng-shui color) (colors/theme-colors colors/neutral-100 colors/white theme) (colors/theme-colors (colors/custom-color color 50) @@ -38,6 +33,7 @@ (if (and (= :feng-shui color) (not selected?)) [feng-shui (assoc props + :theme theme :hex-color hex-color :border? border?)] [rn/view @@ -49,5 +45,3 @@ :color (if (= :feng-shui color) (colors/theme-colors colors/white colors/neutral-100 theme) colors/white)}])])])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/common/not_implemented/view.cljs b/src/quo/components/common/not_implemented/view.cljs index 0f0e8a34dd..0cbeea575e 100644 --- a/src/quo/components/common/not_implemented/view.cljs +++ b/src/quo/components/common/not_implemented/view.cljs @@ -4,9 +4,8 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [blur? theme]}] - [rn/text {:style (style/text blur? theme)} - "not implemented"]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/text {:style (style/text blur? theme)} + "not implemented"])) diff --git a/src/quo/components/common/notification_dot/view.cljs b/src/quo/components/common/notification_dot/view.cljs index 1ab62bce8e..c9cd0d601e 100644 --- a/src/quo/components/common/notification_dot/view.cljs +++ b/src/quo/components/common/notification_dot/view.cljs @@ -4,12 +4,11 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn view-internal - [{:keys [customization-color style theme blur?]}] - [rn/view - {:accessibility-label :notification-dot - :style (merge - (style/notification-dot customization-color theme blur?) - style)}]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [customization-color style blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:accessibility-label :notification-dot + :style (merge + (style/notification-dot customization-color theme blur?) + style)}])) diff --git a/src/quo/components/common/separator/view.cljs b/src/quo/components/common/separator/view.cljs index b54a0fda75..158edca45e 100644 --- a/src/quo/components/common/separator/view.cljs +++ b/src/quo/components/common/separator/view.cljs @@ -1,16 +1,19 @@ (ns quo.components.common.separator.view (:require [quo.foundations.colors :as quo.colors] + [quo.theme] [react-native.core :as rn])) (defn separator [{:keys [style]}] - [rn/view - {:style - (merge - style - {:background-color (quo.colors/theme-colors - quo.colors/neutral-10 - quo.colors/neutral-80) - :align-self :stretch - :height 1})}]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style + (merge + style + {:background-color (quo.colors/theme-colors + quo.colors/neutral-10 + quo.colors/neutral-80 + theme) + :align-self :stretch + :height 1})}])) diff --git a/src/quo/components/common/unread_grey_dot/style.cljs b/src/quo/components/common/unread_grey_dot/style.cljs index 61e4d4e4da..2249d414dc 100644 --- a/src/quo/components/common/unread_grey_dot/style.cljs +++ b/src/quo/components/common/unread_grey_dot/style.cljs @@ -2,10 +2,12 @@ (:require [quo.foundations.colors :as colors])) -(def unread-grey-dot +(defn unread-grey-dot + [theme] {:width 8 :height 8 :border-radius 4 :background-color (colors/theme-colors colors/neutral-40 - colors/neutral-60)}) + colors/neutral-60 + theme)}) diff --git a/src/quo/components/common/unread_grey_dot/view.cljs b/src/quo/components/common/unread_grey_dot/view.cljs index a1877b0691..f05afe7739 100644 --- a/src/quo/components/common/unread_grey_dot/view.cljs +++ b/src/quo/components/common/unread_grey_dot/view.cljs @@ -1,10 +1,12 @@ (ns quo.components.common.unread-grey-dot.view (:require [quo.components.common.unread-grey-dot.style :as style] + [quo.theme] [react-native.core :as rn])) (defn unread-grey-dot [accessibility-label] - [rn/view - (cond-> {:style style/unread-grey-dot} - accessibility-label (assoc :accessibility-label accessibility-label :accessible true))]) + (let [theme (quo.theme/use-theme)] + [rn/view + (cond-> {:style (style/unread-grey-dot theme)} + accessibility-label (assoc :accessibility-label accessibility-label :accessible true))])) diff --git a/src/quo/components/community/banner/view.cljs b/src/quo/components/community/banner/view.cljs index 07eb36b3e1..c56de8fb6c 100644 --- a/src/quo/components/community/banner/view.cljs +++ b/src/quo/components/community/banner/view.cljs @@ -3,7 +3,7 @@ [quo.components.community.banner.style :as style] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn- card-title-and-description @@ -26,16 +26,15 @@ :size :paragraph-2} description]]]) -(defn view-internal - [{:keys [title description on-press accessibility-label banner style theme]}] - [rn/touchable-without-feedback - {:on-press on-press - :accessibility-label accessibility-label} - [rn/view {:style (merge (style/community-card theme) style)} - [card-title-and-description title description theme] - [rn/image - {:style style/discover-illustration - :source banner - :accessibility-label :discover-communities-illustration}]]]) - -(def view (theme/with-theme view-internal)) +(defn view + [{:keys [title description on-press accessibility-label banner style]}] + (let [theme (quo.theme/use-theme)] + [rn/touchable-without-feedback + {:on-press on-press + :accessibility-label accessibility-label} + [rn/view {:style (merge (style/community-card theme) style)} + [card-title-and-description title description theme] + [rn/image + {:style style/discover-illustration + :source banner + :accessibility-label :discover-communities-illustration}]]])) diff --git a/src/quo/components/community/channel_action/view.cljs b/src/quo/components/community/channel_action/view.cljs index 80e9408b33..aa1c6cb3a3 100644 --- a/src/quo/components/community/channel_action/view.cljs +++ b/src/quo/components/community/channel_action/view.cljs @@ -9,7 +9,7 @@ (defn view [{:keys [big? customization-color label counter-value icon on-press accessibility-label disabled?]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/community/community_card_view.cljs b/src/quo/components/community/community_card_view.cljs index 52d25b6600..542cfdfb53 100644 --- a/src/quo/components/community/community_card_view.cljs +++ b/src/quo/components/community/community_card_view.cljs @@ -7,33 +7,34 @@ [react-native.core :as rn])) (defn- loading-card-view - [{:keys [width theme]}] - [rn/view {:style (style/loading-card width theme)} - [rn/view (style/loading-cover-container theme)] - [rn/view (style/loading-content-container theme) - [rn/view (style/loading-avatar theme)] - [rn/view (style/loading-lock theme)] - [rn/view - {:style style/loading-card-content-container} - [rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}] - [rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}] - [rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]] - [rn/view - {:style style/loading-stats-container} - [rn/view {:style (style/loading-stat-circle theme 0)}] - [rn/view {:style (style/loading-stat-line theme 4)}] - [rn/view {:style (style/loading-stat-circle theme 12)}] - [rn/view {:style (style/loading-stat-line theme 4)}]] - [rn/view - {:style style/loading-tags-container} - [rn/view {:style (style/loading-tag theme 0)}] - [rn/view {:style (style/loading-tag theme 8)}] - [rn/view {:style (style/loading-tag theme 8)}]]]]) + [{:keys [width]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/loading-card width theme)} + [rn/view (style/loading-cover-container theme)] + [rn/view (style/loading-content-container theme) + [rn/view (style/loading-avatar theme)] + [rn/view (style/loading-lock theme)] + [rn/view + {:style style/loading-card-content-container} + [rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}] + [rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}] + [rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]] + [rn/view + {:style style/loading-stats-container} + [rn/view {:style (style/loading-stat-circle theme 0)}] + [rn/view {:style (style/loading-stat-line theme 4)}] + [rn/view {:style (style/loading-stat-circle theme 12)}] + [rn/view {:style (style/loading-stat-line theme 4)}]] + [rn/view + {:style style/loading-tags-container} + [rn/view {:style (style/loading-tag theme 0)}] + [rn/view {:style (style/loading-tag theme 8)}] + [rn/view {:style (style/loading-tag theme 8)}]]]])) (defn- community-card-view - [{:keys [community on-press width theme]}] - (let [{:keys [name description locked? images cover - status tokens tags]} community] + [{:keys [community on-press width]}] + (let [theme (quo.theme/use-theme) + {:keys [name description locked? images cover status tokens tags]} community] [rn/touchable-without-feedback {:accessibility-label :community-card-item :on-press on-press} @@ -68,10 +69,8 @@ [rn/view {:style (style/community-tags-position)} [community-view/community-tags {:tags tags}]]]]]]])) -(defn- internal-view +(defn view [{:keys [loading?] :as props}] (if-not loading? [community-card-view props] [loading-card-view props])) - -(def view (quo.theme/with-theme internal-view)) diff --git a/src/quo/components/community/community_detail_token_gating/view.cljs b/src/quo/components/community/community_detail_token_gating/view.cljs index 1db3df9cab..52b70ea564 100644 --- a/src/quo/components/community/community_detail_token_gating/view.cljs +++ b/src/quo/components/community/community_detail_token_gating/view.cljs @@ -6,6 +6,7 @@ [quo.components.tags.collectible-tag.view :as collectible-tag] [quo.components.tags.token-tag.view :as token-tag] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [utils.i18n :as i18n])) @@ -28,20 +29,21 @@ (defn- tokens-row [{:keys [tokens divider? first?]}] - [:<> - [rn/view - {:style (style/token-row first?)} - (map-indexed (fn [token-index token] - ^{:key (str "token-" token-index)} - [token-view token]) - tokens)] - (when-not divider? - [divider-label/view - {:container-style style/divider} - [text/text - {:size :label - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} - (string/lower-case (i18n/label :t/or))]])]) + (let [theme (quo.theme/use-theme)] + [:<> + [rn/view + {:style (style/token-row first?)} + (map-indexed (fn [token-index token] + ^{:key (str "token-" token-index)} + [token-view token]) + tokens)] + (when-not divider? + [divider-label/view + {:container-style style/divider} + [text/text + {:size :label + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (string/lower-case (i18n/label :t/or))]])])) (defn- role-view [{:keys [role tokens satisfied? role-text]}] diff --git a/src/quo/components/community/community_list_view.cljs b/src/quo/components/community/community_list_view.cljs index 91b63e4a5e..2fc3a594bc 100644 --- a/src/quo/components/community/community_list_view.cljs +++ b/src/quo/components/community/community_list_view.cljs @@ -38,110 +38,94 @@ unread-messages? [unread-grey-dot :unviewed-messages-public])]) -(defn- communities-list-view-item-internal - [{:keys [theme customization-color] :as props} - {:keys [name - locked? - status - muted - unread-messages? - unread-mentions-count - community-icon - tokens]}] - [rn/view - {:style (merge (style/community-card 16 theme) - {:margin-bottom 12})} - [rn/touchable-highlight - (merge {:style {:height 56 - :border-radius 16}} - props) - [rn/view {:style style/detail-container} - [rn/view (style/list-info-container) +(defn communities-list-view-item + [{:keys [customization-color] :as props} + {:keys [name locked? status muted unread-messages? unread-mentions-count community-icon tokens]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/community-card 16 theme) + {:margin-bottom 12})} + [rn/touchable-highlight + (merge {:style {:height 56 + :border-radius 16}} + props) + [rn/view {:style style/detail-container} + [rn/view (style/list-info-container) + [community-icon/community-icon + {:images community-icon} 32] + [rn/view + {:flex 1 + :margin-horizontal 12} + [text/text + {:weight :semi-bold + :size :paragraph-1 + :accessibility-label :community-name-text + :number-of-lines 1 + :ellipsize-mode :tail + :style {:color (when muted + (colors/theme-colors + colors/neutral-40 + colors/neutral-60 + theme))}} + name] + [community-view/community-stats-column + {:type :list-view}]] + (if (= status :gated) + [community-view/permission-tag-container + {:locked? locked? + :tokens tokens}] + [notification-view + {:customization-color customization-color + :theme theme + :muted? muted + :unread-mentions-count unread-mentions-count + :unread-messages? unread-messages?}])]]]])) + +(defn communities-membership-list-item + [{:keys [customization-color] :as props} + bottom-sheet? + {:keys [name muted unviewed-messages-count unviewed-mentions-count status + images tokens locked? style]}] + (let [theme (quo.theme/use-theme)] + [rn/touchable-highlight + (merge {:underlay-color (colors/theme-colors + colors/neutral-5 + colors/neutral-95 + theme) + :style {:border-radius 12 + :margin-left 12}} + props) + [rn/view (merge (style/membership-info-container) style) [community-icon/community-icon - {:images community-icon} 32] + {:images images} 32] [rn/view - {:flex 1 - :margin-horizontal 12} + {:flex 1 + :margin-left 12 + :justify-content :center} [text/text - {:weight :semi-bold - :size :paragraph-1 - :accessibility-label :community-name-text + {:accessibility-label :chat-name-text :number-of-lines 1 :ellipsize-mode :tail - :style {:color (when muted - (colors/theme-colors + :weight :semi-bold + :size :paragraph-1 + :style (when muted + {:color (colors/theme-colors colors/neutral-40 colors/neutral-60 - theme))}} - name] - [community-view/community-stats-column - {:type :list-view}]] - (if (= status :gated) - [community-view/permission-tag-container - {:locked? locked? - :tokens tokens}] - [notification-view - {:customization-color customization-color - :theme theme - :muted? muted - :unread-mentions-count unread-mentions-count - :unread-messages? unread-messages?}])]]]]) + theme)})} + name]] -(def communities-list-view-item (quo.theme/with-theme communities-list-view-item-internal)) - -(defn- communities-membership-list-item-internal - [{:keys [theme customization-color] :as props} - bottom-sheet? - {:keys [name - muted - unviewed-messages-count - unviewed-mentions-count - status - images - tokens - locked? - style]}] - [rn/touchable-highlight - (merge {:underlay-color (colors/theme-colors - colors/neutral-5 - colors/neutral-95 - theme) - :style {:border-radius 12 - :margin-left 12}} - props) - [rn/view (merge (style/membership-info-container) style) - [community-icon/community-icon - {:images images} 32] - [rn/view - {:flex 1 - :margin-left 12 - :justify-content :center} - [text/text - {:accessibility-label :chat-name-text - :number-of-lines 1 - :ellipsize-mode :tail - :weight :semi-bold - :size :paragraph-1 - :style (when muted - {:color (colors/theme-colors - colors/neutral-40 - colors/neutral-60 - theme)})} - name]] - - [rn/view - {:justify-content :center - :margin-right (when bottom-sheet? - 16)} - (if (= status :gated) - [community-view/permission-tag-container - {:locked? locked? - :tokens tokens}] - [notification-view - {:theme theme - :customization-color customization-color - :muted? muted - :unread-mentions-count unviewed-mentions-count - :unread-messages? (pos? unviewed-messages-count)}])]]]) - -(def communities-membership-list-item (quo.theme/with-theme communities-membership-list-item-internal)) + [rn/view + {:justify-content :center + :margin-right (when bottom-sheet? + 16)} + (if (= status :gated) + [community-view/permission-tag-container + {:locked? locked? + :tokens tokens}] + [notification-view + {:theme theme + :customization-color customization-color + :muted? muted + :unread-mentions-count unviewed-mentions-count + :unread-messages? (pos? unviewed-messages-count)}])]]])) diff --git a/src/quo/components/community/community_stat/view.cljs b/src/quo/components/community/community_stat/view.cljs index 68e6a99123..218bf83bb0 100644 --- a/src/quo/components/community/community_stat/view.cljs +++ b/src/quo/components/community/community_stat/view.cljs @@ -7,20 +7,19 @@ [react-native.core :as rn] utils.money)) -(defn view-internal - [{:keys [value icon theme style accessibility-label text-size]}] - [rn/view - {:style (merge style/container style) - :accessibility-label accessibility-label} - [quo.icons/icon icon - {:size 16 - :container-style {:align-items :center - :justify-content :center} - :resize-mode :center - :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}] - [quo.text/text - {:size (or text-size :paragraph-1) - :weight :regular - :style (style/text theme)} (utils.money/format-amount value)]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [value icon style accessibility-label text-size]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge style/container style) + :accessibility-label accessibility-label} + [quo.icons/icon icon + {:size 16 + :container-style {:align-items :center + :justify-content :center} + :resize-mode :center + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}] + [quo.text/text + {:size (or text-size :paragraph-1) + :weight :regular + :style (style/text theme)} (utils.money/format-amount value)]])) diff --git a/src/quo/components/community/community_view.cljs b/src/quo/components/community/community_view.cljs index ebdc3ef564..65c159e125 100644 --- a/src/quo/components/community/community_view.cljs +++ b/src/quo/components/community/community_view.cljs @@ -6,7 +6,7 @@ [quo.components.tags.permission-tag :as permission] [quo.components.tags.tag :as tag] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture])) @@ -70,16 +70,15 @@ :style {:margin-top (if (= size :large) 8 2)}} description])]) -(defn- permission-tag-container-internal - [{:keys [locked? blur? tokens on-press theme]}] - [permission/tag - {:accessibility-label :permission-tag - :background-color (if (and (= :dark theme) blur?) - colors/white-opa-10 - (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)) - :locked? locked? - :tokens tokens - :size 24 - :on-press on-press}]) - -(def permission-tag-container (theme/with-theme permission-tag-container-internal)) +(defn permission-tag-container + [{:keys [locked? blur? tokens on-press]}] + (let [theme (quo.theme/use-theme)] + [permission/tag + {:accessibility-label :permission-tag + :background-color (if (and (= :dark theme) blur?) + colors/white-opa-10 + (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)) + :locked? locked? + :tokens tokens + :size 24 + :on-press on-press}])) diff --git a/src/quo/components/community/token_gating.cljs b/src/quo/components/community/token_gating.cljs index 18fe8d9464..0d7254127d 100644 --- a/src/quo/components/community/token_gating.cljs +++ b/src/quo/components/community/token_gating.cljs @@ -24,22 +24,21 @@ purchasable? :add)}]]) tokens)]) -(defn- internal-view - [{:keys [tokens padding? theme]}] - [:<> - (if (> (count tokens) 1) - (map-indexed - (fn [token-requirement-index tokens] - ^{:key token-requirement-index} - [rn/view {:margin-bottom 12} - (when-not (= token-requirement-index 0) - [rn/view {:style (style/token-row-or-border theme)}]) - (when-not (= token-requirement-index 0) - [text/text - {:style (style/token-row-or-text padding? theme) - :size :label} (string/lower-case (i18n/label :t/or))]) - [token-requirement-list-row tokens padding?]]) - tokens) - [token-requirement-list-row (first tokens) padding?])]) - -(def token-requirement-list (quo.theme/with-theme internal-view)) +(defn token-requirement-list + [{:keys [tokens padding?]}] + (let [theme (quo.theme/use-theme)] + [:<> + (if (> (count tokens) 1) + (map-indexed + (fn [token-requirement-index tokens] + ^{:key token-requirement-index} + [rn/view {:margin-bottom 12} + (when-not (= token-requirement-index 0) + [rn/view {:style (style/token-row-or-border theme)}]) + (when-not (= token-requirement-index 0) + [text/text + {:style (style/token-row-or-text padding? theme) + :size :label} (string/lower-case (i18n/label :t/or))]) + [token-requirement-list-row tokens padding?]]) + tokens) + [token-requirement-list-row (first tokens) padding?])])) diff --git a/src/quo/components/counter/collectible_counter/style.cljs b/src/quo/components/counter/collectible_counter/style.cljs index 53fc548e5f..efcbb53b03 100644 --- a/src/quo/components/counter/collectible_counter/style.cljs +++ b/src/quo/components/counter/collectible_counter/style.cljs @@ -3,14 +3,14 @@ [quo.foundations.colors :as colors])) (defn- get-background-color - [{:keys [status theme]}] + [{:keys [status]} theme] (case status :default (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme) :error (colors/resolve-color :danger theme 10) (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme))) (defn- get-container-border-styles - [{:keys [status theme]}] + [{:keys [status]} theme] (when (= status :error) {:border-color (colors/resolve-color :danger theme 20) :border-width 1})) @@ -29,17 +29,17 @@ style-size-32))) (defn container - [props] + [props theme] (merge {:align-self :flex-start :flex-direcrion :row :justify-content :center :border-radius 999 - :background-color (get-background-color props)} - (get-container-border-styles props) + :background-color (get-background-color props theme)} + (get-container-border-styles props theme) (get-container-styles-by-size props))) (defn- get-text-color - [{:keys [status theme]}] + [{:keys [status]} theme] (case status :default (colors/theme-colors colors/neutral-100 colors/white theme) :error (colors/resolve-color :danger theme) @@ -53,5 +53,5 @@ :paragraph-1)) (defn text - [props] - {:color (get-text-color props)}) + [props theme] + {:color (get-text-color props theme)}) diff --git a/src/quo/components/counter/collectible_counter/view.cljs b/src/quo/components/counter/collectible_counter/view.cljs index 65cb2a029d..9dc0fea23e 100644 --- a/src/quo/components/counter/collectible_counter/view.cljs +++ b/src/quo/components/counter/collectible_counter/view.cljs @@ -15,26 +15,24 @@ [:value {:optional true} [:maybe [:or :string :int]]] [:status {:optional true} [:maybe :keyword]] [:size {:optional true} [:maybe [:enum :size-32 :size-24]]] - [:accessibility-label {:optional true} [:maybe :keyword]] - [:theme :schema.common/theme]]]] + [:accessibility-label {:optional true} [:maybe :keyword]]]]] :any]) (defn- view-internal [{:keys [value accessibility-label container-style] :as props}] - (let [default-props {:status :default + (let [theme (quo.theme/use-theme) + default-props {:status :default :size :size-32} props (merge default-props props)] [rn/view {:accessible true :accessibility-label (or accessibility-label :collectible-counter) - :style (merge (style/container props) container-style)} + :style (merge (style/container props theme) container-style)} [text/text {:weight :medium :size (style/get-text-size props) - :style (style/text props)} + :style (style/text props theme)} value]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal ?schema))) +(def view (schema/instrument #'view-internal ?schema)) diff --git a/src/quo/components/counter/counter/view.cljs b/src/quo/components/counter/counter/view.cljs index fdaedc5a82..6874fdabd8 100644 --- a/src/quo/components/counter/counter/view.cljs +++ b/src/quo/components/counter/counter/view.cljs @@ -7,11 +7,12 @@ [react-native.core :as rn] [utils.number])) -(defn- view-internal - [{:keys [type customization-color theme container-style accessibility-label max-value] - :or {max-value 99 customization-color :blue theme :dark}} +(defn view + [{:keys [type customization-color container-style accessibility-label max-value] + :or {max-value 99 customization-color :blue}} value] - (let [type (or type :default) + (let [theme (quo.theme/use-theme) + type (or type :default) value (utils.number/parse-int value) label (if (> value max-value) (str max-value "+") @@ -33,5 +34,3 @@ :size :label :style (when (= type :default) {:color colors/white})} label]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/counter/step/view.cljs b/src/quo/components/counter/step/view.cljs index 2a5797865e..199459c530 100644 --- a/src/quo/components/counter/step/view.cljs +++ b/src/quo/components/counter/step/view.cljs @@ -15,14 +15,14 @@ [:accessibility-label {:optional true} [:maybe :keyword]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:in-blur-view? {:optional true} [:maybe :boolean]] - [:theme :schema.common/theme] [:type {:optional true} [:enum :active :complete :neutral]]]] [:value [:maybe [:or :string :int]]]] :any]) (defn- view-internal - [{:keys [type accessibility-label theme in-blur-view? customization-color]} value] - (let [type (or type :neutral) + [{:keys [type accessibility-label in-blur-view? customization-color]} value] + (let [theme (quo.theme/use-theme) + type (or type :neutral) value (utils.number/parse-int value) label (str value) size (count label)] @@ -40,6 +40,4 @@ :style {:color (style/text-color type theme)}} label]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal ?schema))) +(def view (schema/instrument #'view-internal ?schema)) diff --git a/src/quo/components/dividers/date.cljs b/src/quo/components/dividers/date.cljs index 50b3e405b5..9d8cb7a9a6 100644 --- a/src/quo/components/dividers/date.cljs +++ b/src/quo/components/dividers/date.cljs @@ -3,21 +3,25 @@ [quo.components.common.separator.view :as separator] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn])) (defn date [value] - [rn/view - {:padding-top 8 - :padding-bottom 12 - :padding-right 20 - :padding-left 60} - [text/text - {:weight :medium - :accessibility-label :divider-date-text - :size :label - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40) - :text-transform :capitalize - :margin-bottom 4}} - value] - [separator/separator]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:padding-top 8 + :padding-bottom 12 + :padding-right 20 + :padding-left 60} + [text/text + {:weight :medium + :accessibility-label :divider-date-text + :size :label + :style {:color (colors/theme-colors colors/neutral-50 + colors/neutral-40 + theme) + :text-transform :capitalize + :margin-bottom 4}} + value] + [separator/separator]])) diff --git a/src/quo/components/dividers/divider_label/view.cljs b/src/quo/components/dividers/divider_label/view.cljs index 5207e3c441..053b4eb4d0 100644 --- a/src/quo/components/dividers/divider_label/view.cljs +++ b/src/quo/components/dividers/divider_label/view.cljs @@ -20,42 +20,35 @@ - `container-style` - Style applied to the container view. label - String or markdown text component to display in the divider label." - [{:keys [counter? - counter-value - chevron - chevron-icon - tight? - blur? - theme - on-press - container-style] + [{:keys [counter? counter-value chevron chevron-icon tight? blur? on-press container-style] :or {tight? true}} label] - [rn/pressable - {:on-press on-press - :accessibility-label :divider-label - :style (merge (style/container blur? tight? chevron theme) - container-style)} - [rn/view - {:style (style/content chevron)} - (when chevron - [icons/icon (or chevron-icon :i/chevron-right) - {:color (style/get-content-color blur? theme) - :container-style {(if (= chevron :right) - :margin-left - :margin-right) - 2}}]) - [text/text - {:size :paragraph-2 - :weight :medium - :style (style/text blur? theme)} - label]] - (when counter? - [counter/view - {:type (if blur? :secondary :grey) - :container-style {:margin-left 2}} - counter-value])]) + (let [theme (quo.theme/use-theme)] + [rn/pressable + {:on-press on-press + :accessibility-label :divider-label + :style (merge (style/container blur? tight? chevron theme) + container-style)} + [rn/view + {:style (style/content chevron)} + (when chevron + [icons/icon (or chevron-icon :i/chevron-right) + {:color (style/get-content-color blur? theme) + :container-style {(if (= chevron :right) + :margin-left + :margin-right) + 2}}]) + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/text blur? theme)} + label]] + (when counter? + [counter/view + {:type (if blur? :secondary :grey) + :container-style {:margin-left 2}} + counter-value])])) (defn view - ([_ _] (quo.theme/with-theme view-internal)) + ([props label] [view-internal props label]) ([label] [view {} label])) diff --git a/src/quo/components/dividers/divider_line/style.cljs b/src/quo/components/dividers/divider_line/style.cljs index aaef0944af..bfa71b85d1 100644 --- a/src/quo/components/dividers/divider_line/style.cljs +++ b/src/quo/components/dividers/divider_line/style.cljs @@ -3,7 +3,7 @@ [quo.foundations.colors :as colors])) (defn divider-line - [{:keys [blur? container-style theme]}] + [{:keys [blur? container-style]} theme] (merge {:border-color (if blur? (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) diff --git a/src/quo/components/dividers/divider_line/view.cljs b/src/quo/components/dividers/divider_line/view.cljs index d9b57bf661..3af7ed2fd2 100644 --- a/src/quo/components/dividers/divider_line/view.cljs +++ b/src/quo/components/dividers/divider_line/view.cljs @@ -4,8 +4,7 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal +(defn view [props] - [rn/view {:style (style/divider-line props)}]) - -(def view (quo.theme/with-theme view-internal)) + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/divider-line props theme)}])) diff --git a/src/quo/components/dividers/new_messages.cljs b/src/quo/components/dividers/new_messages.cljs index 53cab96b2e..4e09da86af 100644 --- a/src/quo/components/dividers/new_messages.cljs +++ b/src/quo/components/dividers/new_messages.cljs @@ -6,10 +6,11 @@ [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient])) -(defn- view-internal +(defn view "new-messages params - label, customization-color, theme" - [{:keys [label customization-color theme] :or {customization-color :blue}}] - (let [bg-color (colors/resolve-color customization-color theme 5) + [{:keys [label customization-color] :or {customization-color :blue}}] + (let [theme (quo.theme/use-theme) + bg-color (colors/resolve-color customization-color theme 5) text-color (colors/resolve-color customization-color theme)] [linear-gradient/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"] @@ -24,5 +25,3 @@ :weight :medium :style {:color text-color}} label]]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/drawers/action_drawers/view.cljs b/src/quo/components/drawers/action_drawers/view.cljs index b34acdbd6c..22786fdb59 100644 --- a/src/quo/components/drawers/action_drawers/view.cljs +++ b/src/quo/components/drawers/action_drawers/view.cljs @@ -26,88 +26,73 @@ [rn/view (dissoc props :on-press) child] [rn/touchable-highlight props child])) -(defn- action-internal - [{:keys [icon - label - sub-label - right-icon - right-text - danger? - disabled? - on-press - add-divider? - theme - accessibility-label - icon-color - no-icon-color? - state - customization-color - blur?]}] - [:<> - (when add-divider? - [divider theme blur?]) - [maybe-pressable disabled? - {:accessibility-label accessibility-label - :style (style/container {:sub-label sub-label - :disabled? disabled? - :state state - :customization-color customization-color - :blur? blur? - :theme theme}) - :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme) - :on-press on-press} - [rn/view - {:style (style/row-container sub-label)} - (when icon +(defn action + [{:keys [icon label sub-label right-icon right-text danger? disabled? on-press add-divider? + accessibility-label icon-color no-icon-color? state customization-color blur?]}] + (let [theme (quo.theme/use-theme)] + [:<> + (when add-divider? + [divider theme blur?]) + [maybe-pressable disabled? + {:accessibility-label accessibility-label + :style (style/container {:sub-label sub-label + :disabled? disabled? + :state state + :customization-color customization-color + :blur? blur? + :theme theme}) + :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme) + :on-press on-press} + [rn/view + {:style (style/row-container sub-label)} + (when icon + [rn/view + {:accessibility-label :left-icon-for-action + :accessible true + :style (style/left-icon sub-label)} + [icon/icon icon + {:color (or icon-color (get-icon-color danger? theme)) + :no-color no-icon-color? + :size 20}]]) [rn/view - {:accessibility-label :left-icon-for-action - :accessible true - :style (style/left-icon sub-label)} - [icon/icon icon - {:color (or icon-color (get-icon-color danger? theme)) - :no-color no-icon-color? - :size 20}]]) - [rn/view - {:style style/text-container} - [text/text - {:size :paragraph-1 - :weight :medium - :style {:color - (cond - danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme) - :else (colors/theme-colors colors/neutral-100 colors/white theme))}} - label] - (when sub-label + {:style style/text-container} [text/text - {:size :paragraph-2 - :style {:color - (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - sub-label])] - (when (or right-text right-icon (= state :selected)) - [rn/view {:style style/right-side-container} - (when right-text + {:size :paragraph-1 + :weight :medium + :style {:color + (cond + danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme) + :else (colors/theme-colors colors/neutral-100 colors/white theme))}} + label] + (when sub-label [text/text - {:accessibility-label :right-text-for-action - :size :paragraph-1 - :style (style/right-text theme)} - right-text]) - (when right-icon - [rn/view - {:style style/right-icon - :accessible true - :accessibility-label :right-icon-for-action} - [icon/icon right-icon - {:color (get-icon-color danger? theme) - :size 20}]]) - (when (= state :selected) - [rn/view {:style style/right-icon} - [icon/icon :i/check - {:color (if blur? - colors/white - (colors/resolve-color customization-color theme)) - :size 20}]])])]]]) - -(def ^:private action (quo.theme/with-theme action-internal)) + {:size :paragraph-2 + :style {:color + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + sub-label])] + (when (or right-text right-icon (= state :selected)) + [rn/view {:style style/right-side-container} + (when right-text + [text/text + {:accessibility-label :right-text-for-action + :size :paragraph-1 + :style (style/right-text theme)} + right-text]) + (when right-icon + [rn/view + {:style style/right-icon + :accessible true + :accessibility-label :right-icon-for-action} + [icon/icon right-icon + {:color (get-icon-color danger? theme) + :size 20}]]) + (when (= state :selected) + [rn/view {:style style/right-icon} + [icon/icon :i/check + {:color (if blur? + colors/white + (colors/resolve-color customization-color theme)) + :size 20}]])])]]])) (defn action-drawer [sections] diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index 46d97a22c1..fdde7f26c9 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/src/quo/components/drawers/bottom_actions/view.cljs @@ -26,7 +26,6 @@ [:button-two-label {:optional true} [:maybe :string]] [:button-one-props {:optional true} [:maybe :map]] [:button-two-props {:optional true} [:maybe :map]] - [:theme :schema.common/theme] [:scroll? {:optional true} [:maybe :boolean]] [:blur? {:optional true} [:maybe :boolean]] [:container-style {:optional true} [:maybe :map]]]]] @@ -40,58 +39,57 @@ (defn- view-internal [{:keys [actions description description-text description-top-text error-message role button-one-label - button-two-label blur? button-one-props button-two-props theme scroll? container-style]}] - [rn/view - {:style (merge (style/container scroll? blur? theme) container-style)} - (when (= description :top-error) - [rn/view {:style style/error-message} - [icon/icon - :i/alert - {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) - :size 16}] - [text/text - {:size :paragraph-2 - :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}} - error-message]]) + button-two-label blur? button-one-props button-two-props scroll? container-style]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/container scroll? blur? theme) container-style)} + (when (= description :top-error) + [rn/view {:style style/error-message} + [icon/icon + :i/alert + {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) + :size 16}] + [text/text + {:size :paragraph-2 + :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}} + error-message]]) - (when (and (= description :top) role) - [rn/view {:style style/description-top} - [text/text - {:size :paragraph-2 - :style (style/description-top-text scroll? blur? theme)} - (or description-top-text (i18n/label :t/eligible-to-join-as))] - [context-tag/view - {:type :icon - :size 24 - :icon (role role-icon) - :blur? blur? - :context (i18n/label (keyword "t" role))}]]) + (when (and (= description :top) role) + [rn/view {:style style/description-top} + [text/text + {:size :paragraph-2 + :style (style/description-top-text scroll? blur? theme)} + (or description-top-text (i18n/label :t/eligible-to-join-as))] + [context-tag/view + {:type :icon + :size 24 + :icon (role role-icon) + :blur? blur? + :context (i18n/label (keyword "t" role))}]]) - [rn/view {:style style/buttons-container} - (when (= actions :two-actions) + [rn/view {:style style/buttons-container} + (when (= actions :two-actions) + [button/button + (merge + {:size 40 + :background (when (or blur? scroll?) :blur) + :container-style style/button-container + :theme theme + :accessibility-label :button-two} + button-two-props) + button-two-label]) [button/button (merge {:size 40 - :background (when (or blur? scroll?) :blur) :container-style style/button-container + :background (when (or blur? scroll?) :blur) :theme theme - :accessibility-label :button-two} - button-two-props) - button-two-label]) - [button/button - (merge - {:size 40 - :container-style style/button-container - :background (when (or blur? scroll?) :blur) - :theme theme - :accessibility-label :button-one} - button-one-props) - button-one-label]] - (when (= description :bottom) - [text/text - {:size :paragraph-2 - :style (style/description-bottom scroll? blur? theme)} description-text])]) + :accessibility-label :button-one} + button-one-props) + button-one-label]] + (when (= description :bottom) + [text/text + {:size :paragraph-2 + :style (style/description-bottom scroll? blur? theme)} description-text])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal ?schema))) +(def view (schema/instrument #'view-internal ?schema)) diff --git a/src/quo/components/drawers/documentation_drawers/view.cljs b/src/quo/components/drawers/documentation_drawers/view.cljs index 3e0d598262..f2f7b692cc 100644 --- a/src/quo/components/drawers/documentation_drawers/view.cljs +++ b/src/quo/components/drawers/documentation_drawers/view.cljs @@ -7,7 +7,7 @@ [react-native.core :as rn] [react-native.gesture :as gesture])) -(defn- view-internal +(defn view "Options - `title` Title text - `show-button?` Show button @@ -17,29 +17,28 @@ - `shell?` use shell theme `content` Content of the drawer " - [{:keys [title show-button? on-press-button button-label button-icon theme shell?]} content] - [gesture/scroll-view - {:style style/outer-container - :always-bounce-vertical false - :content-inset-adjustment-behavior :never} - [rn/view {:style style/container} - [text/text - {:size :heading-2 - :accessibility-label :documentation-drawer-title - :style (style/title theme) - :weight :semi-bold} - title] - [rn/view {:style style/content :accessibility-label :documentation-drawer-content} - content - (when show-button? - [button/button - {:size 24 - :type :outline - :container-style {:margin-top 16} - :background (when shell? :blur) - :on-press on-press-button - :accessibility-label :documentation-drawer-button - :icon-right button-icon} - button-label])]]]) - -(def view (quo.theme/with-theme view-internal)) + [{:keys [title show-button? on-press-button button-label button-icon shell?]} content] + (let [theme (quo.theme/use-theme)] + [gesture/scroll-view + {:style style/outer-container + :always-bounce-vertical false + :content-inset-adjustment-behavior :never} + [rn/view {:style style/container} + [text/text + {:size :heading-2 + :accessibility-label :documentation-drawer-title + :style (style/title theme) + :weight :semi-bold} + title] + [rn/view {:style style/content :accessibility-label :documentation-drawer-content} + content + (when show-button? + [button/button + {:size 24 + :type :outline + :container-style {:margin-top 16} + :background (when shell? :blur) + :on-press on-press-button + :accessibility-label :documentation-drawer-button + :icon-right button-icon} + button-label])]]])) diff --git a/src/quo/components/drawers/drawer_action/view.cljs b/src/quo/components/drawers/drawer_action/view.cljs index c0af3dad54..7f8cdad3d4 100644 --- a/src/quo/components/drawers/drawer_action/view.cljs +++ b/src/quo/components/drawers/drawer_action/view.cljs @@ -5,7 +5,7 @@ [quo.components.icon :as icon] [quo.components.markdown.text :as text] [quo.components.selectors.selectors.view :as selectors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [schema.core :as schema])) @@ -14,7 +14,7 @@ customization-color blur?] :or {customization-color :blue blur? false}}] - (let [theme (theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/drawers/drawer_top/view.cljs b/src/quo/components/drawers/drawer_top/view.cljs index b200c706e1..5ecc2c3fcc 100644 --- a/src/quo/components/drawers/drawer_top/view.cljs +++ b/src/quo/components/drawers/drawer_top/view.cljs @@ -192,54 +192,50 @@ colors/white-opa-40 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])])) -(defn- view-internal - [{:keys [title title-icon type theme description blur? community-name community-logo button-icon - account-name emoji context-tag-type button-type - on-button-press - on-button-long-press - button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar - profile-picture keycard? networks label full-name - container-style]}] - [rn/view {:style (merge style/container container-style)} - (when (left-image-supported-types type) - [rn/view {:style style/left-container} - [left-image - {:type type - :customization-color customization-color - :account-avatar-emoji account-avatar-emoji - :account-avatar-type account-avatar-type - :icon-avatar icon-avatar - :profile-picture profile-picture}]]) - [rn/view {:style style/body-container} - [left-title - {:type type - :label label - :title title - :title-icon title-icon - :theme theme - :blur? blur?}] - [subtitle - {:type type - :theme theme - :blur? blur? - :keycard? keycard? - :networks networks - :description description - :community-name community-name - :community-logo community-logo - :context-tag-type context-tag-type - :customization-color customization-color - :account-name account-name - :emoji emoji - :full-name full-name - :profile-picture profile-picture}]] - [right-icon - {:theme theme - :type type - :button-type button-type - :on-button-press on-button-press - :on-button-long-press on-button-long-press - :button-disabled? button-disabled? - :button-icon button-icon}]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [title title-icon type description blur? community-name community-logo button-icon + account-name emoji context-tag-type button-type container-style + on-button-press on-button-long-press profile-picture keycard? networks label full-name + button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (merge style/container container-style)} + (when (left-image-supported-types type) + [rn/view {:style style/left-container} + [left-image + {:type type + :customization-color customization-color + :account-avatar-emoji account-avatar-emoji + :account-avatar-type account-avatar-type + :icon-avatar icon-avatar + :profile-picture profile-picture}]]) + [rn/view {:style style/body-container} + [left-title + {:type type + :label label + :title title + :title-icon title-icon + :theme theme + :blur? blur?}] + [subtitle + {:type type + :theme theme + :blur? blur? + :keycard? keycard? + :networks networks + :description description + :community-name community-name + :community-logo community-logo + :context-tag-type context-tag-type + :customization-color customization-color + :account-name account-name + :emoji emoji + :full-name full-name + :profile-picture profile-picture}]] + [right-icon + {:theme theme + :type type + :button-type button-type + :on-button-press on-button-press + :on-button-long-press on-button-long-press + :button-disabled? button-disabled? + :button-icon button-icon}]])) diff --git a/src/quo/components/drawers/permission_context/view.cljs b/src/quo/components/drawers/permission_context/view.cljs index bb67ca910a..ef5ae1b298 100644 --- a/src/quo/components/drawers/permission_context/view.cljs +++ b/src/quo/components/drawers/permission_context/view.cljs @@ -69,12 +69,12 @@ (defn- view-internal [{:keys [on-press blur? container-style] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) context-type (:type props)] [shadow/view {:offset [0 4] :paint-inside false - :start-color (colors/theme-colors colors/neutral-100-opa-8 colors/neutral-100-opa-60) + :start-color (colors/theme-colors colors/neutral-100-opa-8 colors/neutral-100-opa-60 theme) :distance 25 :style {:align-self :stretch}} [rn/view {:style (merge (style/container blur? theme) container-style)} @@ -83,7 +83,7 @@ {:style style/blur-container :blur-amount 20 :blur-radius (if platform/ios? 20 10) - :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur) + :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur theme) :blur-type :transparent}]) [button/button {:type :ghost diff --git a/src/quo/components/dropdowns/dropdown/properties.cljs b/src/quo/components/dropdowns/dropdown/properties.cljs index a727214232..8cd447bd40 100644 --- a/src/quo/components/dropdowns/dropdown/properties.cljs +++ b/src/quo/components/dropdowns/dropdown/properties.cljs @@ -109,7 +109,7 @@ (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}) (defn get-colors - [{:keys [customization-color theme type state background size]}] + [{:keys [customization-color type state background size]} theme] (let [active? (= state :active)] (cond (and (= background :photo) (= type :grey)) (grey-photo theme active? size) diff --git a/src/quo/components/dropdowns/dropdown/view.cljs b/src/quo/components/dropdowns/dropdown/view.cljs index 655e3b8d04..e1479144b6 100644 --- a/src/quo/components/dropdowns/dropdown/view.cljs +++ b/src/quo/components/dropdowns/dropdown/view.cljs @@ -5,12 +5,24 @@ [quo.components.icon :as icon] [quo.components.markdown.text :as text] [quo.foundations.customization-colors :as customization-colors] - [quo.theme :as theme] + [quo.theme] [react-native.blur :as blur] [react-native.core :as rn])) -(defn- view-internal - [{:keys [type size state background customization-color theme on-press icon-name icon? emoji? +(defn view + "Props: + - type: :outline |:grey (default) | :ghost | :customization + - size: :size-40 (default) | :size-32 | :size-24 + - state: :default (default) | :active | :disabled + - emoji?: boolean + - icon?: boolean + - no-icon-color?: boolean + - background: :blur | :photo (optional) + - icon-name: keyword + - on-press: function + + Child: string - used as label or emoji (for emoji only)" + [{:keys [type size state background customization-color on-press icon-name icon? emoji? accessibility-label no-icon-color?] :or {type :grey size :size-40 @@ -20,11 +32,12 @@ icon-name :i/placeholder} :as props} text] - (let [{:keys [icon-size text-size emoji-size border-radius] + (let [theme (quo.theme/use-theme) + {:keys [icon-size text-size emoji-size border-radius] :as size-properties} (properties/sizes size) {:keys [left-icon-color right-icon-color right-icon-color-2 label-color blur-type blur-overlay-color] - :as colors} (properties/get-colors props) + :as colors} (properties/get-colors props theme) right-icon (if (= state :active) :i/pullup :i/dropdown) customization-type? (= type :customization) show-blur-background? (and (= background :photo) @@ -73,18 +86,3 @@ :accessibility-label :right-icon :color right-icon-color :color-2 right-icon-color-2}]])])) - -(def view - "Props: - - type: :outline |:grey (default) | :ghost | :customization - - size: :size-40 (default) | :size-32 | :size-24 - - state: :default (default) | :active | :disabled - - emoji?: boolean - - icon?: boolean - - no-icon-color?: boolean - - background: :blur | :photo (optional) - - icon-name: keyword - - on-press: function - - Child: string - used as label or emoji (for emoji only)" - (theme/with-theme view-internal)) diff --git a/src/quo/components/dropdowns/dropdown_input/view.cljs b/src/quo/components/dropdowns/dropdown_input/view.cljs index bdf74d6f9d..af5c5d9aeb 100644 --- a/src/quo/components/dropdowns/dropdown_input/view.cljs +++ b/src/quo/components/dropdowns/dropdown_input/view.cljs @@ -4,13 +4,19 @@ [quo.components.dropdowns.dropdown-input.style :as style] [quo.components.icon :as icon] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [state theme on-press icon? - label? blur? - accessibility-label header-label] +(defn view + "Props: + - state: :default (default) | :active | :disabled + - label: string + - header-label: string + - icon?: boolean + - label?: boolean + - blur?: boolean + - on-press: function" + [{:keys [state on-press icon? label? blur? accessibility-label header-label] :or {state :default icon? true label? true @@ -18,7 +24,8 @@ header-label "Label"} :as props} label] - (let [{:keys [left-icon-color right-icon-color right-icon-color-2] + (let [theme (quo.theme/use-theme) + {:keys [left-icon-color right-icon-color right-icon-color-2] :as colors} (properties/get-colors props) right-icon (if (= state :active) :i/pullup :i/dropdown)] [rn/view @@ -55,14 +62,3 @@ :accessibility-label :right-icon :color right-icon-color :color-2 right-icon-color-2}]]])) - -(def view - "Props: - - state: :default (default) | :active | :disabled - - label: string - - header-label: string - - icon?: boolean - - label?: boolean - - blur?: boolean - - on-press: function" - (theme/with-theme view-internal)) diff --git a/src/quo/components/dropdowns/network_dropdown/view.cljs b/src/quo/components/dropdowns/network_dropdown/view.cljs index 6bce73abdc..adf9b34aef 100644 --- a/src/quo/components/dropdowns/network_dropdown/view.cljs +++ b/src/quo/components/dropdowns/network_dropdown/view.cljs @@ -7,7 +7,7 @@ (defn view [{:keys [on-press state] :as props} networks] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/empty_state/empty_state/view.cljs b/src/quo/components/empty_state/empty_state/view.cljs index 7c27e3818a..996dac9138 100644 --- a/src/quo/components/empty_state/empty_state/view.cljs +++ b/src/quo/components/empty_state/empty_state/view.cljs @@ -3,11 +3,10 @@ [quo.components.buttons.button.view :as button] [quo.components.empty-state.empty-state.styles :as styles] [quo.components.markdown.text :as text] - [quo.theme :as theme] [react-native.core :as rn] [react-native.fast-image :as fast-image])) -(defn- empty-state-internal +(defn empty-state [{:keys [customization-color image title description blur? placeholder? container-style] upper-button :upper-button lower-button :lower-button @@ -50,5 +49,3 @@ :background :blur :on-press lower-button-on-press} lower-button-text])])]) - -(def empty-state (theme/with-theme empty-state-internal)) diff --git a/src/quo/components/gradient/gradient_cover/view.cljs b/src/quo/components/gradient/gradient_cover/view.cljs index 5d2ae3dae1..2d610b31f8 100644 --- a/src/quo/components/gradient/gradient_cover/view.cljs +++ b/src/quo/components/gradient/gradient_cover/view.cljs @@ -2,10 +2,9 @@ (:require [quo.components.gradient.gradient-cover.style :as style] [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] [react-native.linear-gradient :as linear-gradient])) -(defn- view-internal +(defn view [{:keys [customization-color opacity container-style height] :or {customization-color :blue}}] ;; `when` added for safety, `linear-gradient` will break if `nil` is passed, the `:or` @@ -21,5 +20,3 @@ :end {:x 0 :y 1} :style (merge (style/root-container opacity height) container-style)}]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/graph/interactive_graph/view.cljs b/src/quo/components/graph/interactive_graph/view.cljs index 94c997bec7..dbed59abec 100644 --- a/src/quo/components/graph/interactive_graph/view.cljs +++ b/src/quo/components/graph/interactive_graph/view.cljs @@ -49,7 +49,7 @@ [{:keys [data state customization-color reference-value reference-prefix decimal-separator] :or {reference-prefix "$" decimal-separator :dot}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [inspecting? set-inspecting] (rn/use-state false) data (if (> (count data) max-data-points) (utils/downsample-data data max-data-points) diff --git a/src/quo/components/graph/wallet_graph/view.cljs b/src/quo/components/graph/wallet_graph/view.cljs index 93758fdc52..197c06a882 100644 --- a/src/quo/components/graph/wallet_graph/view.cljs +++ b/src/quo/components/graph/wallet_graph/view.cljs @@ -31,9 +31,10 @@ (colors/custom-color color-keyword 60) theme))) -(defn- view-internal - [{:keys [data state time-frame customization-color theme]}] - (let [max-data-points (time-frame->max-data-points time-frame) +(defn view + [{:keys [data state time-frame customization-color]}] + (let [theme (quo.theme/use-theme) + max-data-points (time-frame->max-data-points time-frame) data (if (and (not= time-frame :empty) (> (count data) max-data-points)) (utils/downsample-data data max-data-points) data) @@ -41,7 +42,7 @@ width (:width (rn/get-window)) line-color (get-line-color customization-color state theme) gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)] - fill-color (colors/theme-colors colors/white colors/neutral-95)] + fill-color (colors/theme-colors colors/white colors/neutral-95 theme)] (if (= time-frame :empty) [fast-image/fast-image {:style style/empty-state @@ -78,5 +79,3 @@ :y-axis-label-width 0.01 :labels-extra-height -36 :x-axis-label-text-style style/x-axis-label-text-style}]]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/header.cljs b/src/quo/components/header.cljs index 0b26f73c17..2696e44c67 100644 --- a/src/quo/components/header.cljs +++ b/src/quo/components/header.cljs @@ -139,7 +139,7 @@ background] :or {title-align :center border-bottom false}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [layout set-layout] (rn/use-state {:left {:width (or left-width 8) :height header-height} :right {:width (or right-width 8) diff --git a/src/quo/components/icon.cljs b/src/quo/components/icon.cljs index 6ad3ed7257..286da22374 100644 --- a/src/quo/components/icon.cljs +++ b/src/quo/components/icon.cljs @@ -15,7 +15,7 @@ (not (string/blank? color)))))) (defn- image-icon-style - [{:keys [color no-color size container-style theme]}] + [{:keys [color no-color size container-style]} theme] (cond-> {:width size :height size} (not no-color) @@ -26,29 +26,31 @@ :always (merge container-style))) -(defn memo-icon-fn - [{:keys [color color-2 container-style size accessibility-label] - :or {accessibility-label :icon} - :as props} - icon-name] - (let [size (or size 20)] - (with-meta - (if-let [svg-icon (icons.svg/get-icon icon-name size)] - [svg-icon - (cond-> {:size size - :accessibility-label accessibility-label - :style container-style} - (valid-color? color) (assoc :color color) - (valid-color? color-2) (assoc :color-2 color-2))] - [rn/image - {:style (image-icon-style (assoc props :size size)) - :accessibility-label accessibility-label - :source (icons/icon-source (str (name icon-name) size))}]) - {:key icon-name}))) +(def memo-icon-fn + (fn [{:keys [color color-2 container-style size accessibility-label] + :or {accessibility-label :icon} + :as props} + icon-name + theme] + (let [size (or size 20)] + (with-meta + (if-let [svg-icon (icons.svg/get-icon icon-name size)] + [svg-icon + (cond-> {:size size + :accessibility-label accessibility-label + :style container-style} + (valid-color? color) (assoc :color color) + (valid-color? color-2) (assoc :color-2 color-2))] + [rn/image + {:style (image-icon-style (assoc props :size size) theme) + :accessibility-label accessibility-label + :source (icons/icon-source (str (name icon-name) size))}]) + {:key icon-name})))) -(def ^:private themed-icon (memoize (quo.theme/with-theme memo-icon-fn))) +(def ^:private memoized-icon (memoize memo-icon-fn)) (defn icon ([icon-name] (icon icon-name nil)) ([icon-name params] - (themed-icon params icon-name))) + (let [theme (quo.theme/use-theme)] + (memoized-icon params icon-name theme)))) diff --git a/src/quo/components/info/info_message.cljs b/src/quo/components/info/info_message.cljs index 92896b7079..612643f105 100644 --- a/src/quo/components/info/info_message.cljs +++ b/src/quo/components/info/info_message.cljs @@ -14,7 +14,7 @@ :warning (colors/resolve-color :warning theme) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))) -(defn view-internal +(defn info-message "[info-message opts \"message\"] opts {:type :default/:success/:error @@ -23,9 +23,10 @@ :text-color colors/white ;; text color override :icon-color colors/white ;; icon color override :no-icon-color? false ;; disable tint color for icon" - [{:keys [type size theme icon text-color icon-color no-icon-color? style accessibility-label + [{:keys [type size icon text-color icon-color no-icon-color? style accessibility-label container-style]} message] - (let [weight (if (= size :default) :regular :medium) + (let [theme (quo.theme/use-theme) + weight (if (= size :default) :regular :medium) icon-size (if (= size :default) 16 12) size (if (= size :default) :paragraph-2 :label) text-color (or text-color (get-color type theme)) @@ -45,5 +46,3 @@ :weight weight :style {:color text-color :margin-horizontal 4}} message]])) - -(def info-message (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/info/information_box/view.cljs b/src/quo/components/info/information_box/view.cljs index f983df0e98..2ddae9693b 100644 --- a/src/quo/components/info/information_box/view.cljs +++ b/src/quo/components/info/information_box/view.cljs @@ -5,7 +5,7 @@ [quo.components.icon :as icons] [quo.components.info.information-box.style :as style] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn- info-type->button-type @@ -57,7 +57,7 @@ on-button-press on-close no-icon-color? icon-size]} message] (when-not closed? - (let [theme (theme/get-theme) + (let [theme (quo.theme/use-theme) include-button? (not (string/blank? button-label))] [rn/view {:accessibility-label :information-box diff --git a/src/quo/components/inputs/address_input/style.cljs b/src/quo/components/inputs/address_input/style.cljs index fe44f770a8..2bd9e6dbe9 100644 --- a/src/quo/components/inputs/address_input/style.cljs +++ b/src/quo/components/inputs/address_input/style.cljs @@ -29,7 +29,8 @@ (defn input-text [theme] (assoc (text/text-style {:size :paragraph-1 - :weight :monospace}) + :weight :monospace} + nil) :flex 1 :color (colors/theme-colors colors/neutral-100 colors/white theme) :margin-top (if platform/ios? 0 -4) diff --git a/src/quo/components/inputs/address_input/view.cljs b/src/quo/components/inputs/address_input/view.cljs index 2a31ff9412..43cda6a4ee 100644 --- a/src/quo/components/inputs/address_input/view.cljs +++ b/src/quo/components/inputs/address_input/view.cljs @@ -58,7 +58,7 @@ [{:keys [default-value blur? on-change-text on-blur on-focus on-clear on-scan on-detect-ens on-detect-address on-detect-unclassified address-regex ens-regex valid-ens-or-address? container-style]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [status set-status] (rn/use-state :default) [value set-value] (rn/use-state nil) [focused? set-focused] (rn/use-state false) @@ -128,7 +128,7 @@ :auto-capitalize :none :auto-correct false :spell-check false - :keyboard-appearance (quo.theme/theme-value :light :dark theme) + :keyboard-appearance theme :on-focus on-focus :on-blur on-blur :on-change-text on-change}] diff --git a/src/quo/components/inputs/input/style.cljs b/src/quo/components/inputs/input/style.cljs index 6ff41e3f9d..ece7c7267b 100644 --- a/src/quo/components/inputs/input/style.cljs +++ b/src/quo/components/inputs/input/style.cljs @@ -87,7 +87,7 @@ (defn input [colors-by-status small? multiple-lines? weight] (let [padding (if small? 4 8) - base-props (assoc (text/text-style {:size :paragraph-1 :weight (or weight :regular)}) + base-props (assoc (text/text-style {:size :paragraph-1 :weight (or weight :regular)} nil) :flex 1 :padding-right 0 :padding-left padding diff --git a/src/quo/components/inputs/input/view.cljs b/src/quo/components/inputs/input/view.cljs index 7d998d271b..95760dca06 100644 --- a/src/quo/components/inputs/input/view.cljs +++ b/src/quo/components/inputs/input/view.cljs @@ -67,7 +67,7 @@ label char-limit multiline? clearable? on-focus on-blur container-style input-container-style on-change-text on-char-limit-reach weight default-value on-clear placeholder] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) ref (rn/use-ref-atom nil) on-ref (rn/use-callback (fn [value] (when (:ref props) @@ -134,7 +134,7 @@ :style (style/input colors-by-status small? multiple-lines? weight) :accessibility-label :input :placeholder-text-color (:placeholder colors-by-status) - :keyboard-appearance (quo.theme/theme-value :light :dark theme) + :keyboard-appearance theme :cursor-color (:cursor variant-colors) :editable (not disabled?) :placeholder modified-placeholder diff --git a/src/quo/components/inputs/locked_input/view.cljs b/src/quo/components/inputs/locked_input/view.cljs index cd1c3daf51..ccd069fa57 100644 --- a/src/quo/components/inputs/locked_input/view.cljs +++ b/src/quo/components/inputs/locked_input/view.cljs @@ -19,21 +19,7 @@ {:size :paragraph-1 :style (style/info-box-label theme)} value-text]]) -(defn- locked-input-internal - [{:keys [label icon container-style theme]} value] - [rn/view {:style container-style} - (when label - [text/text - {:size :paragraph-2 - :weight :medium - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - label]) - [info-box - {:theme theme - :icon icon - :value-text value}]]) - -(def locked-input +(defn locked-input "Options: :label - string (default nil) - Text to display above the input @@ -42,4 +28,16 @@ :theme - :light/:dark (passed from with-theme HOC) :value - string (default nil) - value to display in the info box" - (quo.theme/with-theme locked-input-internal)) + [{:keys [label icon container-style]} value] + (let [theme (quo.theme/use-theme)] + [rn/view {:style container-style} + (when label + [text/text + {:size :paragraph-2 + :weight :medium + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + label]) + [info-box + {:theme theme + :icon icon + :value-text value}]])) diff --git a/src/quo/components/inputs/recovery_phrase/style.cljs b/src/quo/components/inputs/recovery_phrase/style.cljs index 58e9108886..a248875e83 100644 --- a/src/quo/components/inputs/recovery_phrase/style.cljs +++ b/src/quo/components/inputs/recovery_phrase/style.cljs @@ -13,7 +13,7 @@ (defn input [] - (assoc (text/text-style {}) + (assoc (text/text-style {} nil) :height 32 :flex-grow 1 :padding-vertical 5 diff --git a/src/quo/components/inputs/recovery_phrase/view.cljs b/src/quo/components/inputs/recovery_phrase/view.cljs index 382a1daf73..6a81691199 100644 --- a/src/quo/components/inputs/recovery_phrase/view.cljs +++ b/src/quo/components/inputs/recovery_phrase/view.cljs @@ -47,7 +47,7 @@ error-pred-written-words (constantly false)} :as props} text] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) on-focus (rn/use-callback (fn [] @@ -64,7 +64,7 @@ :style (style/input) :placeholder-text-color (style/placeholder-color state theme blur?) :cursor-color (style/cursor-color customization-color theme) - :keyboard-appearance (quo.theme/theme-value :light :dark theme) + :keyboard-appearance theme :multiline true :on-focus on-focus :on-blur on-blur} diff --git a/src/quo/components/inputs/search_input/style.cljs b/src/quo/components/inputs/search_input/style.cljs index 0b4d92c405..fa1f641840 100644 --- a/src/quo/components/inputs/search_input/style.cljs +++ b/src/quo/components/inputs/search_input/style.cljs @@ -63,7 +63,8 @@ (defn input-text [disabled?] (assoc (text/text-style {:size :paragraph-1 - :weight :regular}) + :weight :regular} + nil) :flex 1 :padding-vertical 5 :min-width 120 diff --git a/src/quo/components/inputs/title_input/style.cljs b/src/quo/components/inputs/title_input/style.cljs index f596faf6bc..896034acfe 100644 --- a/src/quo/components/inputs/title_input/style.cljs +++ b/src/quo/components/inputs/title_input/style.cljs @@ -18,7 +18,7 @@ (defn get-char-count-color [blur? theme] (if blur? - (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40) + (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme) (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))) (defn get-selection-color diff --git a/src/quo/components/inputs/title_input/view.cljs b/src/quo/components/inputs/title_input/view.cljs index e2d3864fea..834a70a05b 100644 --- a/src/quo/components/inputs/title_input/view.cljs +++ b/src/quo/components/inputs/title_input/view.cljs @@ -18,7 +18,7 @@ :or {max-length 0 auto-focus false default-value ""}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [focused? set-focused] (rn/use-state auto-focus) [value set-value] (rn/use-state default-value) input-ref (rn/use-ref-atom nil) @@ -45,10 +45,11 @@ {:style (text/text-style {:size (or size :heading-1) :weight :semi-bold - :style (style/title-text theme)}) + :style (style/title-text theme)} + nil) :default-value default-value :accessibility-label :profile-title-input - :keyboard-appearance (quo.theme/theme-value :light :dark theme) + :keyboard-appearance theme :return-key-type return-key-type :on-focus on-focus :on-blur on-blur diff --git a/src/quo/components/ios/drawer_bar/style.cljs b/src/quo/components/ios/drawer_bar/style.cljs index 7476dde195..c7dd7efd60 100644 --- a/src/quo/components/ios/drawer_bar/style.cljs +++ b/src/quo/components/ios/drawer_bar/style.cljs @@ -1,7 +1,7 @@ (ns quo.components.ios.drawer-bar.style (:require [quo.foundations.colors :as colors] - [quo.theme :as theme])) + [quo.theme])) (def handle-container {:padding-vertical 8 @@ -9,9 +9,9 @@ :align-items :center}) (defn handle - [{:keys [theme]}] + [theme] {:width 32 :height 4 :background-color (colors/theme-colors colors/neutral-100 colors/white theme) - :opacity (theme/theme-value 0.05 0.1 theme) + :opacity (if (= theme :light) 0.05 0.1) :border-radius 100}) diff --git a/src/quo/components/ios/drawer_bar/view.cljs b/src/quo/components/ios/drawer_bar/view.cljs index 6dc9c3c690..0743d5dcf8 100644 --- a/src/quo/components/ios/drawer_bar/view.cljs +++ b/src/quo/components/ios/drawer_bar/view.cljs @@ -4,9 +4,8 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal - [props] - [rn/view {:style style/handle-container} - [rn/view {:style (style/handle props)}]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [_] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/handle-container} + [rn/view {:style (style/handle theme)}]])) diff --git a/src/quo/components/keycard/view.cljs b/src/quo/components/keycard/view.cljs index f5a35ad60f..11d801175d 100644 --- a/src/quo/components/keycard/view.cljs +++ b/src/quo/components/keycard/view.cljs @@ -8,14 +8,15 @@ [react-native.core :as rn] [utils.i18n :as i18n])) -(defn- view-internal +(defn keycard "This component based on the following properties: - :holder-name - Can be owner's name. Default is Empty - :locked? - Boolean to specify whether the keycard is locked or not - :theme :light/:dark " - [{:keys [holder-name locked? theme]}] - (let [label (if (boolean holder-name) + [{:keys [holder-name locked?]}] + (let [theme (quo.theme/use-theme) + label (if (boolean holder-name) (i18n/label :t/user-keycard {:name holder-name}) (i18n/label :t/empty-keycard))] [rn/view {:style (style/card-container locked? theme)} @@ -39,5 +40,3 @@ :accessibility-label :holder-name :icon-color colors/white-70-blur :override-theme (when locked? :dark)}]])) - -(def keycard (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/links/internal_link_card/channel/view.cljs b/src/quo/components/links/internal_link_card/channel/view.cljs index 4f67e64ea0..10bae19299 100644 --- a/src/quo/components/links/internal_link_card/channel/view.cljs +++ b/src/quo/components/links/internal_link_card/channel/view.cljs @@ -68,25 +68,23 @@ [rn/view {:style (style/loading-thumbnail-box theme size)}]]) (defn view-internal - [{:keys [title description loading? icon banner - theme on-press channel-name size] + [{:keys [title description loading? icon banner on-press channel-name size] :or {channel-name "empty name"}}] - [rn/pressable - {:style (style/container size theme) - :accessibility-label :internal-link-card - :on-press on-press} - (if loading? - [loading-view theme size] - [:<> - [rn/view {:style style/header-container} - (when icon - [logo-comp icon]) - [title-comp title channel-name theme]] - (when description - [description-comp description]) - (when banner - [banner-comp banner size])])]) + (let [theme (quo.theme/use-theme)] + [rn/pressable + {:style (style/container size theme) + :accessibility-label :internal-link-card + :on-press on-press} + (if loading? + [loading-view theme size] + [:<> + [rn/view {:style style/header-container} + (when icon + [logo-comp icon]) + [title-comp title channel-name theme]] + (when description + [description-comp description]) + (when banner + [banner-comp banner size])])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/links/internal_link_card/community/view.cljs b/src/quo/components/links/internal_link_card/community/view.cljs index eee7123f15..92a9461536 100644 --- a/src/quo/components/links/internal_link_card/community/view.cljs +++ b/src/quo/components/links/internal_link_card/community/view.cljs @@ -74,23 +74,22 @@ (defn- view-internal [{:keys [title description loading? icon banner members-count active-members-count - theme on-press size]}] - [rn/pressable - {:style (style/container size theme) - :accessibility-label :internal-link-card - :on-press on-press} - (if loading? - [loading-view theme size] - [:<> - [rn/view {:style style/header-container} - (when icon - [logo-comp icon]) - [title-comp title]] - (when description - [description-comp description members-count active-members-count]) - (when banner - [thumbnail-comp banner size])])]) + on-press size]}] + (let [theme (quo.theme/use-theme)] + [rn/pressable + {:style (style/container size theme) + :accessibility-label :internal-link-card + :on-press on-press} + (if loading? + [loading-view theme size] + [:<> + [rn/view {:style style/header-container} + (when icon + [logo-comp icon]) + [title-comp title]] + (when description + [description-comp description members-count active-members-count]) + (when banner + [thumbnail-comp banner size])])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/links/internal_link_card/schema.cljs b/src/quo/components/links/internal_link_card/schema.cljs index b69963fd02..a3a1a47f84 100644 --- a/src/quo/components/links/internal_link_card/schema.cljs +++ b/src/quo/components/links/internal_link_card/schema.cljs @@ -18,6 +18,5 @@ [:active-members-count {:optional true} [:maybe [:or :int :string]]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:emoji-hash {:optional true} [:maybe :string]] - [:size {:optional true} [:maybe :keyword]] - [:theme :schema.common/theme]]]] + [:size {:optional true} [:maybe :keyword]]]]] :any]) diff --git a/src/quo/components/links/internal_link_card/user/view.cljs b/src/quo/components/links/internal_link_card/user/view.cljs index 59ba70cfa0..7b8e37f448 100644 --- a/src/quo/components/links/internal_link_card/user/view.cljs +++ b/src/quo/components/links/internal_link_card/user/view.cljs @@ -56,28 +56,26 @@ [(style/gradient-start-color customization-color theme) :transparent]) (defn view-internal - [{:keys [title loading? icon - theme on-press subtitle emoji-hash customization-color size]}] - (if loading? - [rn/pressable - {:accessibility-label :internal-link-card - :on-press on-press - :style (style/container loading? theme size)} - [loading-view theme]] - [linear-gradient/linear-gradient - (assoc {:style (style/container loading? theme size)} - :colors - (linear-gradient-props theme customization-color)) - [rn/pressable - {:accessibility-label :internal-link-card - :on-press on-press} - [rn/view {:style style/header-container} - (when icon - [logo-comp icon]) - [title-comp title]] - (when subtitle - [subtitle-comp subtitle emoji-hash])]])) + [{:keys [title loading? icon on-press subtitle emoji-hash customization-color size]}] + (let [theme (quo.theme/use-theme)] + (if loading? + [rn/pressable + {:accessibility-label :internal-link-card + :on-press on-press + :style (style/container loading? theme size)} + [loading-view theme]] + [linear-gradient/linear-gradient + (assoc {:style (style/container loading? theme size)} + :colors + (linear-gradient-props theme customization-color)) + [rn/pressable + {:accessibility-label :internal-link-card + :on-press on-press} + [rn/view {:style style/header-container} + (when icon + [logo-comp icon]) + [title-comp title]] + (when subtitle + [subtitle-comp subtitle emoji-hash])]]))) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/links/link_preview/style.cljs b/src/quo/components/links/link_preview/style.cljs index a5d476e732..2801a1b978 100644 --- a/src/quo/components/links/link_preview/style.cljs +++ b/src/quo/components/links/link_preview/style.cljs @@ -3,10 +3,10 @@ [quo.foundations.colors :as colors])) (defn container - [preview-enabled?] + [preview-enabled? theme] (merge {:border-width 1 - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) - :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) + :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme) :border-radius 16 :padding-horizontal 12 :padding-top 10 @@ -25,9 +25,9 @@ :margin-bottom 2}) (defn link - [] + [theme] {:margin-top 8 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) (defn thumbnail [size] diff --git a/src/quo/components/links/link_preview/view.cljs b/src/quo/components/links/link_preview/view.cljs index d4852ded51..56e278343c 100644 --- a/src/quo/components/links/link_preview/view.cljs +++ b/src/quo/components/links/link_preview/view.cljs @@ -5,6 +5,7 @@ [quo.components.buttons.button.view :as button] [quo.components.links.link-preview.style :as style] [quo.components.markdown.text :as text] + [quo.theme] [react-native.core :as rn] [react-native.platform :as platform] [react-native.svg :as svg] @@ -29,11 +30,11 @@ description]) (defn- link-comp - [link] + [link theme] [text/text {:size :paragraph-2 :weight :medium - :style (style/link) + :style (style/link theme) :accessibility-label :link} link]) @@ -86,18 +87,19 @@ enabled? on-enable disabled-text container-style thumbnail-size] :or {enabled? true}}] - [rn/view - {:style (merge (style/container enabled?) container-style) - :accessibility-label :link-preview} - (if enabled? - [:<> - [rn/view {:style style/header-container} - (when logo - [logo-comp logo]) - [title-comp title]] - (when description - [description-comp description]) - [link-comp link] - (when thumbnail - [thumbnail-comp thumbnail thumbnail-size])] - [button-disabled disabled-text on-enable])]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/container enabled? theme) container-style) + :accessibility-label :link-preview} + (if enabled? + [:<> + [rn/view {:style style/header-container} + (when logo + [logo-comp logo]) + [title-comp title]] + (when description + [description-comp description]) + [link-comp link] + (when thumbnail + [thumbnail-comp thumbnail thumbnail-size])] + [button-disabled disabled-text on-enable])])) diff --git a/src/quo/components/links/url_preview/style.cljs b/src/quo/components/links/url_preview/style.cljs index 7632753339..247b3dc00b 100644 --- a/src/quo/components/links/url_preview/style.cljs +++ b/src/quo/components/links/url_preview/style.cljs @@ -5,9 +5,9 @@ (def horizontal-padding 12) (defn container - [] + [theme] {:height 56 - :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90) + :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme) :padding-vertical 10 :padding-horizontal horizontal-padding :border-radius 12 @@ -15,7 +15,7 @@ :flex-direction :row}) (defn loading-container - [] + [theme] {:height 56 :border-width 1 :border-radius 12 @@ -25,11 +25,11 @@ :justify-content :center :align-self :stretch :padding horizontal-padding - :border-color (colors/theme-colors colors/neutral-30 colors/neutral-80)}) + :border-color (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)}) (defn loading-message - [] - {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}) + [theme] + {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) (def logo {:width 16 @@ -42,13 +42,13 @@ :flex 1}) (defn title - [] - {:color (colors/theme-colors colors/neutral-100 colors/white)}) + [theme] + {:color (colors/theme-colors colors/neutral-100 colors/white theme)}) (defn body - [] + [theme] {:text-transform :lowercase - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) (def clear-button-container {:width 20 diff --git a/src/quo/components/links/url_preview/view.cljs b/src/quo/components/links/url_preview/view.cljs index 808ee0704e..db069d83ce 100644 --- a/src/quo/components/links/url_preview/view.cljs +++ b/src/quo/components/links/url_preview/view.cljs @@ -5,6 +5,7 @@ [quo.components.links.url-preview.style :as style] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.svg :as svg])) @@ -28,57 +29,59 @@ :resize-mode :cover}])) (defn- content - [{:keys [title body]}] + [{:keys [title body]} theme] [rn/view {:style style/content-container} [text/text {:accessibility-label :title :size :paragraph-2 :weight :semi-bold :number-of-lines 1 - :style (style/title)} + :style (style/title theme)} title] [text/text {:accessibility-label :body :size :paragraph-2 :weight :medium :number-of-lines 1 - :style (style/body)} + :style (style/body theme)} body]]) (defn- clear-button [{:keys [on-press]}] - [rn/touchable-opacity - {:on-press on-press - :style style/clear-button-container - :hit-slop {:top 3 :right 3 :bottom 3 :left 3} - :accessibility-label :button-clear-preview} - [icon/icon :i/clear - {:size 20 - :color (colors/theme-colors colors/neutral-50 colors/neutral-60)}]]) + (let [theme (quo.theme/use-theme)] + [rn/touchable-opacity + {:on-press on-press + :style style/clear-button-container + :hit-slop {:top 3 :right 3 :bottom 3 :left 3} + :accessibility-label :button-clear-preview} + [icon/icon :i/clear + {:size 20 + :color (colors/theme-colors colors/neutral-50 colors/neutral-60 theme)}]])) (defn view [{:keys [title body logo on-clear loading? loading-message container-style]}] - (if loading? - [rn/view - {:accessibility-label :url-preview-loading - :style (merge (style/loading-container) container-style)} - [icon/icon :i/loading - {:size 12 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40) - :container-style {:margin-right 8}}] - [rn/text - {:size :paragraph-2 - :weight :medium - :number-of-lines 1 - :style (style/loading-message)} - loading-message]] - [rn/view - {:accessibility-label :url-preview - :style (merge (style/container) container-style)} - (when logo - [logo-comp - {:logo (if (map? logo) - (:data-uri logo) - logo)}]) - [content {:title title :body body}] - [clear-button {:on-press on-clear}]])) + (let [theme (quo.theme/use-theme)] + (if loading? + [rn/view + {:accessibility-label :url-preview-loading + :style (merge (style/loading-container theme) container-style)} + [icon/icon :i/loading + {:size 12 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) + :container-style {:margin-right 8}}] + [rn/text + {:size :paragraph-2 + :weight :medium + :number-of-lines 1 + :style (style/loading-message theme)} + loading-message]] + [rn/view + {:accessibility-label :url-preview + :style (merge (style/container theme) container-style)} + (when logo + [logo-comp + {:logo (if (map? logo) + (:data-uri logo) + logo)}]) + [content {:title title :body body}] + [clear-button {:on-press on-clear}]]))) diff --git a/src/quo/components/list_items/account/view.cljs b/src/quo/components/list_items/account/view.cljs index 1806437619..62066ef4e3 100644 --- a/src/quo/components/list_items/account/view.cljs +++ b/src/quo/components/list_items/account/view.cljs @@ -102,7 +102,7 @@ state :default blur? false} :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false)) diff --git a/src/quo/components/list_items/account_list_card/view.cljs b/src/quo/components/list_items/account_list_card/view.cljs index 4a8c59111e..e1e6bc8e96 100644 --- a/src/quo/components/list_items/account_list_card/view.cljs +++ b/src/quo/components/list_items/account_list_card/view.cljs @@ -13,7 +13,7 @@ (defn- internal-view [{:keys [action blur? account-props networks on-press on-options-press]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) on-press-in (rn/use-callback #(set-state :pressed)) on-press-out (rn/use-callback #(set-state :default))] diff --git a/src/quo/components/list_items/address/view.cljs b/src/quo/components/list_items/address/view.cljs index e04b9f096e..02d67d4d3e 100644 --- a/src/quo/components/list_items/address/view.cljs +++ b/src/quo/components/list_items/address/view.cljs @@ -40,7 +40,7 @@ (defn- internal-view [{:keys [networks address customization-color on-press active-state? blur?] :or {customization-color :blue}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) active? (rn/use-ref-atom false) timer (rn/use-ref-atom nil) diff --git a/src/quo/components/list_items/channel/view.cljs b/src/quo/components/list_items/channel/view.cljs index 3269f31eb7..fb9d51d905 100644 --- a/src/quo/components/list_items/channel/view.cljs +++ b/src/quo/components/list_items/channel/view.cljs @@ -27,7 +27,7 @@ - on-long-press - (function, default: nil) - Function called when the component is long pressed. - theme - Theme value from with-theme HOC" [{:keys [notification locked? mentions-count customization-color emoji name on-press on-long-press]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/list_items/community/style.cljs b/src/quo/components/list_items/community/style.cljs index b7c8cec236..255f0e773d 100644 --- a/src/quo/components/list_items/community/style.cljs +++ b/src/quo/components/list_items/community/style.cljs @@ -63,4 +63,4 @@ (and pressed? (= type :discover)) (colors/theme-colors colors/white :transparent theme))} (when (and (= type :discover) (not pressed?)) - (shadows/get 3)))) + (shadows/get 3 theme)))) diff --git a/src/quo/components/list_items/community/view.cljs b/src/quo/components/list_items/community/view.cljs index 4b0eaf3af8..a4bedda9c7 100644 --- a/src/quo/components/list_items/community/view.cljs +++ b/src/quo/components/list_items/community/view.cljs @@ -117,7 +117,7 @@ " [{:keys [members type info tokens locked? title subtitle logo blur? customization-color on-press on-long-press on-press-info container-style unread-count]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/list_items/dapp/view.cljs b/src/quo/components/list_items/dapp/view.cljs index 461fc6d2a6..9a6ec20926 100644 --- a/src/quo/components/list_items/dapp/view.cljs +++ b/src/quo/components/list_items/dapp/view.cljs @@ -10,7 +10,7 @@ (defn view [{:keys [dapp action on-press on-press-icon] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/list_items/menu_item.cljs b/src/quo/components/list_items/menu_item.cljs index 4ab2a366ed..9a68e28192 100644 --- a/src/quo/components/list_items/menu_item.cljs +++ b/src/quo/components/list_items/menu_item.cljs @@ -3,24 +3,26 @@ [quo.components.icon :as icons] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors :refer [theme-colors]] + [quo.theme] [react-native.core :as rn])) (defn themes - [type] + [type theme] (case type - :main {:icon-color (theme-colors colors/neutral-50 colors/neutral-40) - :background (theme-colors colors/white colors/neutral-95) - :text-color (theme-colors colors/neutral-100 colors/white)} - :danger {:icon-color (theme-colors colors/danger-50 colors/danger-60) - :background (theme-colors colors/white colors/neutral-95) - :text-color (theme-colors colors/danger-50 colors/danger-60)} - :transparent {:icon-color (theme-colors colors/neutral-50 colors/neutral-10) - :text-color (theme-colors colors/neutral-100 colors/white)})) + :main {:icon-color (theme-colors colors/neutral-50 colors/neutral-40 theme) + :background (theme-colors colors/white colors/neutral-95 theme) + :text-color (theme-colors colors/neutral-100 colors/white theme)} + :danger {:icon-color (theme-colors colors/danger-50 colors/danger-60 theme) + :background (theme-colors colors/white colors/neutral-95 theme) + :text-color (theme-colors colors/danger-50 colors/danger-60 theme)} + :transparent {:icon-color (theme-colors colors/neutral-50 colors/neutral-10 theme) + :text-color (theme-colors colors/neutral-100 colors/white theme)})) (defn menu-item [{:keys [type title accessibility-label icon on-press style-props subtitle subtitle-color] :or {type :main}}] - (let [{:keys [icon-color text-color background]} (themes type)] + (let [theme (quo.theme/use-theme) + {:keys [icon-color text-color background]} (themes type theme)] [rn/touchable-opacity (merge {:accessibility-label accessibility-label :style (merge style-props diff --git a/src/quo/components/list_items/network_list/view.cljs b/src/quo/components/list_items/network_list/view.cljs index b8331a9bba..ec2a57baea 100644 --- a/src/quo/components/list_items/network_list/view.cljs +++ b/src/quo/components/list_items/network_list/view.cljs @@ -22,7 +22,7 @@ (defn- values [{:keys [token-value fiat-value]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style style/values-container} [text/text {:weight :medium @@ -40,21 +40,21 @@ [:catn [:props [:map {:closed true} + [:theme :schema.common/theme] [:network-image :int] [:label :string] [:fiat-value :string] [:token-value :string] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:state {:optional true} [:enum :pressed :active :default]] - [:on-press {:optional true} [:maybe fn?]] - [:theme :schema.common/theme]]]] + [:on-press {:optional true} [:maybe fn?]]]]] :any]) (defn- view-internal [{:keys [on-press state customization-color] :as props :or {customization-color :blue}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false)) diff --git a/src/quo/components/list_items/preview_list/view.cljs b/src/quo/components/list_items/preview_list/view.cljs index b6bd0ab985..048bdec5c3 100644 --- a/src/quo/components/list_items/preview_list/view.cljs +++ b/src/quo/components/list_items/preview_list/view.cljs @@ -5,7 +5,6 @@ [quo.components.list-items.preview-list.properties :as properties] [quo.components.tags.number-tag.view :as number-tag] [quo.components.utilities.token.view :as token] - [quo.theme :as quo.theme] [react-native.core :as rn] [react-native.fast-image :as fast-image] [react-native.hole-view :as hole-view])) @@ -67,7 +66,7 @@ :type type :size-key size-key}]])) -(defn- view-internal +(defn view "[preview-list opts items] opts {:type :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network @@ -97,5 +96,3 @@ :size size-key :blur? blur? :container-style {:margin-left margin-left}}])])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/list_items/quiz_item/style.cljs b/src/quo/components/list_items/quiz_item/style.cljs index 6459be26c7..f19504cfa9 100644 --- a/src/quo/components/list_items/quiz_item/style.cljs +++ b/src/quo/components/list_items/quiz_item/style.cljs @@ -2,7 +2,7 @@ (:require [quo.foundations.colors :as colors])) (defn container - [{:keys [blur? theme state]}] + [{:keys [blur? state]} theme] {:flex 1 :flex-direction :row :justify-content :space-between @@ -27,7 +27,7 @@ :error (colors/resolve-color :danger theme 10))}) (defn num-container - [{:keys [blur? theme]}] + [{:keys [blur?]} theme] {:width 32 :height 32 :justify-content :center @@ -39,7 +39,7 @@ (colors/theme-colors colors/neutral-20 colors/neutral-70 theme))}) (defn text - [{:keys [theme state]}] + [{:keys [state]} theme] {:color (case state :success (colors/theme-colors colors/success-50 colors/success-60 theme) :error (colors/theme-colors colors/danger-50 colors/danger-60 theme))}) diff --git a/src/quo/components/list_items/quiz_item/view.cljs b/src/quo/components/list_items/quiz_item/view.cljs index 3bfa1d58bd..f3eacf31c6 100644 --- a/src/quo/components/list_items/quiz_item/view.cljs +++ b/src/quo/components/list_items/quiz_item/view.cljs @@ -8,25 +8,24 @@ [react-native.core :as rn] [utils.i18n :as i18n])) -(defn- view-internal - [{:keys [state theme number word on-press] :as props}] - [rn/pressable - {:style (style/container props) - :on-press on-press} - (if (or (= state :empty) (= state :disabled)) - [rn/view - {:style (style/num-container props) - :accessibility-label :number-container} - [text/text {:weight :semi-bold} number]] - [text/text {:style (style/text props)} - (if (= state :success) word (i18n/label :t/oops-wrong-word))]) - (when (= state :success) - [icon/icon :i/check - {:color (colors/theme-colors colors/success-50 colors/success-60 theme) - :accessibility-label :success-icon}]) - (when (= state :error) - [icon/icon :i/incorrect - {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) - :accessibility-label :error-icon}])]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [state number word on-press] :as props}] + (let [theme (quo.theme/use-theme)] + [rn/pressable + {:style (style/container props theme) + :on-press on-press} + (if (or (= state :empty) (= state :disabled)) + [rn/view + {:style (style/num-container props theme) + :accessibility-label :number-container} + [text/text {:weight :semi-bold} number]] + [text/text {:style (style/text props theme)} + (if (= state :success) word (i18n/label :t/oops-wrong-word))]) + (when (= state :success) + [icon/icon :i/check + {:color (colors/theme-colors colors/success-50 colors/success-60 theme) + :accessibility-label :success-icon}]) + (when (= state :error) + [icon/icon :i/incorrect + {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) + :accessibility-label :error-icon}])])) diff --git a/src/quo/components/list_items/saved_address/view.cljs b/src/quo/components/list_items/saved_address/view.cljs index 8fa19652ed..34c2c967df 100644 --- a/src/quo/components/list_items/saved_address/view.cljs +++ b/src/quo/components/list_items/saved_address/view.cljs @@ -11,7 +11,7 @@ (defn- left-container [{:keys [blur? name ens address customization-color]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style style/left-container} [wallet-user-avatar/wallet-user-avatar {:size :size-32 @@ -34,7 +34,7 @@ [{:keys [blur? user-props active-state? customization-color on-press on-options-press] :or {customization-color :blue blur? false}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) active? (rn/use-ref-atom false) timer (rn/use-ref-atom nil) diff --git a/src/quo/components/list_items/saved_contact_address/view.cljs b/src/quo/components/list_items/saved_contact_address/view.cljs index dfe9bd3d38..1857ab888e 100644 --- a/src/quo/components/list_items/saved_contact_address/view.cljs +++ b/src/quo/components/list_items/saved_contact_address/view.cljs @@ -15,7 +15,7 @@ (defn- account [{:keys [emoji name address customization-color]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:accessibility-label :account-container :style style/account-container} @@ -40,7 +40,7 @@ :or {customization-color :blue accounts [] active-state? true}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) active? (rn/use-ref-atom false) timer (rn/use-ref-atom nil) diff --git a/src/quo/components/list_items/token_network/view.cljs b/src/quo/components/list_items/token_network/view.cljs index 862606dc17..b596cfe7e1 100644 --- a/src/quo/components/list_items/token_network/view.cljs +++ b/src/quo/components/list_items/token_network/view.cljs @@ -31,7 +31,7 @@ (defn- values [{:keys [state token-value fiat-value customization-color]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] (if (= state :selected) [icon/icon :i/check {:color (style/check-color customization-color theme) @@ -52,7 +52,7 @@ [{:keys [on-press state customization-color _token _networks _token-value _fiat-value] :as props :or {customization-color :blue}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false)) diff --git a/src/quo/components/list_items/token_value/view.cljs b/src/quo/components/list_items/token_value/view.cljs index 4f22380a00..d3743aed7a 100644 --- a/src/quo/components/list_items/token_value/view.cljs +++ b/src/quo/components/list_items/token_value/view.cljs @@ -13,7 +13,7 @@ (defn- internal-view [{:keys [customization-color status token metrics? values on-press on-long-press token-name]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) bg-opacity (case state :active 10 diff --git a/src/quo/components/list_items/user.cljs b/src/quo/components/list_items/user.cljs index 5779098426..9c704e9ace 100644 --- a/src/quo/components/list_items/user.cljs +++ b/src/quo/components/list_items/user.cljs @@ -69,7 +69,7 @@ (when short-chat-key [text/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)}} short-chat-key])] (when accessory [action-icon accessory customization-color disabled? theme])]]) diff --git a/src/quo/components/loaders/skeleton.cljs b/src/quo/components/loaders/skeleton.cljs index 81d523469c..cb403af7d7 100644 --- a/src/quo/components/loaders/skeleton.cljs +++ b/src/quo/components/loaders/skeleton.cljs @@ -78,9 +78,10 @@ :end {:x 1 :y 0} :style animated-gradient-style}]]])) -(defn- view-internal - [{:keys [parent-height theme]}] - (let [number-of-skeletons (int (Math/floor (/ parent-height message-skeleton-height)))] +(defn view + [{:keys [parent-height]}] + (let [theme (quo.theme/use-theme) + number-of-skeletons (int (Math/floor (/ parent-height message-skeleton-height)))] [rn/view {:style {:background-color (colors/theme-colors colors/white @@ -90,5 +91,3 @@ (doall (for [n (range number-of-skeletons)] [:f> f-message-skeleton {:key n :theme theme}]))])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/loaders/skeleton_list/view.cljs b/src/quo/components/loaders/skeleton_list/view.cljs index d9b7b91ad8..b20fbd6140 100644 --- a/src/quo/components/loaders/skeleton_list/view.cljs +++ b/src/quo/components/loaders/skeleton_list/view.cljs @@ -3,7 +3,7 @@ [quo.components.loaders.skeleton-list.constants :as constants] [quo.components.loaders.skeleton-list.style :as style] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.masked-view :as masked-view] [react-native.reanimated :as reanimated] @@ -86,9 +86,10 @@ [props] [:f> f-animated-skeleton-view props]) -(defn- f-internal-view - [{:keys [content theme blur? parent-height animated?] :as props}] - (let [{window-width :width} (rn/get-window) +(defn view + [{:keys [content blur? parent-height animated?] :as props}] + (let [theme (quo.theme/use-theme) + {window-width :width} (rn/get-window) translate-x (reanimated/use-shared-value (- window-width)) animated-gradient-style (reanimated/apply-animations-to-style {:transform [{:translateX translate-x}]} @@ -114,8 +115,3 @@ :skeleton-height skeleton-height :style animated-gradient-style})])])) -(defn- internal-view - [props] - [:f> f-internal-view props]) - -(def view (theme/with-theme internal-view)) diff --git a/src/quo/components/markdown/list/view.cljs b/src/quo/components/markdown/list/view.cljs index 85ac931023..a819cd952e 100644 --- a/src/quo/components/markdown/list/view.cljs +++ b/src/quo/components/markdown/list/view.cljs @@ -6,7 +6,7 @@ [quo.components.markdown.text :as text] [quo.components.tags.context-tag.view :as context-tag] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn get-colors @@ -39,32 +39,31 @@ :size :paragraph-2} description-after-tag]])) -(defn- internal-view - [{:keys [theme title description tag-picture tag-name description-after-tag step-number +(defn view + [{:keys [title description tag-picture tag-name description-after-tag step-number customization-color type blur? container-style] :or {type :bullet}}] - [rn/view {:style (style/container container-style)} - [rn/view {:style style/index} - (if (= type :step) - [step/view - {:in-blur-view? blur? - :customization-color customization-color - :type (if customization-color :complete :neutral)} step-number] - [icon/icon :i/bullet {:color (get-colors theme blur?)}])] - [rn/view {:style style/text-container} - (when title - [text/text - {:accessibility-label :list-item-title - :weight :semi-bold - :size :paragraph-2} - title]) - (when description - [rn/view (when title {:style {:margin-top 0}}) - [description-text - {:description description - :tag-name tag-name - :tag-picture tag-picture - :description-after-tag description-after-tag - :blur? blur?}]])]]) - -(def view (theme/with-theme internal-view)) + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/container container-style)} + [rn/view {:style style/index} + (if (= type :step) + [step/view + {:in-blur-view? blur? + :customization-color customization-color + :type (if customization-color :complete :neutral)} step-number] + [icon/icon :i/bullet {:color (get-colors theme blur?)}])] + [rn/view {:style style/text-container} + (when title + [text/text + {:accessibility-label :list-item-title + :weight :semi-bold + :size :paragraph-2} + title]) + (when description + [rn/view (when title {:style {:margin-top 0}}) + [description-text + {:description description + :tag-name tag-name + :tag-picture tag-picture + :description-after-tag description-after-tag + :blur? blur?}]])]])) diff --git a/src/quo/components/markdown/text.cljs b/src/quo/components/markdown/text.cljs index ffda3ac81f..30cece76e7 100644 --- a/src/quo/components/markdown/text.cljs +++ b/src/quo/components/markdown/text.cljs @@ -7,7 +7,7 @@ [react-native.utils :as rn.utils])) (defn text-style - [{:keys [size align weight style theme]}] + [{:keys [size align weight style]} theme] (merge (case (or weight :regular) :regular typography/font-regular :medium typography/font-medium @@ -28,18 +28,17 @@ style (assoc style :color - (if (= (or theme (quo.theme/get-theme)) :dark) colors/white colors/neutral-100))))) + (if (= theme :dark) colors/white colors/neutral-100))))) -(defn- text-view-internal +(defn- text-view [props & children] - (let [style (text-style props)] + (let [theme (quo.theme/use-theme) + style (text-style props theme)] (into [rn/text (merge {:style style} - (dissoc props :style :size :align :weight :color :theme))] + (dissoc props :style :size :align :weight :color))] children))) -(def ^:private text-view (quo.theme/with-theme text-view-internal)) - (defn text [& argv] (let [[props children] (rn.utils/get-props-and-children argv)] diff --git a/src/quo/components/messages/author/view.cljs b/src/quo/components/messages/author/view.cljs index 02a5e3be50..8971e5372d 100644 --- a/src/quo/components/messages/author/view.cljs +++ b/src/quo/components/messages/author/view.cljs @@ -9,71 +9,70 @@ (def middle-dot "·") -(defn- internal-view +(defn view [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy? - muted? size theme] + muted? size] :or {size 13}}] - [rn/view - {:style (merge (style/container size) style)} - [text/text - {:weight :semi-bold - :size (if (= size 15) :paragraph-1 :paragraph-2) - :number-of-lines 1 - :accessibility-label :author-primary-name - :style (style/primary-name muted? theme size)} - primary-name] - (when (not (string/blank? secondary-name)) - [:<> - [text/text - {:size :label - :number-of-lines 1 - :style (style/middle-dot theme)} - middle-dot] - [text/text - {:weight :medium - :size :label - :number-of-lines 1 - :accessibility-label :author-secondary-name - :style (style/secondary-name theme)} - secondary-name]]) - (when contact? - [icons/icon :main-icons2/contact - {:size 12 - :no-color true - :container-style (style/icon-container true)}]) - (cond - verified? - [icons/icon :main-icons2/verified - {:size 12 - :no-color true - :container-style (style/icon-container contact?)}] - untrustworthy? - [icons/icon :main-icons2/untrustworthy - {:size 12 - :no-color true - :container-style (style/icon-container contact?)}]) - [rn/view {:style style/details-container} - (when (and (not verified?) short-chat-key) - [text/text - {:weight :monospace - :size :label - :number-of-lines 1 - :style (style/chat-key-text theme)} - short-chat-key]) - (when (and (not verified?) time-str short-chat-key) - [text/text - {:monospace true - :size :label - :number-of-lines 1 - :style (style/middle-dot theme)} - middle-dot]) - (when time-str - [text/text - {:monospace true - :size :label - :accessibility-label :message-timestamp - :number-of-lines 1 - :style (style/time-text theme)} - time-str])]]) - -(def view (quo.theme/with-theme internal-view)) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/container size) style)} + [text/text + {:weight :semi-bold + :size (if (= size 15) :paragraph-1 :paragraph-2) + :number-of-lines 1 + :accessibility-label :author-primary-name + :style (style/primary-name muted? theme size)} + primary-name] + (when (not (string/blank? secondary-name)) + [:<> + [text/text + {:size :label + :number-of-lines 1 + :style (style/middle-dot theme)} + middle-dot] + [text/text + {:weight :medium + :size :label + :number-of-lines 1 + :accessibility-label :author-secondary-name + :style (style/secondary-name theme)} + secondary-name]]) + (when contact? + [icons/icon :main-icons2/contact + {:size 12 + :no-color true + :container-style (style/icon-container true)}]) + (cond + verified? + [icons/icon :main-icons2/verified + {:size 12 + :no-color true + :container-style (style/icon-container contact?)}] + untrustworthy? + [icons/icon :main-icons2/untrustworthy + {:size 12 + :no-color true + :container-style (style/icon-container contact?)}]) + [rn/view {:style style/details-container} + (when (and (not verified?) short-chat-key) + [text/text + {:weight :monospace + :size :label + :number-of-lines 1 + :style (style/chat-key-text theme)} + short-chat-key]) + (when (and (not verified?) time-str short-chat-key) + [text/text + {:monospace true + :size :label + :number-of-lines 1 + :style (style/middle-dot theme)} + middle-dot]) + (when time-str + [text/text + {:monospace true + :size :label + :accessibility-label :message-timestamp + :number-of-lines 1 + :style (style/time-text theme)} + time-str])]])) diff --git a/src/quo/components/messages/gap.cljs b/src/quo/components/messages/gap.cljs index 62c89e48ba..f7d8f51392 100644 --- a/src/quo/components/messages/gap.cljs +++ b/src/quo/components/messages/gap.cljs @@ -4,7 +4,7 @@ [quo.components.icon :as icon] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) ;;; helpers @@ -17,8 +17,8 @@ :background colors/neutral-95}}) (defn get-color - [k] - (get-in themes [(theme/get-theme) k])) + [k theme] + (get-in themes [theme k])) (def ui-images {:light {:horizontal (js/require "../resources/images/ui/message-gap-hborder-light.png") @@ -28,33 +28,35 @@ :circles (js/require "../resources/images/ui/message-gap-circle-bg-dark.png")}}) (defn get-image - [k] - (get-in ui-images [(theme/get-theme) k])) + [k theme] + (get-in ui-images [theme k])) ;;; components ;;;; borders (defn hborder [{:keys [type style]}] - [rn/image - {:source (get-image :horizontal) - :resize-mode :repeat - :style (merge {:position :absolute - :left 0 - :padding-horizontal 4 - :overflow :hidden - :width "110%" - :height 8 - :margin-left -4} - (if (= type :top) - {:top 0} - {:transform [{:rotateZ "180deg"}] - :bottom 0}) - style)}]) + (let [theme (quo.theme/use-theme)] + [rn/image + {:source (get-image :horizontal theme) + :resize-mode :repeat + :style (merge {:position :absolute + :left 0 + :padding-horizontal 4 + :overflow :hidden + :width "110%" + :height 8 + :margin-left -4} + (if (= type :top) + {:top 0} + {:transform [{:rotateZ "180deg"}] + :bottom 0}) + style)}])) (defn vborder [type body-height] - (let [height @body-height - img (get-image :vertical)] + (let [theme (quo.theme/use-theme) + height @body-height + img (get-image :vertical theme)] (when (and img height) [rn/image {:source img @@ -72,22 +74,24 @@ ;;;; others (defn circle [] - [rn/view - {:width 9 - :height 9 - :border-width 1 - :margin 4 - :flex 0 - :border-color (get-color :icon) - :border-radius 50}]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:width 9 + :height 9 + :border-width 1 + :margin 4 + :flex 0 + :border-color (get-color :icon theme) + :border-radius 50}])) (defn timestamp [s] - [text/text - {:size :label - :style {:text-transform :none - :color (get-color :time)}} - s]) + (let [theme (quo.theme/use-theme)] + [text/text + {:size :label + :style {:text-transform :none + :color (get-color :time theme)}} + s])) (defn info-button [on-press] @@ -98,15 +102,16 @@ ;;;; timeline/body (defn timeline [] - [rn/view - {:flex 0 - :margin-right 20 - :align-items :center - :width 9 - :justify-content :space-between} - [circle] - [rn/image {:style {:flex 1} :source (get-image :circles) :resize-mode :repeat}] - [circle]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:flex 0 + :margin-right 20 + :align-items :center + :width 9 + :justify-content :space-between} + [circle] + [rn/image {:style {:flex 1} :source (get-image :circles theme) :resize-mode :repeat}] + [circle]])) (defn body [timestamp-far timestamp-near on-info-button-pressed on-press warning-label] @@ -136,7 +141,8 @@ style on-press warning-label]}] - (let [[body-height set-body-height] (rn/use-state nil) + (let [theme (quo.theme/use-theme) + [body-height set-body-height] (rn/use-state nil) on-layout (rn/use-callback #(set-body-height (oget % "nativeEvent.layout.height")))] [rn/view @@ -147,7 +153,7 @@ [hborder {:type :bottom}] [rn/view (merge {:width "100%" - :background-color (get-color :background) + :background-color (get-color :background theme) :flex-direction :row :padding 20 :padding-left 31 diff --git a/src/quo/components/messages/system_message/view.cljs b/src/quo/components/messages/system_message/view.cljs index b84d9a1a8f..9ee41eb0ff 100644 --- a/src/quo/components/messages/system_message/view.cljs +++ b/src/quo/components/messages/system_message/view.cljs @@ -57,43 +57,41 @@ [sm-icon icon] [rn/view {:style style/system-message-base-content-wrapper} child]]) -(defn system-message-deleted-internal - [{:keys [label child theme timestamp]}] - [system-message-base - {:icon {:icon :i/delete - :color :danger - :opacity 5}} - [rn/view {:style style/system-message-deleted-wrapper} - (if child - child - [text/text - {:size :paragraph-2 - :style (style/system-message-deleted-text theme)} - (or label (i18n/label :t/message-deleted))]) - [sm-timestamp timestamp theme]]]) +(defn system-message-deleted + [{:keys [label child timestamp]}] + (let [theme (quo.theme/use-theme)] + [system-message-base + {:icon {:icon :i/delete + :color :danger + :opacity 5}} + [rn/view {:style style/system-message-deleted-wrapper} + (if child + child + [text/text + {:size :paragraph-2 + :style (style/system-message-deleted-text theme)} + (or label (i18n/label :t/message-deleted))]) + [sm-timestamp timestamp theme]]])) -(def system-message-deleted (quo.theme/with-theme system-message-deleted-internal)) - -(defn system-message-contact-internal - [{:keys [display-name photo-path customization-color theme timestamp]} label icon] - [system-message-base - {:icon {:icon icon - :color (or customization-color :primary) - :opacity 5}} - [rn/view - {:style style/system-message-contact-wrapper} - [rn/view {:style style/system-message-contact-account-wrapper} - [sm-user-avatar display-name photo-path] - [text/text - {:weight :semi-bold - :number-of-lines 1 - :style style/system-message-contact-account-name - :size :paragraph-2} - display-name]] - [split-text label theme true] - [sm-timestamp timestamp theme]]]) - -(def system-message-contact (quo.theme/with-theme system-message-contact-internal)) +(defn system-message-contact + [{:keys [display-name photo-path customization-color timestamp]} label icon] + (let [theme (quo.theme/use-theme)] + [system-message-base + {:icon {:icon icon + :color (or customization-color :primary) + :opacity 5}} + [rn/view + {:style style/system-message-contact-wrapper} + [rn/view {:style style/system-message-contact-account-wrapper} + [sm-user-avatar display-name photo-path] + [text/text + {:weight :semi-bold + :number-of-lines 1 + :style style/system-message-contact-account-name + :size :paragraph-2} + display-name]] + [split-text label theme true] + [sm-timestamp timestamp theme]]])) (defn system-message-added [data] @@ -108,48 +106,46 @@ (i18n/label :t/contact-request-removed-as-contact)) :i/sad]) -(defn system-message-contact-request-internal - [{:keys [display-name photo-path customization-color theme timestamp incoming?]}] - [system-message-base - {:icon {:icon :i/add-user - :color (or customization-color :primary) - :opacity 5}} - [rn/view - {:style style/system-message-contact-request-wrapper} - (when-not incoming? [split-text "Contact request sent to" theme false]) - [rn/view {:style style/system-message-contact-request-account-wrapper} - [sm-user-avatar display-name photo-path] - [text/text - {:weight :semi-bold - :number-of-lines 1 - :style style/system-message-contact-request-account-name - :size :paragraph-2} - display-name]] - (when incoming? [split-text "sent you a contact request" theme true]) - [sm-timestamp timestamp theme]]]) +(defn system-message-contact-request + [{:keys [display-name photo-path customization-color timestamp incoming?]}] + (let [theme (quo.theme/use-theme)] + [system-message-base + {:icon {:icon :i/add-user + :color (or customization-color :primary) + :opacity 5}} + [rn/view + {:style style/system-message-contact-request-wrapper} + (when-not incoming? [split-text "Contact request sent to" theme false]) + [rn/view {:style style/system-message-contact-request-account-wrapper} + [sm-user-avatar display-name photo-path] + [text/text + {:weight :semi-bold + :number-of-lines 1 + :style style/system-message-contact-request-account-name + :size :paragraph-2} + display-name]] + (when incoming? [split-text "sent you a contact request" theme true]) + [sm-timestamp timestamp theme]]])) -(def system-message-contact-request (quo.theme/with-theme system-message-contact-request-internal)) - -(defn system-message-pinned-internal - [{:keys [pinned-by child customization-color theme timestamp]}] - [system-message-base - {:icon {:icon :i/pin - :color (or customization-color :primary) - :opacity 5}} - [rn/view {:style style/system-message-pinned-wrapper} - [rn/view - {:style style/system-message-pinned-content-wrapper} - [text/text - {:weight :semi-bold - :number-of-lines 1 - :style style/system-message-pinned-content-pinned-by - :size :paragraph-2} - pinned-by] - [split-text (i18n/label :t/pinned-a-message) theme true] - [sm-timestamp timestamp theme]] - (when child child)]]) - -(def system-message-pinned (quo.theme/with-theme system-message-pinned-internal)) +(defn system-message-pinned + [{:keys [pinned-by child customization-color timestamp]}] + (let [theme (quo.theme/use-theme)] + [system-message-base + {:icon {:icon :i/pin + :color (or customization-color :primary) + :opacity 5}} + [rn/view {:style style/system-message-pinned-wrapper} + [rn/view + {:style style/system-message-pinned-content-wrapper} + [text/text + {:weight :semi-bold + :number-of-lines 1 + :style style/system-message-pinned-content-pinned-by + :size :paragraph-2} + pinned-by] + [split-text (i18n/label :t/pinned-a-message) theme true] + [sm-timestamp timestamp theme]] + (when child child)]])) (defn f-system-message [{:keys [type animate-bg-color? bg-color-animation-duration on-long-press] diff --git a/src/quo/components/navigation/page_nav/view.cljs b/src/quo/components/navigation/page_nav/view.cljs index 6495f69614..ae41e10347 100644 --- a/src/quo/components/navigation/page_nav/view.cljs +++ b/src/quo/components/navigation/page_nav/view.cljs @@ -10,7 +10,7 @@ [quo.components.icon :as icons] [quo.components.markdown.text :as text] [quo.components.navigation.page-nav.style :as style] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.reanimated :as reanimated] [utils.worklets.profile-header :as header-worklet])) @@ -107,8 +107,9 @@ title]])) (defn- dropdown-center - [{:keys [theme background dropdown-on-press dropdown-selected? dropdown-text center-opacity]}] - (let [dropdown-type (cond + [{:keys [background dropdown-on-press dropdown-selected? dropdown-text center-opacity]}] + (let [theme (quo.theme/use-theme) + dropdown-type (cond (= background :photo) :grey (and (= theme :dark) (= background :blur)) :grey :else :ghost) @@ -123,54 +124,57 @@ dropdown-text]])) (defn- token-center - [{:keys [theme background token-logo token-name token-abbreviation center-opacity]}] - [reanimated/view {:style (style/center-content-container false center-opacity)} - [rn/image {:style style/token-logo :source token-logo}] - [text/text - {:style style/token-name - :weight :semi-bold - :size :paragraph-1 - :number-of-lines 1} - token-name] - [text/text - {:style (style/token-abbreviation theme background) - :weight :medium - :size :paragraph-2 - :number-of-lines 1} - token-abbreviation]]) + [{:keys [background token-logo token-name token-abbreviation center-opacity]}] + (let [theme (quo.theme/use-theme)] + [reanimated/view {:style (style/center-content-container false center-opacity)} + [rn/image {:style style/token-logo :source token-logo}] + [text/text + {:style style/token-name + :weight :semi-bold + :size :paragraph-1 + :number-of-lines 1} + token-name] + [text/text + {:style (style/token-abbreviation theme background) + :weight :medium + :size :paragraph-2 + :number-of-lines 1} + token-abbreviation]])) (defn- channel-center - [{:keys [theme background channel-emoji channel-name channel-icon center-opacity]}] - [reanimated/view {:style (style/center-content-container false center-opacity)} - [rn/text {:style style/channel-emoji} - channel-emoji] - [text/text - {:style style/channel-name - :weight :semi-bold - :size :paragraph-1 - :number-of-lines 1} - (str "# " channel-name)] - [icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]]) + [{:keys [background channel-emoji channel-name channel-icon center-opacity]}] + (let [theme (quo.theme/use-theme)] + [reanimated/view {:style (style/center-content-container false center-opacity)} + [rn/text {:style style/channel-emoji} + channel-emoji] + [text/text + {:style style/channel-name + :weight :semi-bold + :size :paragraph-1 + :number-of-lines 1} + (str "# " channel-name)] + [icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]])) (defn- title-description-center - [{:keys [background theme picture title description center-opacity]}] - [reanimated/view {:style (style/center-content-container false center-opacity)} - (when picture - [rn/view {:style style/group-avatar-picture} - [group-avatar/view {:picture picture :size :size-28}]]) - [rn/view {:style style/title-description-container} - [text/text - {:style style/title-description-title - :weight :semi-bold - :size :paragraph-1 - :number-of-lines 1} - title] - [text/text - {:style (style/title-description-description theme background) - :weight :medium - :size :paragraph-2 - :number-of-lines 1} - description]]]) + [{:keys [background picture title description center-opacity]}] + (let [theme (quo.theme/use-theme)] + [reanimated/view {:style (style/center-content-container false center-opacity)} + (when picture + [rn/view {:style style/group-avatar-picture} + [group-avatar/view {:picture picture :size :size-28}]]) + [rn/view {:style style/title-description-container} + [text/text + {:style style/title-description-title + :weight :semi-bold + :size :paragraph-1 + :number-of-lines 1} + title] + [text/text + {:style (style/title-description-description theme background) + :weight :medium + :size :paragraph-2 + :number-of-lines 1} + description]]])) (defn- community-network-center [{:keys [type community-logo network-logo community-name network-name center-opacity]}] @@ -195,8 +199,58 @@ :on-press networks-on-press :blur? (= background :blur)} networks]]) -(defn- view-internal - "behind-overlay is necessary for us to know if the page-nav buttons are under the bottom sheet overlay or not." +(defn page-nav + "Props: + - type: defaults to `:no-title`. + - background: + `:white`, `:neutral-5`, `:neutral-90`, `:neutral-95`, `:neutral-100`, `:photo` or `:blur` + - accessibility-label + - on-press: callback for left button + - icon-name: icon for left button + - right-side (optional): + - The `:account-switcher` keyword + - vector of maps to render buttons, e.g.: + {:icon-name :i/my-icon + :on-press (fn callback [] nil) + :accessibility-label \"an optional label\"} + + - account-switcher (optional) + - props to render dropdown component (emoji only) e.g.: + {:customization-color :purple + :on-press (fn [] nil) + :state :default (inherit dropdown states) + :emoji \"🍑\"} + + Depending on the `type` selected, different properties are accepted: + `:title` + - title + - text-align: `:center` or `:left` + - scroll-y: a shared value (optional) + `:dropdown` + - dropdown-on-press: a callback + - dropdown-selected?: a boolean + - dropdown-text + `:token` + - token-logo: a valid rn/image `:source` value + - token-name: string + - token-abbreviation: string + `:channel` + - channel-emoji: an emoji in a string + - channel-name + - channel-icon: an icon keyword (:i/members, :i/lock, etc.) + `:title-description` + - title + - description + - picture: a valid rn/image `:source` value + `:wallet-networks` + - networks: a vector of network image source + - networks-on-press: a callback + `:community` + - community-name + - community-logo: a valid rn/image `:source` value + `:network` + - network-name + - network-logo a valid rn/image `:source` value" [{:keys [type right-side background text-align account-switcher behind-overlay?] :or {type :no-title text-align :center @@ -280,57 +334,3 @@ :support-account-switcher? false}]] nil)) - -(def page-nav - "Props: - - type: defaults to `:no-title`. - - background: - `:white`, `:neutral-5`, `:neutral-90`, `:neutral-95`, `:neutral-100`, `:photo` or `:blur` - - accessibility-label - - on-press: callback for left button - - icon-name: icon for left button - - right-side (optional): - - The `:account-switcher` keyword - - vector of maps to render buttons, e.g.: - {:icon-name :i/my-icon - :on-press (fn callback [] nil) - :accessibility-label \"an optional label\"} - - - account-switcher (optional) - - props to render dropdown component (emoji only) e.g.: - {:customization-color :purple - :on-press (fn [] nil) - :state :default (inherit dropdown states) - :emoji \"🍑\"} - - Depending on the `type` selected, different properties are accepted: - `:title` - - title - - text-align: `:center` or `:left` - - scroll-y: a shared value (optional) - `:dropdown` - - dropdown-on-press: a callback - - dropdown-selected?: a boolean - - dropdown-text - `:token` - - token-logo: a valid rn/image `:source` value - - token-name: string - - token-abbreviation: string - `:channel` - - channel-emoji: an emoji in a string - - channel-name - - channel-icon: an icon keyword (:i/members, :i/lock, etc.) - `:title-description` - - title - - description - - picture: a valid rn/image `:source` value - `:wallet-networks` - - networks: a vector of network image source - - networks-on-press: a callback - `:community` - - community-name - - community-logo: a valid rn/image `:source` value - `:network` - - network-name - - network-logo a valid rn/image `:source` value" - (theme/with-theme view-internal)) diff --git a/src/quo/components/navigation/top_nav/view.cljs b/src/quo/components/navigation/top_nav/view.cljs index 30dcea1971..5691e2fba7 100644 --- a/src/quo/components/navigation/top_nav/view.cljs +++ b/src/quo/components/navigation/top_nav/view.cljs @@ -88,8 +88,7 @@ avatar-props)]]]) (defn- right-section - [{:keys [theme - jump-to? + [{:keys [jump-to? blur? notification notification-count @@ -97,7 +96,8 @@ scan-on-press qr-code-on-press] :as props}] - (let [button-common-props (get-button-common-props {:theme theme + (let [theme (quo.theme/use-theme) + button-common-props (get-button-common-props {:theme theme :jump-to? jump-to? :blur? blur?})] [rn/view {:style style/right-section} @@ -123,17 +123,7 @@ :i/activity-center]] [notification-highlight props]]])) -(defn view-internal - [{:keys [avatar-on-press avatar-props customization-color container-style] :as props}] - [rn/view {:style (merge style/top-nav-container container-style)} - [rn/view {:style style/top-nav-inner-container} - [left-section - {:avatar-props avatar-props - :on-press avatar-on-press - :customization-color customization-color}] - [right-section (dissoc props :avatar-props :avatar-on-press)]]]) - -(def view +(defn view ":container-style style map merged with outer view for margins/paddings :customization-color custom colors :blur? true/false @@ -148,4 +138,11 @@ :notification-count number :max-unread-notifications used to specify max number for counter " - (quo.theme/with-theme view-internal)) + [{:keys [avatar-on-press avatar-props customization-color container-style] :as props}] + [rn/view {:style (merge style/top-nav-container container-style)} + [rn/view {:style style/top-nav-inner-container} + [left-section + {:avatar-props avatar-props + :on-press avatar-on-press + :customization-color customization-color}] + [right-section (dissoc props :avatar-props :avatar-on-press)]]]) diff --git a/src/quo/components/notifications/count_down_circle.cljs b/src/quo/components/notifications/count_down_circle.cljs index 82abad70b1..42ad4d48c8 100644 --- a/src/quo/components/notifications/count_down_circle.cljs +++ b/src/quo/components/notifications/count_down_circle.cljs @@ -50,7 +50,7 @@ (defn circle-timer [{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) rotation (or rotation :clockwise) duration (or duration 4) stroke-width (or stroke-width 1) diff --git a/src/quo/components/notifications/notification/view.cljs b/src/quo/components/notifications/notification/view.cljs index c189cd31b9..60fae46150 100644 --- a/src/quo/components/notifications/notification/view.cljs +++ b/src/quo/components/notifications/notification/view.cljs @@ -63,7 +63,7 @@ (defn notification [{title-text :title :keys [avatar user header title-weight text body container-style theme]}] - (let [theme (or theme (quo.theme/get-theme)) + (let [theme theme body (or body (when text [message text theme])) header (or header (when title-text @@ -79,7 +79,7 @@ [avatar-container {:multiline? (and header body)} user-avatar])] - [quo.theme/provider {:theme theme} + [quo.theme/provider theme [notification-container {:avatar avatar :header header diff --git a/src/quo/components/notifications/toast/view.cljs b/src/quo/components/notifications/toast/view.cljs index d409528d01..b39d8c306e 100644 --- a/src/quo/components/notifications/toast/view.cljs +++ b/src/quo/components/notifications/toast/view.cljs @@ -20,52 +20,50 @@ {:style (merge (style/action-container theme) style)}] children)]) -(defn toast-undo-action-internal - [{:keys [undo-duration undo-on-press theme]}] - [toast-action-container - {:on-press undo-on-press - :accessibility-label :toast-undo-action - :theme theme} - [rn/view {:style {:margin-right 5}} - [count-down-circle/circle-timer {:duration undo-duration}]] - [text/text - {:size :paragraph-2 - :weight :medium - :style (style/text theme)} - [i18n/label :t/undo]]]) +(defn toast-undo-action + [{:keys [undo-duration undo-on-press]}] + (let [theme (quo.theme/use-theme)] + [toast-action-container + {:on-press undo-on-press + :accessibility-label :toast-undo-action + :theme theme} + [rn/view {:style {:margin-right 5}} + [count-down-circle/circle-timer {:duration undo-duration}]] + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/text theme)} + [i18n/label :t/undo]]])) -(def ^:private toast-undo-action (quo.theme/with-theme toast-undo-action-internal)) - -(defn- toast-container-internal - [{:keys [left title text right container-style theme]}] - [rn/view {:style (merge (style/box-container theme) container-style)} - [blur/view - {:style style/blur-container - :blur-amount 13 - :blur-radius 10 - :blur-type :transparent - :overlay-color :transparent}] - [rn/view {:style (style/content-container theme)} - [rn/view {:style style/left-side-container} - left] - [rn/view {:style style/right-side-container} - (when title - [text/text - {:size :paragraph-1 - :weight :semi-bold - :style (style/title theme) - :accessibility-label :toast-title} - title]) - (when text - [text/text - {:size :paragraph-2 - :weight :medium - :style (style/text theme) - :accessibility-label :toast-content} - text])] - right]]) - -(def ^:private toast-container (quo.theme/with-theme toast-container-internal)) +(defn toast-container + [{:keys [left title text right container-style]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (merge (style/box-container theme) container-style)} + [blur/view + {:style style/blur-container + :blur-amount 13 + :blur-radius 10 + :blur-type :transparent + :overlay-color :transparent}] + [rn/view {:style (style/content-container theme)} + [rn/view {:style style/left-side-container} + left] + [rn/view {:style style/right-side-container} + (when title + [text/text + {:size :paragraph-1 + :weight :semi-bold + :style (style/title theme) + :accessibility-label :toast-title} + title]) + (when text + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/text theme) + :accessibility-label :toast-content} + text])] + right]])) (defn toast "Options: @@ -74,7 +72,7 @@ " [{:keys [type icon title text action undo-duration undo-on-press container-style theme user] :or {type :neutral icon :i/placeholder}}] - (let [context-theme (or theme (quo.theme/get-theme)) + (let [context-theme theme icon-name (case type :positive (if (= theme :light) :i/correct @@ -83,7 +81,7 @@ :i/incorrect :i/incorrect-dark) :neutral icon)] - [quo.theme/provider {:theme context-theme} + [quo.theme/provider context-theme [toast-container {:left (cond user [user-avatar/user-avatar user] diff --git a/src/quo/components/numbered_keyboard/keyboard_key/view.cljs b/src/quo/components/numbered_keyboard/keyboard_key/view.cljs index 337b7e938a..c7874c6f9d 100644 --- a/src/quo/components/numbered_keyboard/keyboard_key/view.cljs +++ b/src/quo/components/numbered_keyboard/keyboard_key/view.cljs @@ -13,7 +13,7 @@ (defn view [{:keys [disabled? blur? on-press on-long-press type]} label] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed?] (rn/use-state false) on-press (rn/use-callback #(when on-press (on-press label)) [on-press label]) on-long-press (rn/use-callback #(when (fn? on-long-press) (on-long-press label)) diff --git a/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs b/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs index 80f42e1116..7d4aa2fa7a 100644 --- a/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs +++ b/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs @@ -16,60 +16,59 @@ :type type} item]) -(defn- view-internal +(defn view [] - (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete on-long-press-delete + (fn [{:keys [disabled? blur? left-action delete-key? on-press on-delete on-long-press-delete container-style] :or {left-action :none}}] - [rn/view - {:style (merge style/container - container-style)} - (for [row-index (range 1 4)] - ^{:key row-index} + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge style/container + container-style)} + (for [row-index (range 1 4)] + ^{:key row-index} + [rn/view {:style style/row-container} + (for [column-index (range 1 4)] + ^{:key (str row-index column-index)} + [keyboard-item + {:item (+ (* (dec row-index) 3) column-index) + :type :digit + :disabled? disabled? + :on-press on-press + :blur? blur? + :theme theme}])]) + ;; bottom row [rn/view {:style style/row-container} - (for [column-index (range 1 4)] - ^{:key (str row-index column-index)} - [keyboard-item - {:item (+ (* (dec row-index) 3) column-index) - :type :digit - :disabled? disabled? - :on-press on-press - :blur? blur? - :theme theme}])]) - ;; bottom row - [rn/view {:style style/row-container} - (case left-action - :dot [keyboard-item - {:item "." - :type :digit - :disabled? disabled? - :on-press on-press - :blur? blur? - :theme theme}] - :face-id [keyboard-item - {:item :i/faceid-key - :type :key - :disabled? disabled? - :on-press on-press - :blur? blur? - :theme theme}] - :none [keyboard-item]) - [keyboard-item - {:item "0" - :type :digit - :disabled? disabled? - :on-press on-press - :blur? blur? - :theme theme}] - (if delete-key? + (case left-action + :dot [keyboard-item + {:item "." + :type :digit + :disabled? disabled? + :on-press on-press + :blur? blur? + :theme theme}] + :face-id [keyboard-item + {:item :i/faceid-key + :type :key + :disabled? disabled? + :on-press on-press + :blur? blur? + :theme theme}] + :none [keyboard-item]) [keyboard-item - {:item :i/backspace - :type :key - :disabled? disabled? - :on-press on-delete - :on-long-press on-long-press-delete - :blur? blur? - :theme theme}] - [keyboard-item])]])) - -(def view (quo.theme/with-theme view-internal)) + {:item "0" + :type :digit + :disabled? disabled? + :on-press on-press + :blur? blur? + :theme theme}] + (if delete-key? + [keyboard-item + {:item :i/backspace + :type :key + :disabled? disabled? + :on-press on-delete + :on-long-press on-long-press-delete + :blur? blur? + :theme theme}] + [keyboard-item])]]))) diff --git a/src/quo/components/profile/collectible/style.cljs b/src/quo/components/profile/collectible/style.cljs index c49f89ba76..bfc7031eb8 100644 --- a/src/quo/components/profile/collectible/style.cljs +++ b/src/quo/components/profile/collectible/style.cljs @@ -56,8 +56,8 @@ :right 0}) (defn remaining-tiles - [] - (let [bg-color (colors/theme-colors colors/neutral-20 colors/neutral-80) + [theme] + (let [bg-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) tile-size (tile-style-by-size :xs)] (assoc tile-size :justify-content :center @@ -65,5 +65,5 @@ :background-color bg-color))) (defn remaining-tiles-text - [] - {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}) + [theme] + {:color (colors/theme-colors colors/neutral-60 colors/neutral-40 theme)}) diff --git a/src/quo/components/profile/collectible/view.cljs b/src/quo/components/profile/collectible/view.cljs index 543f1c8b6d..6c7092b9ba 100644 --- a/src/quo/components/profile/collectible/view.cljs +++ b/src/quo/components/profile/collectible/view.cljs @@ -6,10 +6,10 @@ [react-native.core :as rn])) (defn remaining-tiles - [amount] - [rn/view {:style (merge style/bottom-right (style/remaining-tiles))} + [amount theme] + [rn/view {:style (merge style/bottom-right (style/remaining-tiles theme))} [text/text - {:style (style/remaining-tiles-text) + {:style (style/remaining-tiles-text theme) :size :paragraph-2 :weight :medium} (str "+" amount)]]) diff --git a/src/quo/components/profile/collectible_list_item/style.cljs b/src/quo/components/profile/collectible_list_item/style.cljs index fb9a4b606c..3b187a5b5a 100644 --- a/src/quo/components/profile/collectible_list_item/style.cljs +++ b/src/quo/components/profile/collectible_list_item/style.cljs @@ -39,7 +39,7 @@ :border-radius 14 :border-width 1 :border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)} - (shadows/get 2))) + (shadows/get 2 theme))) (def image {:width "100%" diff --git a/src/quo/components/profile/collectible_list_item/view.cljs b/src/quo/components/profile/collectible_list_item/view.cljs index f807c6db78..b0e58ff6b0 100644 --- a/src/quo/components/profile/collectible_list_item/view.cljs +++ b/src/quo/components/profile/collectible_list_item/view.cljs @@ -80,7 +80,7 @@ (defn- card-view [{:keys [avatar-image-src collectible-name community? counter state set-state gradient-color-index image-src supported-file?]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style (style/card-view-container theme)} [rn/view {:style {:aspect-ratio 1}} (cond @@ -121,7 +121,7 @@ (defn- image-view [{:keys [avatar-image-src community? counter state set-state gradient-color-index image-src supported-file?]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style style/image-view-container} (cond (:image-error? state) diff --git a/src/quo/components/profile/expanded_collectible/style.cljs b/src/quo/components/profile/expanded_collectible/style.cljs index 1d76283af7..e58d2c4988 100644 --- a/src/quo/components/profile/expanded_collectible/style.cljs +++ b/src/quo/components/profile/expanded_collectible/style.cljs @@ -2,8 +2,9 @@ (:require [quo.foundations.colors :as colors] [quo.foundations.shadows :as shadows])) -(def container - (merge (shadows/get 2) +(defn container + [theme] + (merge (shadows/get 2 theme) {:align-items :center :justify-content :center :border-radius 16})) diff --git a/src/quo/components/profile/expanded_collectible/view.cljs b/src/quo/components/profile/expanded_collectible/view.cljs index 82641afd1e..8c612d0195 100644 --- a/src/quo/components/profile/expanded_collectible/view.cljs +++ b/src/quo/components/profile/expanded_collectible/view.cljs @@ -7,6 +7,8 @@ [quo.components.profile.expanded-collectible.style :as style] [quo.foundations.colors :as colors] [quo.theme] + [quo.theme] + [quo.theme] [react-native.core :as rn] [schema.core :as schema] [utils.i18n :as i18n])) @@ -33,7 +35,7 @@ (defn view-internal [{:keys [container-style square? on-press counter image-src native-ID supported-file?]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [image-size set-image-size] (rn/use-state {}) [image-error? set-image-error] (rn/use-state false)] (rn/use-effect @@ -46,7 +48,7 @@ [rn/pressable {:on-press (when (and (not image-error?) supported-file?) on-press) :accessibility-label :expanded-collectible - :style (merge container-style style/container)} + :style (merge container-style (style/container theme))} (cond (not supported-file?) [fallback-view diff --git a/src/quo/components/profile/link_card/view.cljs b/src/quo/components/profile/link_card/view.cljs index 056e97f2ca..6bd2a713e2 100644 --- a/src/quo/components/profile/link_card/view.cljs +++ b/src/quo/components/profile/link_card/view.cljs @@ -7,31 +7,30 @@ [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient])) -(defn- view-internal - [{:keys [address theme on-press icon title customization-color container-style]}] - [rn/pressable - {:accessibility-label :link-card - :on-press on-press} - [linear-gradient/linear-gradient - {:colors [(properties/gradient-start-color theme customization-color) - (properties/gradient-end-color theme customization-color)] - :start {:x 0 :y 1} - :end {:x 1 :y 1} - :style (merge (style/container theme) container-style)} - [rn/view {:style style/icon-container} - [social/view - {:accessibility-label :social-icon - :social icon}]] - [text/text - {:accessibility-label :title - :number-of-lines 1 - :weight :semi-bold} - title] - [text/text - {:accessibility-label :address - :size :paragraph-2 - :numberOfLines 1 - :style (style/address theme)} - address]]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [address on-press icon title customization-color container-style]}] + (let [theme (quo.theme/use-theme)] + [rn/pressable + {:accessibility-label :link-card + :on-press on-press} + [linear-gradient/linear-gradient + {:colors [(properties/gradient-start-color theme customization-color) + (properties/gradient-end-color theme customization-color)] + :start {:x 0 :y 1} + :end {:x 1 :y 1} + :style (merge (style/container theme) container-style)} + [rn/view {:style style/icon-container} + [social/view + {:accessibility-label :social-icon + :social icon}]] + [text/text + {:accessibility-label :title + :number-of-lines 1 + :weight :semi-bold} + title] + [text/text + {:accessibility-label :address + :size :paragraph-2 + :numberOfLines 1 + :style (style/address theme)} + address]]])) diff --git a/src/quo/components/profile/profile_card/view.cljs b/src/quo/components/profile/profile_card/view.cljs index 90ded3c556..9b3b22cf13 100644 --- a/src/quo/components/profile/profile_card/view.cljs +++ b/src/quo/components/profile/profile_card/view.cljs @@ -11,7 +11,7 @@ [react-native.hole-view :as hole-view] [utils.i18n :as i18n])) -(defn- f-profile-card-component +(defn profile-card [{:keys [keycard-account? profile-picture name customization-color emoji-hash on-options-press show-emoji-hash? show-options-button? show-user-hash? @@ -89,9 +89,9 @@ :number-of-lines 1 :style style/user-name} name] (when keycard-account? - (icon/icon + [icon/icon :i/keycard - style/keycard-icon))] + style/keycard-icon])] (when show-user-hash? [text/text {:weight :monospace @@ -102,7 +102,3 @@ {:weight :monospace :number-of-lines 1 :style style/emoji-hash} emoji-hash])]]])) - -(defn profile-card - [props] - [:f> f-profile-card-component props]) diff --git a/src/quo/components/profile/showcase_nav/view.cljs b/src/quo/components/profile/showcase_nav/view.cljs index ec2ad57267..ee4739e13a 100644 --- a/src/quo/components/profile/showcase_nav/view.cljs +++ b/src/quo/components/profile/showcase_nav/view.cljs @@ -22,20 +22,19 @@ :container-style style/button-container} icon])) -(defn- view-internal - [{:keys [theme container-style default-active state data on-press active-id]}] - [rn/view - {:style container-style - :accessibility-label :showcase-nav} - [rn/flat-list - {:data data - :key-fn :id - :horizontal true - :shows-horizontal-scroll-indicator false - :content-container-style (style/container state theme) - :render-fn render-button - :render-data {:state state - :on-press on-press - :active-id (or active-id default-active)}}]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [container-style default-active state data on-press active-id]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style container-style + :accessibility-label :showcase-nav} + [rn/flat-list + {:data data + :key-fn :id + :horizontal true + :shows-horizontal-scroll-indicator false + :content-container-style (style/container state theme) + :render-fn render-button + :render-data {:state state + :on-press on-press + :active-id (or active-id default-active)}}]])) diff --git a/src/quo/components/record_audio/record_audio/buttons/lock_button.cljs b/src/quo/components/record_audio/record_audio/buttons/lock_button.cljs index 018b3bb182..8d1c2eec79 100644 --- a/src/quo/components/record_audio/record_audio/buttons/lock_button.cljs +++ b/src/quo/components/record_audio/record_audio/buttons/lock_button.cljs @@ -10,7 +10,7 @@ (defn lock-button [recording? ready-to-lock? locked?] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) translate-x-y (reanimated/use-shared-value 20) opacity (reanimated/use-shared-value 0) connector-opacity (reanimated/use-shared-value 0) @@ -77,9 +77,10 @@ width height border-radius-first-half - border-radius-second-half)}]] + border-radius-second-half + theme)}]] [reanimated/view - {:style (style/lock-button translate-x-y opacity) + {:style (style/lock-button translate-x-y opacity theme) :pointer-events :none} [icons/icon (if ready-to-lock? :i/locked :i/unlocked) {:color (colors/theme-colors colors/black colors/white theme) diff --git a/src/quo/components/record_audio/record_audio/buttons/record_button_big.cljs b/src/quo/components/record_audio/record_audio/buttons/record_button_big.cljs index 2254a36495..f1ca41ccc1 100644 --- a/src/quo/components/record_audio/record_audio/buttons/record_button_big.cljs +++ b/src/quo/components/record_audio/record_audio/buttons/record_button_big.cljs @@ -35,7 +35,7 @@ record-button-at-initial-position? locked? set-locked reviewing-audio? recording-length-ms set-recording-length-ms clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) scale (reanimated/use-shared-value 1) opacity (reanimated/use-shared-value 0) opacity-from (if ready-to-lock? opacity-from-lock opacity-from-default) @@ -212,7 +212,7 @@ animations)] [rn/view {:style (style/record-button-big-body button-color)} [reanimated/view {:style (style/record-button-big-red-overlay red-overlay-opacity)}] - [reanimated/view {:style (style/record-button-big-gray-overlay gray-overlay-opacity)}] + [reanimated/view {:style (style/record-button-big-gray-overlay gray-overlay-opacity theme)}] [reanimated/view {:style (style/record-button-big-icon-container icon-opacity)} (if locked? [rn/view {:style style/stop-icon}] diff --git a/src/quo/components/record_audio/record_audio/style.cljs b/src/quo/components/record_audio/record_audio/style.cljs index 65a70d2d94..b7687d702f 100644 --- a/src/quo/components/record_audio/record_audio/style.cljs +++ b/src/quo/components/record_audio/record_audio/style.cljs @@ -55,7 +55,7 @@ :background-color colors/danger-50})) (defn record-button-big-gray-overlay - [gray-overlay-opacity] + [gray-overlay-opacity theme] (reanimated/apply-animations-to-style {:opacity gray-overlay-opacity} {:position :absolute @@ -63,7 +63,7 @@ :left 0 :right 0 :bottom 0 - :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80)})) + :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80 theme)})) (defn record-button-big-icon-container [icon-opacity] @@ -138,7 +138,7 @@ :left 20})) (defn lock-button-connector - [opacity width height border-radius-first-half border-radius-second-half] + [opacity width height border-radius-first-half border-radius-second-half theme] (reanimated/apply-animations-to-style {:opacity opacity :width width @@ -150,11 +150,11 @@ {:justify-content :center :align-items :center :align-self :center - :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80 theme) :overflow :hidden})) (defn lock-button - [translate-x-y opacity] + [translate-x-y opacity theme] (reanimated/apply-animations-to-style {:transform [{:translateX translate-x-y} {:translateY translate-x-y}] @@ -163,7 +163,7 @@ :height 32 :justify-content :center :align-items :center - :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80 theme) :border-radius 16 :position :absolute :top 24 @@ -236,10 +236,10 @@ :height 128}) (defn recording-bar-container - [] + [theme] {:height 4 :border-radius 2 - :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) :overflow :hidden :position :absolute :left 80 @@ -247,13 +247,13 @@ :bottom 34}) (defn recording-bar - [fill-percentage ready-to-delete?] + [fill-percentage ready-to-delete? theme] {:width (str fill-percentage "%") :height 4 :border-radius 2 :background-color (if ready-to-delete? - (colors/theme-colors colors/danger-50 colors/danger-60) - (colors/theme-colors colors/primary-50 colors/primary-60))}) + (colors/theme-colors colors/danger-50 colors/danger-60 theme) + (colors/theme-colors colors/primary-50 colors/primary-60 theme))}) (defn timer-container [reviewing-audio?] @@ -264,19 +264,19 @@ :align-items :center}) (defn timer-circle - [] + [theme] {:width 8 :height 8 :border-radius 4 :margin-right 6 - :background-color (colors/theme-colors colors/danger-50 colors/danger-60)}) + :background-color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}) (defn timer-text - [] - {:color (colors/theme-colors colors/danger-50 colors/danger-60)}) + [theme] + {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}) (defn play-button - [] + [theme] {:position :absolute :bottom 20 :left 20 @@ -285,4 +285,4 @@ :border-radius 16 :align-items :center :justify-content :center - :background-color (colors/theme-colors colors/neutral-10 colors/neutral-90)}) + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)}) diff --git a/src/quo/components/record_audio/record_audio/view.cljs b/src/quo/components/record_audio/record_audio/view.cljs index 1729a9f6ca..c2abcb5b61 100644 --- a/src/quo/components/record_audio/record_audio/view.cljs +++ b/src/quo/components/record_audio/record_audio/view.cljs @@ -14,6 +14,7 @@ [quo.components.record-audio.record-audio.style :as style] [quo.components.record-audio.soundtrack.view :as soundtrack] [quo.foundations.colors :as colors] + [quo.theme] [react-native.audio-toolkit :as audio] [react-native.core :as rn] [taoensso.timbre :as log] @@ -21,30 +22,33 @@ (defn- recording-bar [recording-length-ms ready-to-delete?] - (let [fill-percentage (/ (* recording-length-ms 100) record-audio.constants/max-audio-duration-ms)] - [rn/view {:style (style/recording-bar-container)} - [rn/view {:style (style/recording-bar fill-percentage ready-to-delete?)}]])) + (let [theme (quo.theme/use-theme) + fill-percentage (/ (* recording-length-ms 100) record-audio.constants/max-audio-duration-ms)] + [rn/view {:style (style/recording-bar-container theme)} + [rn/view {:style (style/recording-bar fill-percentage ready-to-delete? theme)}]])) (defn- time-counter [recording? recording-length-ms ready-to-delete? reviewing-audio? audio-current-time-ms] - (let [s (quot (if recording? recording-length-ms audio-current-time-ms) 1000) + (let [theme (quo.theme/use-theme) + s (quot (if recording? recording-length-ms audio-current-time-ms) 1000) time-str (gstring/format "%02d:%02d" (quot s 60) (mod s 60))] [rn/view {:style (style/timer-container reviewing-audio?)} (when-not reviewing-audio? - [rn/view {:style (style/timer-circle)}]) + [rn/view {:style (style/timer-circle theme)}]) [text/text (merge {:size :label :weight :semi-bold} (when ready-to-delete? - {:style (style/timer-text)})) + {:style (style/timer-text theme)})) time-str]])) (defn- play-button [playing-audio? set-playing-audio player-ref playing-timer set-audio-current-time-ms seeking-audio? set-seeking-audio max-duration-ms] - (let [on-play (fn [] + (let [theme (quo.theme/use-theme) + on-play (fn [] (set-playing-audio true) (reset! playing-timer (js/setInterval @@ -82,11 +86,11 @@ on-pause #(log/error "[record-audio] toggle play / pause - error: " %)))] [rn/touchable-opacity - {:style (style/play-button) + {:style (style/play-button theme) :on-press on-press} [icons/icon (if playing-audio? :i/pause :i/play) - {:color (colors/theme-colors colors/neutral-100 colors/white)}]])) + {:color (colors/theme-colors colors/neutral-100 colors/white theme)}]])) (defn record-audio [{:keys [on-init on-start-recording on-send on-cancel on-reviewing-audio audio-file on-lock diff --git a/src/quo/components/record_audio/soundtrack/view.cljs b/src/quo/components/record_audio/soundtrack/view.cljs index 4cb6e675a6..b5144d8671 100644 --- a/src/quo/components/record_audio/soundtrack/view.cljs +++ b/src/quo/components/record_audio/soundtrack/view.cljs @@ -17,7 +17,7 @@ [{:keys [audio-current-time-ms set-audio-current-time-ms player-ref style seeking-audio? set-seeking-audio max-audio-duration-ms]}] (let [audio-duration-ms (min max-audio-duration-ms (audio/get-player-duration player-ref)) - theme (quo.theme/use-theme-value) + theme (quo.theme/use-theme) on-sliding-start (rn/use-callback #(set-seeking-audio true)) on-sliding-complete (rn/use-callback (fn [seek-time] @@ -39,7 +39,7 @@ :on-sliding-start on-sliding-start :on-sliding-complete on-sliding-complete :on-value-change on-value-change - :thumb-image (quo.theme/theme-value thumb-light thumb-dark theme) + :thumb-image (if (= theme :light) thumb-light thumb-dark) :minimum-track-tint-color (colors/theme-colors colors/primary-50 colors/primary-60 theme) :maximum-track-tint-color (colors/theme-colors (if platform/ios? colors/neutral-20 colors/neutral-40) diff --git a/src/quo/components/selectors/disclaimer/style.cljs b/src/quo/components/selectors/disclaimer/style.cljs index 03471bdc6a..fa648a4715 100644 --- a/src/quo/components/selectors/disclaimer/style.cljs +++ b/src/quo/components/selectors/disclaimer/style.cljs @@ -3,16 +3,16 @@ [quo.foundations.colors :as colors])) (defn container - [blur?] + [blur? theme] (let [dark-background (if blur? colors/white-opa-5 colors/neutral-80-opa-40) dark-border (if blur? colors/white-opa-10 colors/neutral-70)] {:flex-direction :row - :background-color (colors/theme-colors colors/neutral-5 dark-background) + :background-color (colors/theme-colors colors/neutral-5 dark-background theme) :padding 11 :align-self :stretch :border-radius 12 :border-width 1 - :border-color (colors/theme-colors colors/neutral-20 dark-border)})) + :border-color (colors/theme-colors colors/neutral-20 dark-border theme)})) (def text {:margin-left 8}) diff --git a/src/quo/components/selectors/disclaimer/view.cljs b/src/quo/components/selectors/disclaimer/view.cljs index 5935eb40a4..89057038ac 100644 --- a/src/quo/components/selectors/disclaimer/view.cljs +++ b/src/quo/components/selectors/disclaimer/view.cljs @@ -3,21 +3,23 @@ [quo.components.markdown.text :as text] [quo.components.selectors.disclaimer.style :as style] [quo.components.selectors.selectors.view :as selectors] + [quo.theme] [react-native.core :as rn])) (defn view [{:keys [checked? blur? accessibility-label container-style on-change]} label] - [rn/touchable-without-feedback - {:on-press on-change - :accessibility-label :disclaimer-touchable-opacity} - [rn/view {:style (merge container-style (style/container blur?))} - [selectors/view - {:type :checkbox - :accessibility-label accessibility-label - :blur? blur? - :checked? checked? - :on-change on-change}] - [text/text - {:size :paragraph-2 - :style style/text} - label]]]) + (let [theme (quo.theme/use-theme)] + [rn/touchable-without-feedback + {:on-press on-change + :accessibility-label :disclaimer-touchable-opacity} + [rn/view {:style (merge container-style (style/container blur? theme))} + [selectors/view + {:type :checkbox + :accessibility-label accessibility-label + :blur? blur? + :checked? checked? + :on-change on-change}] + [text/text + {:size :paragraph-2 + :style style/text} + label]]])) diff --git a/src/quo/components/selectors/filter/view.cljs b/src/quo/components/selectors/filter/view.cljs index 9a07d5b473..dd5e75e492 100644 --- a/src/quo/components/selectors/filter/view.cljs +++ b/src/quo/components/selectors/filter/view.cljs @@ -7,7 +7,7 @@ (defn view [{:keys [blur? customization-color on-press-out pressed?]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state pressed?) on-press-out (fn [] (set-pressed (not pressed?)) diff --git a/src/quo/components/selectors/react_selector/view.cljs b/src/quo/components/selectors/react_selector/view.cljs index 2bcb0eac0e..7168242194 100644 --- a/src/quo/components/selectors/react_selector/view.cljs +++ b/src/quo/components/selectors/react_selector/view.cljs @@ -8,10 +8,10 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [emoji clicks state use-case on-press accessibility-label on-long-press container-style - theme]}] - (let [numeric-value (int clicks) +(defn view + [{:keys [emoji clicks state use-case on-press accessibility-label on-long-press container-style]}] + (let [theme (quo.theme/use-theme) + numeric-value (int clicks) icon-color (if (= :pinned use-case) (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))] @@ -42,5 +42,3 @@ :weight :semi-bold :style style/reaction-count} (str (if (pos? numeric-value) numeric-value 1))]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/selectors/reactions_selector/style.cljs b/src/quo/components/selectors/reactions_selector/style.cljs index 0afb785740..3acc6345fe 100644 --- a/src/quo/components/selectors/reactions_selector/style.cljs +++ b/src/quo/components/selectors/reactions_selector/style.cljs @@ -3,10 +3,10 @@ [quo.foundations.colors :as colors])) (defn container - [pressed?] + [pressed? theme] {:padding 10 :border-radius 12 :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) :background-color (when pressed? - (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40))}) + (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))}) diff --git a/src/quo/components/selectors/reactions_selector/view.cljs b/src/quo/components/selectors/reactions_selector/view.cljs index 393273c6c2..b12adbc65d 100644 --- a/src/quo/components/selectors/reactions_selector/view.cljs +++ b/src/quo/components/selectors/reactions_selector/view.cljs @@ -2,6 +2,7 @@ (:require [quo.components.selectors.reaction-resource :as reactions.resource] [quo.components.selectors.reactions-selector.style :as style] + [quo.theme] [react-native.core :as rn])) (defn view @@ -9,13 +10,14 @@ accessibility-label start-pressed?] :or {accessibility-label :reaction}}] (let [[pressed? set-pressed] (rn/use-state start-pressed?) + theme (quo.theme/use-theme) on-press (fn [e] (set-pressed (not pressed?)) (when on-press (on-press e)))] [rn/pressable {:accessibility-label accessibility-label :allow-multiple-presses? true - :style (merge (style/container pressed?) + :style (merge (style/container pressed? theme) container-style) :on-press on-press} [rn/text (reactions.resource/system-emojis emoji)]])) diff --git a/src/quo/components/selectors/selectors/style.cljs b/src/quo/components/selectors/selectors/style.cljs index 144082f8d9..c41eebe189 100644 --- a/src/quo/components/selectors/selectors/style.cljs +++ b/src/quo/components/selectors/selectors/style.cljs @@ -30,7 +30,8 @@ {:normal {:checked (colors/resolve-color customization-color theme) :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)} :blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme) - colors/white) + colors/white + theme) :unchecked colors/white-opa-5}}) (defn- checkbox-border-unchecked-color diff --git a/src/quo/components/selectors/selectors/view.cljs b/src/quo/components/selectors/selectors/view.cljs index db7fcb84c9..fd46077f55 100644 --- a/src/quo/components/selectors/selectors/view.cljs +++ b/src/quo/components/selectors/selectors/view.cljs @@ -7,9 +7,10 @@ (defn- base-selector [{:keys [default-checked? checked? disabled? blur? customization-color on-change container-style - label-prefix outer-style-fn inner-style-fn icon-style-fn theme] + label-prefix outer-style-fn inner-style-fn icon-style-fn] :or {customization-color :blue}}] - (let [controlled-component? (some? checked?) + (let [theme (quo.theme/use-theme) + controlled-component? (some? checked?) [internal-checked? set-internal-checked?] (rn/use-state (when-not controlled-component? (or default-checked? false))) @@ -79,7 +80,7 @@ :inner-style-fn style/common-checkbox-inner :icon-style-fn style/filled-checkbox-check)]) -(defn view-internal +(defn view [{:keys [type] :or {type :toggle} :as props}] @@ -89,5 +90,3 @@ :checkbox [checkbox props] :filled-checkbox [filled-checkbox props] nil)) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/settings/accounts/view.cljs b/src/quo/components/settings/accounts/view.cljs index 2638be7b90..2cf3f81b39 100644 --- a/src/quo/components/settings/accounts/view.cljs +++ b/src/quo/components/settings/accounts/view.cljs @@ -29,30 +29,28 @@ :on-press on-press} :i/more]]) -(defn- account-internal - [{:keys [account-name account-address avatar-icon - customization-color on-press-menu theme]}] - [rn/view {:style style/card} - [card-background - {:customization-color customization-color - :theme theme}] - [rn/view {:style style/card-top} - [avatar - {:color customization-color - :icon avatar-icon} - theme] - [menu-button - {:on-press on-press-menu - :theme theme}]] - [rn/view {:style style/card-bottom} - [text/text - {:size :paragraph-1 - :weight :semi-bold} - account-name] - [text/text - {:style (style/address-text theme) - :size :paragraph-2 - :weight :medium} - account-address]]]) - -(def account (quo.theme/with-theme account-internal)) +(defn account + [{:keys [account-name account-address avatar-icon customization-color on-press-menu]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/card} + [card-background + {:customization-color customization-color + :theme theme}] + [rn/view {:style style/card-top} + [avatar + {:color customization-color + :icon avatar-icon} + theme] + [menu-button + {:on-press on-press-menu + :theme theme}]] + [rn/view {:style style/card-bottom} + [text/text + {:size :paragraph-1 + :weight :semi-bold} + account-name] + [text/text + {:style (style/address-text theme) + :size :paragraph-2 + :weight :medium} + account-address]]])) diff --git a/src/quo/components/settings/category/reorder/view.cljs b/src/quo/components/settings/category/reorder/view.cljs index fc72a9a071..0e57ed90c1 100644 --- a/src/quo/components/settings/category/reorder/view.cljs +++ b/src/quo/components/settings/category/reorder/view.cljs @@ -13,7 +13,7 @@ (defn reorder-category [{:keys [label data blur? container-style]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [atom-data set-atom-data] (rn/use-state data) render-fn (rn/use-callback (fn [item _ _ _ _ drag] diff --git a/src/quo/components/settings/category/settings/view.cljs b/src/quo/components/settings/category/settings/view.cljs index e347d2de41..ee228d584c 100644 --- a/src/quo/components/settings/category/settings/view.cljs +++ b/src/quo/components/settings/category/settings/view.cljs @@ -6,22 +6,21 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- category-internal +(defn settings-category [{:keys [label data container-style] :as props}] - (let [settings-item (filter identity data)] + (let [theme (quo.theme/use-theme) + settings-item (filter identity data)] [rn/view {:style (merge (style/container label) container-style)} (when label [text/text {:weight :medium :size :paragraph-2 - :style (style/label props)} + :style (style/label props theme)} label]) - [rn/view {:style (style/settings-items props)} + [rn/view {:style (style/settings-items props theme)} (for [item settings-item] ^{:key item} [:<> [settings-item/view item] (when-not (= item (last settings-item)) [rn/view {:style (style/settings-separator props)}])])]])) - -(def settings-category (quo.theme/with-theme category-internal)) diff --git a/src/quo/components/settings/category/style.cljs b/src/quo/components/settings/category/style.cljs index 3aad999e0c..c36dd9f9b0 100644 --- a/src/quo/components/settings/category/style.cljs +++ b/src/quo/components/settings/category/style.cljs @@ -11,7 +11,7 @@ :padding-bottom 8}) (defn settings-items - [{:keys [label blur? theme]}] + [{:keys [label blur?]} theme] {:margin-top (if label 12 4) :border-radius 16 :background-color (if blur? @@ -23,7 +23,7 @@ (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}) (defn label - [{:keys [blur? theme]}] + [{:keys [blur?]} theme] {:color (if blur? colors/white-opa-40 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}) @@ -55,8 +55,8 @@ :overflow :hidden}) (defn blur-view - [] + [theme] {:style {:flex 1} :blur-radius 10 - :blur-type (colors/theme-colors :light :dark) + :blur-type theme :blur-amount 20}) diff --git a/src/quo/components/settings/data_item/view.cljs b/src/quo/components/settings/data_item/view.cljs index 452a7bb424..2bd80f7b2f 100644 --- a/src/quo/components/settings/data_item/view.cljs +++ b/src/quo/components/settings/data_item/view.cljs @@ -12,82 +12,85 @@ [utils.i18n :as i18n])) (defn- left-loading - [{:keys [size blur? theme]}] - [rn/view {:style (style/loading-container size blur? theme)}]) + [{:keys [size blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/loading-container size blur? theme)}])) (defn- left-subtitle - [{:keys [theme size subtitle-type icon icon-color blur? subtitle customization-color emoji - network-image] + [{:keys [size subtitle-type icon icon-color blur? subtitle customization-color emoji network-image] :or {subtitle-type :default}}] - [rn/view {:style style/subtitle-container} - (when (and subtitle-type (not= :small size)) - [rn/view {:style (style/subtitle-icon-container subtitle-type)} - (case subtitle-type - :icon [icons/icon icon - {:accessibility-label :subtitle-type-icon - :size 16 - :color icon-color}] - :account [account-avatar/view - {:customization-color customization-color - :size 16 - :emoji emoji - :type :default}] - :network [rn/image - {:accessibility-label :subtitle-type-image - :source network-image - :style style/image}] - nil)]) - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/description blur? theme)} - subtitle]]) + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/subtitle-container} + (when (and subtitle-type (not= :small size)) + [rn/view {:style (style/subtitle-icon-container subtitle-type)} + (case subtitle-type + :icon [icons/icon icon + {:accessibility-label :subtitle-type-icon + :size 16 + :color icon-color}] + :account [account-avatar/view + {:customization-color customization-color + :size 16 + :emoji emoji + :type :default}] + :network [rn/image + {:accessibility-label :subtitle-type-image + :source network-image + :style style/image}] + nil)]) + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/description blur? theme)} + subtitle]])) (defn- left-title - [{:keys [title label size blur? theme]}] - [rn/view {:style style/title-container} - [text/text - {:weight :regular - :size :paragraph-2 - :style (style/title blur? theme)} - title] - (when (and (= :graph label) (not= :small size)) + [{:keys [title label size blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/title-container} [text/text {:weight :regular - :size :label + :size :paragraph-2 :style (style/title blur? theme)} - (i18n/label :t/days)])]) + title] + (when (and (= :graph label) (not= :small size)) + [text/text + {:weight :regular + :size :label + :style (style/title blur? theme)} + (i18n/label :t/days)])])) (defn- left-side "The description can either be given as a string `subtitle-type` or a component `custom-subtitle`" - [{:keys [theme title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color + [{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color customization-color network-image emoji] :as props}] - [rn/view {:style style/left-side} - [left-title - {:title title - :label label - :size size - :blur? blur? - :theme theme}] - (if (= status :loading) - [left-loading - {:size size + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/left-side} + [left-title + {:title title + :label label + :size size :blur? blur? :theme theme}] - (if custom-subtitle - [custom-subtitle props] - [left-subtitle - {:theme theme - :size size - :subtitle-type subtitle-type - :icon icon - :icon-color icon-color - :blur? blur? - :subtitle subtitle - :customization-color customization-color - :emoji emoji - :network-image network-image}]))]) + (if (= status :loading) + [left-loading + {:size size + :blur? blur? + :theme theme}] + (if custom-subtitle + [custom-subtitle props] + [left-subtitle + {:theme theme + :size size + :subtitle-type subtitle-type + :icon icon + :icon-color icon-color + :blur? blur? + :subtitle subtitle + :customization-color customization-color + :emoji emoji + :network-image network-image}]))])) (defn- right-side [{:keys [label icon-right? right-icon icon-color communities-list]}] @@ -108,27 +111,26 @@ :color icon-color :size 20}]])]) -(def view-internal - (fn [{:keys [blur? card? icon-right? right-icon label status size theme on-press communities-list - container-style] - :as props}] - (let [icon-color (if (or blur? (= :dark theme)) - colors/neutral-40 - colors/neutral-50)] - (if (= :graph label) - [not-implemented/view {:blur? blur?}] - [rn/pressable - {:accessibility-label :data-item - :disabled (not icon-right?) - :on-press on-press - :style (merge (style/container size card? blur? theme) container-style)} - [left-side props] - (when (and (= :default status) (not= :small size)) - [right-side - {:label label - :icon-right? icon-right? - :right-icon right-icon - :icon-color icon-color - :communities-list communities-list}])])))) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [blur? card? icon-right? right-icon label status size on-press communities-list + container-style] + :as props}] + (let [theme (quo.theme/use-theme) + icon-color (if (or blur? (= :dark theme)) + colors/neutral-40 + colors/neutral-50)] + (if (= :graph label) + [not-implemented/view {:blur? blur?}] + [rn/pressable + {:accessibility-label :data-item + :disabled (not icon-right?) + :on-press on-press + :style (merge (style/container size card? blur? theme) container-style)} + [left-side props] + (when (and (= :default status) (not= :small size)) + [right-side + {:label label + :icon-right? icon-right? + :right-icon right-icon + :icon-color icon-color + :communities-list communities-list}])]))) diff --git a/src/quo/components/settings/page_setting/view.cljs b/src/quo/components/settings/page_setting/view.cljs index a377544606..9ace4e4b25 100644 --- a/src/quo/components/settings/page_setting/view.cljs +++ b/src/quo/components/settings/page_setting/view.cljs @@ -8,7 +8,7 @@ (defn page-setting [{:keys [setting-text customization-color checked? container-style on-change disabled?]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style (merge (style/container theme) container-style)} diff --git a/src/quo/components/settings/privacy_option/view.cljs b/src/quo/components/settings/privacy_option/view.cljs index 5032f64917..f3f9499de2 100644 --- a/src/quo/components/settings/privacy_option/view.cljs +++ b/src/quo/components/settings/privacy_option/view.cljs @@ -49,28 +49,27 @@ [text/text {:weight :semi-bold} label]] [selection-indicator active?]]) -(defn- view-internal - [{:keys [active? header footer list-items icon on-select on-toggle theme] +(defn view + [{:keys [active? header footer list-items icon on-select on-toggle] :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? theme) - [card-header - {:theme theme - :active? active? - :icon icon - :label header}] - [unordered-list - {:theme theme - :container-style (when-not footer {:margin-bottom 8})} list-items] - (when footer - [card-footer - {:theme theme - :active? active? - :label footer - :on-toggle on-toggle}])]]) - -(def view (quo.theme/with-theme view-internal)) + (let [theme (quo.theme/use-theme)] + [rn/touchable-without-feedback + {:on-press on-select + :accessibility-label :privacy-option-card + :testID :privacy-option-card} + [rn/view (style/privacy-option-card active? theme) + [card-header + {:theme theme + :active? active? + :icon icon + :label header}] + [unordered-list + {:theme theme + :container-style (when-not footer {:margin-bottom 8})} list-items] + (when footer + [card-footer + {:theme theme + :active? active? + :label footer + :on-toggle on-toggle}])]])) diff --git a/src/quo/components/settings/reorder_item/items/item.cljs b/src/quo/components/settings/reorder_item/items/item.cljs index 674b7dbb7c..85d7234dfd 100644 --- a/src/quo/components/settings/reorder_item/items/item.cljs +++ b/src/quo/components/settings/reorder_item/items/item.cljs @@ -8,49 +8,42 @@ [react-native.core :as rn] [react-native.fast-image :as fast-image])) -(defn- view-internal +(defn view [{:keys - [title - subtitle - image - image-size - right-text - right-icon - on-press - theme]} + [title subtitle image image-size right-text right-icon on-press]} blur? drag] - [rn/touchable-opacity - {:on-press on-press - :on-long-press drag - :style (merge (style/item-container blur?) (when subtitle style/item-container-extended))} - [icon/icon :main-icons/drag - {:color (colors/theme-colors - colors/neutral-50 - colors/neutral-40)}] - [rn/view - {:style style/body-container} - [rn/view - {:style style/image-container} - [fast-image/fast-image - {:source image - :style (style/image image-size)}]] - [rn/view - {:style style/text-container} + (let [theme (quo.theme/use-theme)] + [rn/touchable-opacity + {:on-press on-press + :on-long-press drag + :style (merge (style/item-container blur? theme) + (when subtitle style/item-container-extended))} + [icon/icon :main-icons/drag + {:color (colors/theme-colors + colors/neutral-50 + colors/neutral-40 + theme)}] [rn/view - [text/text - {:weight :medium} - title] - (when subtitle + {:style style/body-container} + [rn/view + {:style style/image-container} + [fast-image/fast-image + {:source image + :style (style/image image-size)}]] + [rn/view + {:style style/text-container} + [rn/view [text/text - {:style style/item-subtitle - :size :paragraph-2} - subtitle])] - (when right-text - [text/text {:style style/right-text} right-text]) - (when right-icon - [rn/view {:style style/right-icon-container} [icon/icon right-icon (style/right-icon)]])]] - [icon/icon :tiny-icons/chevron-right (style/chevron theme)]]) - - -(def view (quo.theme/with-theme view-internal)) + {:weight :medium} + title] + (when subtitle + [text/text + {:style style/item-subtitle + :size :paragraph-2} + subtitle])] + (when right-text + [text/text {:style style/right-text} right-text]) + (when right-icon + [rn/view {:style style/right-icon-container} [icon/icon right-icon (style/right-icon theme)]])]] + [icon/icon :tiny-icons/chevron-right (style/chevron theme)]])) diff --git a/src/quo/components/settings/reorder_item/items/item_placeholder.cljs b/src/quo/components/settings/reorder_item/items/item_placeholder.cljs index b2266381a6..61009111a3 100644 --- a/src/quo/components/settings/reorder_item/items/item_placeholder.cljs +++ b/src/quo/components/settings/reorder_item/items/item_placeholder.cljs @@ -5,12 +5,12 @@ [react-native.core :as rn])) (defn view - [item] + [item theme] (let [label (:label item)] [rn/view {:accessibility-label :reorder-placerholder-drag-handle - :style (style/placeholder-container)} + :style (style/placeholder-container theme)} [text/text - {:style (style/placeholder-text) + {:style (style/placeholder-text theme) :weight :regular} label]])) diff --git a/src/quo/components/settings/reorder_item/items/item_skeleton.cljs b/src/quo/components/settings/reorder_item/items/item_skeleton.cljs index 372495a4c7..c92cfaf23a 100644 --- a/src/quo/components/settings/reorder_item/items/item_skeleton.cljs +++ b/src/quo/components/settings/reorder_item/items/item_skeleton.cljs @@ -4,6 +4,6 @@ [react-native.core :as rn])) (defn view - [] + [theme] [rn/view - {:style (style/skeleton-container)}]) + {:style (style/skeleton-container theme)}]) diff --git a/src/quo/components/settings/reorder_item/items/item_tabs.cljs b/src/quo/components/settings/reorder_item/items/item_tabs.cljs index 451a00e4fc..a8a99357d5 100644 --- a/src/quo/components/settings/reorder_item/items/item_tabs.cljs +++ b/src/quo/components/settings/reorder_item/items/item_tabs.cljs @@ -4,16 +4,18 @@ [quo.components.markdown.text :as text] [quo.components.settings.reorder-item.style :as style] [quo.components.tabs.segmented-tab :as quo] + [quo.theme] [react-native.core :as rn])) (defn render-tab-item [item] - (let [tab-image (cond + (let [theme (quo.theme/use-theme) + tab-image (cond (item :image) [rn/image {:source (:image item) :style style/tab-item-image}] (item :icon) [rn/view {:style style/tab-item-image} - (quo-icons/icon (:icon item) (style/tab-icon))])] + (quo-icons/icon (:icon item) (style/tab-icon theme))])] [rn/view {:style style/tab-item-container} tab-image @@ -30,12 +32,13 @@ [{:keys [data default-active on-change] :or {default-active 1 on-change (constantly nil)}}] - [quo/segmented-control - {:default-active default-active - :size 32 - :blur? false - :container-style (style/tab-container) - :item-container-style (style/segmented-tab-item-container) - :active-item-container-style (style/active-segmented-tab-item-container) - :data (transform-data data) - :on-change on-change}]) + (let [theme (quo.theme/use-theme)] + [quo/segmented-control + {:default-active default-active + :size 32 + :blur? false + :container-style (style/tab-container theme) + :item-container-style (style/segmented-tab-item-container theme) + :active-item-container-style (style/active-segmented-tab-item-container theme) + :data (transform-data data) + :on-change on-change}])) diff --git a/src/quo/components/settings/reorder_item/style.cljs b/src/quo/components/settings/reorder_item/style.cljs index dbec6597e1..308d85d6a1 100644 --- a/src/quo/components/settings/reorder_item/style.cljs +++ b/src/quo/components/settings/reorder_item/style.cljs @@ -3,7 +3,7 @@ [quo.foundations.colors :as colors])) (defn item-container - [blur?] + [blur? theme] {:flex-direction :row :align-items :center :border-radius 16 @@ -14,7 +14,8 @@ colors/white-opa-5 (colors/theme-colors colors/white - colors/neutral-90))}) + colors/neutral-90 + theme))}) (def item-container-extended {:height 56}) @@ -57,23 +58,25 @@ :margin-right 8}) (defn right-icon - [] + [theme] {:height 20 :width 20 :color (colors/theme-colors colors/neutral-40 - colors/neutral-40)}) + colors/neutral-40 + theme)}) (def right-icon-container {:justify-content :center}) (defn placeholder-container - [] + [theme] {:background-color :transparent :border-width 1 :border-color (colors/theme-colors colors/neutral-30 - colors/neutral-80) + colors/neutral-80 + theme) :padding 12 :justify-content :center :align-items :center @@ -82,46 +85,51 @@ :border-style :dashed}) (defn placeholder-text - [] + [theme] {:color (colors/theme-colors colors/neutral-40 - colors/neutral-50) + colors/neutral-50 + theme) :font-size 13}) (defn skeleton-container - [] + [theme] {:background-color (colors/theme-colors colors/neutral-5 - colors/neutral-95) + colors/neutral-95 + theme) :border-radius 16 :margin-bottom 24 :height 48}) (defn tab-container - [] + [theme] {:background-color (colors/theme-colors colors/neutral-5 - colors/neutral-95) + colors/neutral-95 + theme) :padding-horizontal 4 :padding-vertical 6 :margin-bottom 24}) (defn segmented-tab-item-container - [] + [theme] {:height 40 :border-width 1 :border-style :dashed :margin-horizontal 2 :border-color (colors/theme-colors colors/neutral-30 - colors/neutral-60)}) + colors/neutral-60 + theme)}) (defn active-segmented-tab-item-container - [] + [theme] {:height 40 :background-color (colors/theme-colors colors/neutral-30 - colors/neutral-90)}) + colors/neutral-90 + theme)}) (def tab-item-container {:flex-direction :row @@ -137,9 +145,10 @@ {:font-size 14}) (defn tab-icon - [] + [theme] {:height 16 :width 16 :color (colors/theme-colors colors/neutral-40 - colors/neutral-40)}) + colors/neutral-40 + theme)}) diff --git a/src/quo/components/settings/section_label/view.cljs b/src/quo/components/settings/section_label/view.cljs index e664e49f76..345cd76662 100644 --- a/src/quo/components/settings/section_label/view.cljs +++ b/src/quo/components/settings/section_label/view.cljs @@ -20,14 +20,15 @@ description? (assoc :margin-bottom 2))) -(defn- view-internal +(defn view "Props: - section - the label of the section - description (optional) - description of the section - blur? (optional) - use blurred styling - theme - light or dark" - [{:keys [section description blur? theme container-style]}] - (let [color (get-text-color theme (or blur? false)) + [{:keys [section description blur? container-style]}] + (let [theme (quo.theme/use-theme) + color (get-text-color theme (or blur? false)) description? (not (nil? description)) root-view (if (seq container-style) rn/view :<>)] [root-view {:style container-style} @@ -43,5 +44,3 @@ :weight :regular :style {:color color}} description])])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/settings/settings_item/view.cljs b/src/quo/components/settings/settings_item/view.cljs index 4dcd38334a..5ebc7f53ae 100644 --- a/src/quo/components/settings/settings_item/view.cljs +++ b/src/quo/components/settings/settings_item/view.cljs @@ -16,8 +16,9 @@ [utils.i18n :as i18n])) (defn status-description - [{:keys [description-props blur? theme]}] - (let [{:keys [online? text]} description-props] + [{:keys [description-props blur?]}] + (let [theme (quo.theme/use-theme) + {:keys [online? text]} description-props] [rn/view {:style style/status-container} [rn/view {:style (style/status-dot online? blur?)}] [text/text @@ -26,8 +27,9 @@ (if online? (i18n/label :t/online-now) text)]])) (defn text-description - [{:keys [description-props blur? theme]}] - (let [{:keys [text icon]} description-props] + [{:keys [description-props blur?]}] + (let [theme (quo.theme/use-theme) + {:keys [text icon]} description-props] [rn/view {:style (style/sub-container :center)} [text/text @@ -49,14 +51,15 @@ nil)) (defn image-component - [{:keys [image image-props description tag blur? theme]}] - [rn/view - {:style (style/image-container description tag image)} - (case image - :icon [icon/icon image-props (style/color blur? theme)] - :avatar [user-avatar/user-avatar image-props] - :icon-avatar [icon-avatar/icon-avatar image-props] - nil)]) + [{:keys [image image-props description tag blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (style/image-container description tag image)} + (case image + :icon [icon/icon image-props (style/color blur? theme)] + :avatar [user-avatar/user-avatar image-props] + :icon-avatar [icon-avatar/icon-avatar image-props] + nil)])) (defn tag-component [{:keys [tag tag-props]}] @@ -101,7 +104,7 @@ :selector [selectors/view action-props] nil)]) -(defn- internal-view +(defn view [{:keys [title on-press action-props accessibility-label blur? container-style] :as props}] [rn/pressable {:style (merge style/container container-style) @@ -118,5 +121,3 @@ [rn/view {:style (style/sub-container (:alignment action-props))} [label-component props] [action-component props]]]) - -(def view (quo.theme/with-theme internal-view)) diff --git a/src/quo/components/share/share_qr_code/view.cljs b/src/quo/components/share/share_qr_code/view.cljs index a327198633..7d86ef94d8 100644 --- a/src/quo/components/share/share_qr_code/view.cljs +++ b/src/quo/components/share/share_qr_code/view.cljs @@ -155,7 +155,7 @@ [share-button {:on-press on-share-press}]] (when (not= share-qr-type :profile) [header props]) - [quo.theme/provider {:theme :light} + [quo.theme/provider :light [qr-code/view {:qr-image-uri qr-image-uri :size (style/qr-code-size component-width) @@ -185,7 +185,7 @@ props (-> props (assoc :component-width (or provided-width calculated-width)) (clojure.set/rename-keys {:type :share-qr-type}))] - [quo.theme/provider {:theme :dark} + [quo.theme/provider :dark [rn/view {:accessibility-label :share-qr-code :style style/outer-container diff --git a/src/quo/components/tabs/account_selector.cljs b/src/quo/components/tabs/account_selector.cljs index e5f5ca2aa0..dcf468c36b 100644 --- a/src/quo/components/tabs/account_selector.cljs +++ b/src/quo/components/tabs/account_selector.cljs @@ -3,7 +3,7 @@ [quo.components.avatars.account-avatar.view :as account-avatar] [quo.components.markdown.text :as quo] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (def themes @@ -34,8 +34,8 @@ :margin-right 8}) (defn get-color-by-type - [type k] - (get-in themes [(theme/get-theme) type k])) + [type k theme] + (get-in themes [theme type k])) (defn account-selector "[account-selector opts] @@ -47,9 +47,12 @@ :account-text \"My Savings\" ;; content in place of account name }" [{:keys [show-label? account-text account-emoji transparent? label-text style]}] - (let [background-color (get-color-by-type (if transparent? :transparent :default) :bg) - account-text-color (get-color-by-type (if transparent? :transparent :default) :account-text) - label-text-color (get-color-by-type (if transparent? :transparent :default) :label-text)] + (let [theme (quo.theme/use-theme) + background-color (get-color-by-type (if transparent? :transparent :default) :bg theme) + account-text-color (get-color-by-type (if transparent? :transparent :default) + :account-text + theme) + label-text-color (get-color-by-type (if transparent? :transparent :default) :label-text theme)] [rn/view {:style style} (when show-label? [quo/text diff --git a/src/quo/components/tabs/segmented_tab.cljs b/src/quo/components/tabs/segmented_tab.cljs index de93566046..3aac6accfa 100644 --- a/src/quo/components/tabs/segmented_tab.cljs +++ b/src/quo/components/tabs/segmented_tab.cljs @@ -16,7 +16,7 @@ (defn segmented-control [{:keys [data size blur? container-style item-container-style active-item-container-style default-active on-change]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [active-tab-id set-active-tab-id] (rn/use-state default-active) on-press (rn/use-callback diff --git a/src/quo/components/tabs/tab/view.cljs b/src/quo/components/tabs/tab/view.cljs index ffce2e235d..b068716f45 100644 --- a/src/quo/components/tabs/tab/view.cljs +++ b/src/quo/components/tabs/tab/view.cljs @@ -48,24 +48,13 @@ (vector? children) children)]) -(defn- view-internal - [{:keys [accessibility-label - active - before - item-container-style - active-item-container-style - blur? - disabled - id - on-press - theme - segmented? - size - notification-dot? - customization-color] +(defn view + [{:keys [accessibility-label active before item-container-style active-item-container-style blur? + disabled id on-press segmented? size notification-dot? customization-color] :or {size 32}} children] - (let [show-notification-dot? (and notification-dot? (= size 32)) + (let [theme (quo.theme/use-theme) + show-notification-dot? (and notification-dot? (= size 32)) {:keys [icon-color background-color label]} (style/by-theme {:theme theme @@ -104,5 +93,3 @@ :height size :disabled disabled :background-color background-color}])]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/tags/collectible_tag/view.cljs b/src/quo/components/tags/collectible_tag/view.cljs index f5059573f0..0540946e6c 100644 --- a/src/quo/components/tags/collectible_tag/view.cljs +++ b/src/quo/components/tags/collectible_tag/view.cljs @@ -12,7 +12,7 @@ (defn- view-internal [{:keys [options blur? collectible-img-src collectible-name collectible-id] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [container-width set-container-width] (rn/use-state 0) on-layout (rn/use-callback diff --git a/src/quo/components/tags/context_tag/schema.cljs b/src/quo/components/tags/context_tag/schema.cljs index 0fe884beaa..15bf8b7ac0 100644 --- a/src/quo/components/tags/context_tag/schema.cljs +++ b/src/quo/components/tags/context_tag/schema.cljs @@ -9,7 +9,6 @@ :collectible :address :icon :audio]]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:container-style {:optional true} [:maybe :map]] - [:theme :schema.common/theme] [:blur? {:optional true} [:maybe :boolean]] [:state {:optional true} [:maybe [:enum :selected :default]]]]) diff --git a/src/quo/components/tags/context_tag/view.cljs b/src/quo/components/tags/context_tag/view.cljs index 5aa3fdf300..0d434074a9 100644 --- a/src/quo/components/tags/context_tag/view.cljs +++ b/src/quo/components/tags/context_tag/view.cljs @@ -76,89 +76,88 @@ context]]]) (defn- view-internal - [{:keys [theme type size state blur? customization-color profile-picture full-name users + [{:keys [type size state blur? customization-color profile-picture full-name users group-name amount token network-logo network-name networks account-name emoji collectible collectible-name collectible-number duration container-style] :or {customization-color :blue type :default state :default} :as props}] - [rn/view {:style (merge {:align-items :flex-start} container-style)} - [rn/view - {:style (style/container {:theme theme - :type type - :size size - :state state - :blur? blur? - :customization-color customization-color}) - :accessibility-label :context-tag} - (case type - :default - [tag-skeleton {:theme theme :size size :text full-name} - [user-avatar/user-avatar - {:full-name full-name - :profile-picture profile-picture - :size (if (= size 24) :xxs 28) - :status-indicator? false - :ring? false - :customization-color customization-color}]] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (merge {:align-items :flex-start} container-style)} + [rn/view + {:style (style/container {:theme theme + :type type + :size size + :state state + :blur? blur? + :customization-color customization-color}) + :accessibility-label :context-tag} + (case type + :default + [tag-skeleton {:theme theme :size size :text full-name} + [user-avatar/user-avatar + {:full-name full-name + :profile-picture profile-picture + :size (if (= size 24) :xxs 28) + :status-indicator? false + :ring? false + :customization-color customization-color}]] - :multiuser - [preview-list/view {:type :user :size :size-20} - users] + :multiuser + [preview-list/view {:type :user :size :size-20} + users] - :multinetwork - [preview-list/view {:type :network :size :size-20} - networks] + :multinetwork + [preview-list/view {:type :network :size :size-20} + networks] - :audio - [tag-skeleton {:theme theme :text (str duration)} - [rn/view {:style (style/audio-tag-icon-container customization-color theme)} - [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]] + :audio + [tag-skeleton {:theme theme :text (str duration)} + [rn/view {:style (style/audio-tag-icon-container customization-color theme)} + [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]] - :group - [tag-skeleton {:theme theme :size size :text group-name} - [group-avatar/view - {:icon-name :i/members - :size (if (= size 24) :size-20 :size-28) - :customization-color (colors/custom-color customization-color 50)}]] + :group + [tag-skeleton {:theme theme :size size :text group-name} + [group-avatar/view + {:icon-name :i/members + :size (if (= size 24) :size-20 :size-28) + :customization-color (colors/custom-color customization-color 50)}]] - (:channel :community) - [communities-tag (assoc props :channel? (= type :channel))] + (:channel :community) + [communities-tag (assoc props :channel? (= type :channel))] - :token - [tag-skeleton {:theme theme :size size :text (str amount " " token)} - [token/view - {:style (style/token-logo size) - :token token - :size (if (= size 24) :size-20 :size-28)}]] + :token + [tag-skeleton {:theme theme :size size :text (str amount " " token)} + [token/view + {:style (style/token-logo size) + :token token + :size (if (= size 24) :size-20 :size-28)}]] - :network - [tag-skeleton {:theme theme :size size :text network-name} - [rn/image {:style (style/circle-logo size) :source network-logo}]] + :network + [tag-skeleton {:theme theme :size size :text network-name} + [rn/image {:style (style/circle-logo size) :source network-logo}]] - :collectible - [tag-skeleton - {:theme theme - :size size - :text (str collectible-name " #" collectible-number)} - [rn/image {:style (style/rounded-logo size) :source collectible}]] + :collectible + [tag-skeleton + {:theme theme + :size size + :text (str collectible-name " #" collectible-number)} + [rn/image {:style (style/rounded-logo size) :source collectible}]] - :account - [tag-skeleton {:theme theme :size size :text account-name} - [account-avatar/view - {:customization-color customization-color - :emoji emoji - :size (if (= size 24) 20 28)}]] + :account + [tag-skeleton {:theme theme :size size :text account-name} + [account-avatar/view + {:customization-color customization-color + :emoji emoji + :size (if (= size 24) 20 28)}]] - :address - [address-tag props] + :address + [address-tag props] - :icon - [icon-tag props] + :icon + [icon-tag props] - nil)]]) + nil)]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/tags/network_tags/view.cljs b/src/quo/components/tags/network_tags/view.cljs index 059e46bb66..189bd2123f 100644 --- a/src/quo/components/tags/network_tags/view.cljs +++ b/src/quo/components/tags/network_tags/view.cljs @@ -6,23 +6,22 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [title networks status theme blur? container-style] :or {status :default}}] - [rn/view - {:style (merge (style/container {:status status - :theme theme - :blur? blur?}) - container-style)} - [preview-list/view - {:type :network - :number (count networks) - :size :size-16} - networks] - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/title-style {:status status - :theme theme})} - title]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [title networks status blur? container-style] :or {status :default}}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/container {:status status + :theme theme + :blur? blur?}) + container-style)} + [preview-list/view + {:type :network + :number (count networks) + :size :size-16} + networks] + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/title-style {:status status + :theme theme})} + title]])) diff --git a/src/quo/components/tags/number_tag/style.cljs b/src/quo/components/tags/number_tag/style.cljs index 9c1fc83e84..1d1fff8306 100644 --- a/src/quo/components/tags/number_tag/style.cljs +++ b/src/quo/components/tags/number_tag/style.cljs @@ -56,7 +56,7 @@ (get-in sizes [size (if widen? :width-extra :size)]))) (defn container - [{:keys [type number size blur? theme container-style]}] + [{:keys [type number size blur? container-style]} theme] {:style (assoc container-style :width (get-width size number) :height (get-in sizes [size :size]) diff --git a/src/quo/components/tags/number_tag/view.cljs b/src/quo/components/tags/number_tag/view.cljs index dc82d416ae..174561b8f6 100644 --- a/src/quo/components/tags/number_tag/view.cljs +++ b/src/quo/components/tags/number_tag/view.cljs @@ -6,11 +6,12 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn view-internal - [{:keys [number size blur? theme] :as props}] - (let [size-value (get-in style/sizes [size :size]) +(defn view + [{:keys [number size blur?] :as props}] + (let [theme (quo.theme/use-theme) + size-value (get-in style/sizes [size :size]) icon-size (get-in style/sizes [size :icon-size])] - [rn/view (style/container props) + [rn/view (style/container props theme) (if (and (> size-value 20) (< (count number) 3)) [text/text {:size (if (= size :size-32) @@ -22,5 +23,3 @@ [icons/icon :i/options {:size icon-size :color (style/get-color blur? theme)}])])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/tags/permission_tag.cljs b/src/quo/components/tags/permission_tag.cljs index a828ab1fbd..2ddf8b11b5 100644 --- a/src/quo/components/tags/permission_tag.cljs +++ b/src/quo/components/tags/permission_tag.cljs @@ -4,6 +4,7 @@ [quo.components.markdown.text :as text] [quo.components.tags.base-tag :as base-tag] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn])) (defn outer-resource-container @@ -19,10 +20,11 @@ :justify-content :center}) (defn extra-count-styles - [size] + [size theme] {:background-color (colors/theme-colors colors/neutral-20 - colors/neutral-70) + colors/neutral-70 + theme) :height (case size 32 28 24 20) @@ -35,24 +37,27 @@ (defn extra-count [total-group-count selected-count size background-color] - (let [extra-group-count (- total-group-count selected-count)] + (let [theme (quo.theme/use-theme) + extra-group-count (- total-group-count selected-count)] (when (> extra-group-count 0) [rn/view (outer-resource-container size background-color) - [rn/view (extra-count-styles size) + [rn/view (extra-count-styles size theme) (if (< extra-group-count 4) [text/text {:size :label :style {:align-items :center :color (colors/theme-colors colors/neutral-50 - colors/neutral-40)}} + colors/neutral-40 + theme)}} (str "+" extra-group-count)] [icons/icon :i/pending-default {:container-style {:align-items :center :justify-content :center} :color (colors/theme-colors colors/neutral-50 - colors/neutral-40) + colors/neutral-40 + theme) :size 12}])]]))) (defn selected-token-count @@ -69,7 +74,8 @@ [] (fn [{:keys [group size last-group background-color] :or {size 24}}] - (let [tokens-count (count group) + (let [theme (quo.theme/use-theme) + tokens-count (count group) selected-tokens (take (selected-token-count group) group)] [rn/view {:flex-direction :row @@ -98,7 +104,8 @@ 24 :label) :style {:color (colors/theme-colors colors/neutral-50 - colors/neutral-40) + colors/neutral-40 + theme) :padding-left 4 :text-transform :lowercase :padding-right (case size @@ -132,9 +139,9 @@ :background-color background-color}])]))) (defn tag - [_ _] - (fn [{:keys [locked? tokens size background-color on-press accessibility-label] - :or {size 24}}] + [{:keys [locked? tokens size background-color on-press accessibility-label] + :or {size 24}}] + (let [theme (quo.theme/use-theme)] [base-tag/base-tag {:accessibility-label accessibility-label :background-color background-color @@ -162,7 +169,8 @@ 24 16) :color (colors/theme-colors colors/neutral-50 - colors/neutral-40)}]] + colors/neutral-40 + theme)}]] [tag-tokens {:tokens tokens :size size diff --git a/src/quo/components/tags/status_tags.cljs b/src/quo/components/tags/status_tags.cljs index b438fdec58..457e3c8dbc 100644 --- a/src/quo/components/tags/status_tags.cljs +++ b/src/quo/components/tags/status_tags.cljs @@ -112,20 +112,19 @@ colors/white-opa-70 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]) -(defn- status-tag-internal - [{:keys [status size theme label blur? no-icon? container-style]}] +(defn status-tag + [{:keys [status size label blur? no-icon? container-style]}] (when status - (when-let [status-component (case (:type status) - :positive positive - :negative negative - :pending pending - nil)] - [status-component - size - theme - label - blur? - no-icon? - container-style]))) - -(def status-tag (quo.theme/with-theme status-tag-internal)) + (let [theme (quo.theme/use-theme)] + (when-let [status-component (case (:type status) + :positive positive + :negative negative + :pending pending + nil)] + [status-component + size + theme + label + blur? + no-icon? + container-style])))) diff --git a/src/quo/components/tags/summary_tag/style.cljs b/src/quo/components/tags/summary_tag/style.cljs index bd18f37e4d..f33654ff82 100644 --- a/src/quo/components/tags/summary_tag/style.cljs +++ b/src/quo/components/tags/summary_tag/style.cljs @@ -3,7 +3,7 @@ [quo.foundations.colors :as colors])) (defn main - [{:keys [type theme customization-color]}] + [{:keys [type customization-color]} theme] {:justify-content :center :align-items :center :height 32 diff --git a/src/quo/components/tags/summary_tag/view.cljs b/src/quo/components/tags/summary_tag/view.cljs index e26de4f835..c652c5a17d 100644 --- a/src/quo/components/tags/summary_tag/view.cljs +++ b/src/quo/components/tags/summary_tag/view.cljs @@ -45,7 +45,7 @@ :style style/token-image}] nil)) -(defn- view-internal +(defn view "Options: - :label - string - tag label - :customization-color - color - It will be passed down to components that @@ -54,17 +54,16 @@ - :emoji - string - emoji used for displaying account avatar - :image-source - resource - image to display on :network, :collectible and :user - :theme - :light / :dark" - [{:keys [label customization-color type theme] + [{:keys [label customization-color type] :as props :or {customization-color colors/neutral-80-opa-5}}] - [rn/view - {:accessibility-label :container - :style (style/main (assoc props :customization-color customization-color))} - [left-view props] - [text/text - {:style (style/label type theme) - :weight :semi-bold - :size :heading-1} - label]]) - -(def view (quo.theme/with-theme view-internal)) + (let [theme (quo.theme/use-theme)] + [rn/view + {:accessibility-label :container + :style (style/main (assoc props :customization-color customization-color) theme)} + [left-view props] + [text/text + {:style (style/label type theme) + :weight :semi-bold + :size :heading-1} + label]])) diff --git a/src/quo/components/tags/tag.cljs b/src/quo/components/tags/tag.cljs index 4bca27bd28..2b0ac6b5b5 100644 --- a/src/quo/components/tags/tag.cljs +++ b/src/quo/components/tags/tag.cljs @@ -73,7 +73,7 @@ text-color) label])]) -(defn tag-internal +(defn tag "opts {:type :icon/:emoji/:label :label string @@ -89,9 +89,10 @@ - `type` can be icon or emoji with or without a tag label - `labelled` boolean: is true if tag has label else false" [{:keys [id on-press disabled? size active accessibility-label label resource type - labelled? blurred? icon-color theme] + labelled? blurred? icon-color] :or {size 32}}] - (let [state (cond + (let [theme (quo.theme/use-theme) + state (cond disabled? :disabled active :active :else :default) @@ -112,5 +113,3 @@ :type type :labelled? (if (= type :label) true labelled?)} [tag-resources size type resource icon-color label text-color labelled?]]])) - -(def tag (quo.theme/with-theme tag-internal)) diff --git a/src/quo/components/tags/tiny_tag/style.cljs b/src/quo/components/tags/tiny_tag/style.cljs index ba25310546..e7c7236792 100644 --- a/src/quo/components/tags/tiny_tag/style.cljs +++ b/src/quo/components/tags/tiny_tag/style.cljs @@ -20,7 +20,7 @@ :height 16}) (defn inner - [{:keys [blur? theme]}] + [{:keys [blur?]} theme] {:border-width 1 :border-radius 6 :border-color (get-border-color blur? theme) @@ -30,5 +30,5 @@ :padding-right 3}) (defn label - [{:keys [blur? theme]}] + [{:keys [blur?]} theme] {:color (get-label-color blur? theme)}) diff --git a/src/quo/components/tags/tiny_tag/view.cljs b/src/quo/components/tags/tiny_tag/view.cljs index 5de5cdd90e..660d78a115 100644 --- a/src/quo/components/tags/tiny_tag/view.cljs +++ b/src/quo/components/tags/tiny_tag/view.cljs @@ -5,14 +5,13 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal +(defn view [{:keys [label] :as props}] - [rn/view {:style style/main} - [rn/view {:style (style/inner props)} - [text/text - {:style (style/label props) - :weight :medium - :size :label - :align :center} label]]]) - -(def view (quo.theme/with-theme view-internal)) + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/main} + [rn/view {:style (style/inner props theme)} + [text/text + {:style (style/label props theme) + :weight :medium + :size :label + :align :center} label]]])) diff --git a/src/quo/components/tags/token_tag/view.cljs b/src/quo/components/tags/token_tag/view.cljs index c20f5ed8a0..d65985420b 100644 --- a/src/quo/components/tags/token_tag/view.cljs +++ b/src/quo/components/tags/token_tag/view.cljs @@ -19,7 +19,7 @@ - :token-symbol - string" [{:keys [options size blur? token-value token-img-src token-symbol] :or {size :size-24}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [container-width set-container-width] (rn/use-state 0) on-layout (rn/use-callback #(set-container-width diff --git a/src/quo/components/text_combinations/channel_name/view.cljs b/src/quo/components/text_combinations/channel_name/view.cljs index f50c1c9286..dfbc77c62a 100644 --- a/src/quo/components/text_combinations/channel_name/view.cljs +++ b/src/quo/components/text_combinations/channel_name/view.cljs @@ -6,28 +6,29 @@ [react-native.core :as rn])) (defn icons - [{:keys [theme unlocked? muted? blur?]}] - [rn/view {:style style/icons-container} - (when unlocked? - [rn/view - {:style style/icon - :accessibility-label :channel-name-unlocked-icon} - [icon/icon :i/unlocked - {:color (style/unlocked-icon-color theme blur?) - :size 20}]]) + [{:keys [unlocked? muted? blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/icons-container} + (when unlocked? + [rn/view + {:style style/icon + :accessibility-label :channel-name-unlocked-icon} + [icon/icon :i/unlocked + {:color (style/unlocked-icon-color theme blur?) + :size 20}]]) - (when (and unlocked? muted?) - [rn/view {:style style/icons-gap}]) + (when (and unlocked? muted?) + [rn/view {:style style/icons-gap}]) - (when muted? - [rn/view - {:style style/icon - :accessibility-label :channel-name-muted-icon} - [icon/icon :i/muted - {:color (style/muted-icon-color theme blur?) - :size 20}]])]) + (when muted? + [rn/view + {:style style/icon + :accessibility-label :channel-name-muted-icon} + [icon/icon :i/muted + {:color (style/muted-icon-color theme blur?) + :size 20}]])])) -(defn- view-internal +(defn view [{:keys [unlocked? muted? channel-name] :as props}] [rn/view {:style style/container} [text/text @@ -36,5 +37,3 @@ (str "# " channel-name)] (when (or unlocked? muted?) [icons props])]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/text_combinations/page_top/view.cljs b/src/quo/components/text_combinations/page_top/view.cljs index 9e9d7efdf4..8698324ea4 100644 --- a/src/quo/components/text_combinations/page_top/view.cljs +++ b/src/quo/components/text_combinations/page_top/view.cljs @@ -119,35 +119,34 @@ [rn/text {:adjusts-font-size-to-fit true} emoji]])) emojis)) -(defn- view-internal - [{:keys [theme description title input blur? input-props container-style] +(defn view + [{:keys [description title input blur? input-props container-style] emojis :emoji-dash :as props}] - [rn/view {:style container-style} - [rn/view {:style style/top-container} - (when (or title input) - [header props]) - (when description - [description-container props]) - (when emojis - [emoji-dash emojis])] - (when input - [rn/view {:style (style/input-container theme input blur?)} - (case input - :search - [search-input/search-input - (assoc input-props - :container-style style/search-input-container - :blur? blur?)] + (let [theme (quo.theme/use-theme)] + [rn/view {:style container-style} + [rn/view {:style style/top-container} + (when (or title input) + [header props]) + (when description + [description-container props]) + (when emojis + [emoji-dash emojis])] + (when input + [rn/view {:style (style/input-container theme input blur?)} + (case input + :search + [search-input/search-input + (assoc input-props + :container-style style/search-input-container + :blur? blur?)] - :address - [address-input/address-input (assoc input-props :blur? blur?)] + :address + [address-input/address-input (assoc input-props :blur? blur?)] - :recovery-phrase - [recovery-phrase/recovery-phrase-input - (assoc input-props - :container-style style/recovery-phrase-container - :blur? blur?)] - nil)])]) - -(def view (quo.theme/with-theme view-internal)) + :recovery-phrase + [recovery-phrase/recovery-phrase-input + (assoc input-props + :container-style style/recovery-phrase-container + :blur? blur?)] + nil)])])) diff --git a/src/quo/components/text_combinations/standard_title/view.cljs b/src/quo/components/text_combinations/standard_title/view.cljs index 65312a8120..609b4eeacc 100644 --- a/src/quo/components/text_combinations/standard_title/view.cljs +++ b/src/quo/components/text_combinations/standard_title/view.cljs @@ -16,15 +16,16 @@ parsed-number))) (defn- right-counter - [{:keys [blur? theme counter-left counter-right]}] - [rn/view {:style style/right-counter} - [text/text - {:size :paragraph-2 - :weight :regular - :style (style/right-counter-text blur? theme)} - (str (get-counter-number counter-left) - "/" - (get-counter-number counter-right))]]) + [{:keys [blur? counter-left counter-right]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/right-counter} + [text/text + {:size :paragraph-2 + :weight :regular + :style (style/right-counter-text blur? theme)} + (str (get-counter-number counter-left) + "/" + (get-counter-number counter-right))]])) (defn- right-action [{:keys [customization-color on-press icon] @@ -38,9 +39,10 @@ icon]) (defn- right-tag - [{:keys [theme blur? on-press icon label] + [{:keys [blur? on-press icon label] :or {icon :i/placeholder}}] - (let [labelled? (not (string/blank? label))] + (let [theme (quo.theme/use-theme) + labelled? (not (string/blank? label))] [tag/tag {:accessibility-label :standard-title-tag :size 32 @@ -52,7 +54,7 @@ :blurred? blur? :icon-color (style/right-tag-icon-color blur? theme)}])) -(defn- view-internal +(defn view [{:keys [title right accessibility-label] :as props}] [rn/view {:style style/container} [text/text @@ -67,5 +69,3 @@ :action [right-action props] :tag [right-tag props] nil)])]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/text_combinations/username/view.cljs b/src/quo/components/text_combinations/username/view.cljs index 5c1450a9e4..9932c0e447 100644 --- a/src/quo/components/text_combinations/username/view.cljs +++ b/src/quo/components/text_combinations/username/view.cljs @@ -7,35 +7,37 @@ [react-native.core :as rn])) (defn- username-text - [{:keys [theme name-type username accessibility-label blur?] + [{:keys [name-type username accessibility-label blur?] real-name :name}] - [rn/view {:style style/username-text-container} - [text/text - {:size :heading-1 - :accessibility-label accessibility-label - :weight :semi-bold} - username] - (when (= name-type :nickname) - [:<> - [text/text - {:style (style/real-name-dot theme blur?) - :size :paragraph-1 - :weight :medium} - "∙"] - [text/text - {:style (style/real-name-text theme blur?) - :size :paragraph-1 - :accessibility-label :real-name - :weight :medium - :number-of-lines 1} - real-name]])]) + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/username-text-container} + [text/text + {:size :heading-1 + :accessibility-label accessibility-label + :weight :semi-bold} + username] + (when (= name-type :nickname) + [:<> + [text/text + {:style (style/real-name-dot theme blur?) + :size :paragraph-1 + :weight :medium} + "∙"] + [text/text + {:style (style/real-name-text theme blur?) + :size :paragraph-1 + :accessibility-label :real-name + :weight :medium + :number-of-lines 1} + real-name]])])) (defn- icon-20 - [icon-name theme color] - [icon/icon icon-name - {:accessibility-label :username-status-icon - :size 20 - :color (colors/resolve-color color theme)}]) + [icon-name color] + (let [theme (quo.theme/use-theme)] + [icon/icon icon-name + {:accessibility-label :username-status-icon + :size 20 + :color (colors/resolve-color color theme)}])) (defn status-icon [{:keys [theme name-type status] @@ -51,10 +53,8 @@ [icon-20 :i/contact theme :blue]] nil)]) -(defn view-internal +(defn view [props] [rn/view {:style style/container} [username-text props] [status-icon props]]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/text_combinations/view.cljs b/src/quo/components/text_combinations/view.cljs index 6a412d93b0..422db85e77 100644 --- a/src/quo/components/text_combinations/view.cljs +++ b/src/quo/components/text_combinations/view.cljs @@ -3,7 +3,7 @@ [quo.components.buttons.button.view :as button] [quo.components.markdown.text :as text] [quo.components.text-combinations.style :as style] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn icon @@ -20,58 +20,46 @@ :width size :height size}}])) -(defn view-internal - [{:keys [container-style - title - theme - title-number-of-lines - avatar - title-accessibility-label - description - description-accessibility-label - button-icon - button-on-press - customization-color - emoji-hash - emoji] +(defn view + [{:keys [container-style title title-number-of-lines avatar title-accessibility-label description emoji + description-accessibility-label button-icon button-on-press customization-color emoji-hash] :or {title-number-of-lines 1}}] - [rn/view {:style container-style} - [rn/view - {:style {:flex-direction :row - :justify-content :space-between}} - [rn/view {:style style/title-container} - (when avatar - [rn/view {:style style/avatar-container} - [icon {:source avatar :size 32}]]) - (when emoji - [rn/view {:style style/avatar-container} - [icon {:source emoji :size 32 :customization-color customization-color :theme theme}]]) - [text/text - {:accessibility-label title-accessibility-label - :weight :semi-bold - :ellipsize-mode :tail - :style {:flex 1} - :number-of-lines title-number-of-lines - :size :heading-1} - title]] - (when button-icon - [button/button - {:icon-only? true - :on-press button-on-press - :customization-color customization-color - :size 32} button-icon])] - (when description - [text/text - {:accessibility-label description-accessibility-label - :weight :regular - :size :paragraph-1 - :style style/description-description-text} - description]) - (when emoji-hash - [text/text - {:number-of-lines 1 - :accessibility-label :emoji-hash - :style style/emoji-hash} - emoji-hash])]) - -(def view (theme/with-theme view-internal)) + (let [theme (quo.theme/use-theme)] + [rn/view {:style container-style} + [rn/view + {:style {:flex-direction :row + :justify-content :space-between}} + [rn/view {:style style/title-container} + (when avatar + [rn/view {:style style/avatar-container} + [icon {:source avatar :size 32}]]) + (when emoji + [rn/view {:style style/avatar-container} + [icon {:source emoji :size 32 :customization-color customization-color :theme theme}]]) + [text/text + {:accessibility-label title-accessibility-label + :weight :semi-bold + :ellipsize-mode :tail + :style {:flex 1} + :number-of-lines title-number-of-lines + :size :heading-1} + title]] + (when button-icon + [button/button + {:icon-only? true + :on-press button-on-press + :customization-color customization-color + :size 32} button-icon])] + (when description + [text/text + {:accessibility-label description-accessibility-label + :weight :regular + :size :paragraph-1 + :style style/description-description-text} + description]) + (when emoji-hash + [text/text + {:number-of-lines 1 + :accessibility-label :emoji-hash + :style style/emoji-hash} + emoji-hash])])) diff --git a/src/quo/components/wallet/account_card/view.cljs b/src/quo/components/wallet/account_card/view.cljs index c148d1e291..84c912b629 100644 --- a/src/quo/components/wallet/account_card/view.cljs +++ b/src/quo/components/wallet/account_card/view.cljs @@ -97,7 +97,7 @@ (defn- user-account [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics? on-press]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false)) @@ -155,7 +155,7 @@ (defn- add-account-view [{:keys [on-press customization-color metrics?]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/wallet/account_origin/schema.cljs b/src/quo/components/wallet/account_origin/schema.cljs index da3d9765a2..56f322496a 100644 --- a/src/quo/components/wallet/account_origin/schema.cljs +++ b/src/quo/components/wallet/account_origin/schema.cljs @@ -3,8 +3,7 @@ (def ^:private ?base [:map [:type {:optional true} [:enum :default-keypair :recovery-phrase :private-key]] - [:stored {:optional true} [:enum :on-device :on-keycard]] - [:theme :schema.common/theme]]) + [:stored {:optional true} [:enum :on-device :on-keycard]]]) (def ^:private ?default-keypair [:map diff --git a/src/quo/components/wallet/account_origin/view.cljs b/src/quo/components/wallet/account_origin/view.cljs index b35d3c7e22..91371fe6ce 100644 --- a/src/quo/components/wallet/account_origin/view.cljs +++ b/src/quo/components/wallet/account_origin/view.cljs @@ -96,8 +96,9 @@ :secondary-color secondary-color}]) (defn view-internal - [{:keys [type theme derivation-path on-press] :as props}] - (let [secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)] + [{:keys [type derivation-path on-press] :as props}] + (let [theme (quo.theme/use-theme) + secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)] [rn/view {:style (style/container theme)} [text/text {:weight :regular @@ -108,6 +109,4 @@ (when (not= :private-key type) [card-view theme derivation-path secondary-color on-press])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/account_overview/view.cljs b/src/quo/components/wallet/account_overview/view.cljs index 2cbe81493b..66f90642d4 100644 --- a/src/quo/components/wallet/account_overview/view.cljs +++ b/src/quo/components/wallet/account_overview/view.cljs @@ -96,9 +96,10 @@ (defn- view-internal [{:keys [state account time-frame time-frame-string time-frame-to-string account-name current-value - percentage-change currency-change theme metrics customization-color] + percentage-change currency-change metrics customization-color] :or {customization-color :blue}}] - (let [time-frame-string (time-string time-frame time-frame-string) + (let [theme (quo.theme/use-theme) + time-frame-string (time-string time-frame time-frame-string) up? (= metrics :positive)] [rn/view {:style style/account-overview-wrapper} (if (= :loading state) @@ -127,6 +128,4 @@ (seq currency-change)) [numeric-changes percentage-change currency-change customization-color theme up?])]])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/account_permissions/schema.cljs b/src/quo/components/wallet/account_permissions/schema.cljs index 8893b6b52a..7eebfe0327 100644 --- a/src/quo/components/wallet/account_permissions/schema.cljs +++ b/src/quo/components/wallet/account_permissions/schema.cljs @@ -18,6 +18,5 @@ [:disabled? {:optional true} [:maybe :boolean]] [:on-change {:optional true} [:maybe fn?]] [:container-style {:optional true} [:maybe :map]] - [:customization-color {:optional true} [:maybe :schema.common/customization-color]] - [:theme :schema.common/theme]]]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]] :any]) diff --git a/src/quo/components/wallet/account_permissions/view.cljs b/src/quo/components/wallet/account_permissions/view.cljs index b26f1c0598..0444a2d904 100644 --- a/src/quo/components/wallet/account_permissions/view.cljs +++ b/src/quo/components/wallet/account_permissions/view.cljs @@ -50,41 +50,40 @@ (defn- view-internal [{:keys - [checked? disabled? on-change token-details keycard? theme container-style customization-color] + [checked? disabled? on-change token-details keycard? container-style customization-color] {:keys [name address emoji] :as account} :account :or {customization-color :blue}}] - [rn/view - {:style (merge (style/container theme) container-style) - :accessibility-label :wallet-account-permissions} - [rn/view {:style style/row1} - [account-avatar/view - {:size 32 - :emoji emoji - :customization-color (:customization-color account)}] - [rn/view {:style style/account-details} - [rn/view {:style style/name-and-keycard} - [text/text - {:size :paragraph-1 - :weight :semi-bold} name] - (when keycard? - [icons/icon :i/keycard-card - {:accessibility-label :wallet-account-permissions-keycard - :size 20 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])] - [address-text/view - {:address address - :format :short}]] - [selectors/view - {:type :checkbox - :checked? checked? - :customization-color customization-color - :disabled? disabled? - :on-change on-change}]] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/container theme) container-style) + :accessibility-label :wallet-account-permissions} + [rn/view {:style style/row1} + [account-avatar/view + {:size 32 + :emoji emoji + :customization-color (:customization-color account)}] + [rn/view {:style style/account-details} + [rn/view {:style style/name-and-keycard} + [text/text + {:size :paragraph-1 + :weight :semi-bold} name] + (when keycard? + [icons/icon :i/keycard-card + {:accessibility-label :wallet-account-permissions-keycard + :size 20 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])] + [address-text/view + {:address address + :format :short}]] + [selectors/view + {:type :checkbox + :checked? checked? + :customization-color customization-color + :disabled? disabled? + :on-change on-change}]] - [token-details-section token-details]]) + [token-details-section token-details]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/address_text/schema.cljs b/src/quo/components/wallet/address_text/schema.cljs index ea68139e84..6f917403e2 100644 --- a/src/quo/components/wallet/address_text/schema.cljs +++ b/src/quo/components/wallet/address_text/schema.cljs @@ -8,7 +8,6 @@ [:address {:optional true} [:maybe :string]] [:blur? {:optional true} [:maybe :boolean]] [:format {:optional true} [:enum :short :long]] - [:theme :schema.common/theme] [:networks {:optional true} [:maybe [:sequential [:map [:network-name :keyword] [:short-name :string]]]]] [:full-address? {:optional true} [:maybe :boolean]] diff --git a/src/quo/components/wallet/address_text/view.cljs b/src/quo/components/wallet/address_text/view.cljs index 9cb5106356..760d377abd 100644 --- a/src/quo/components/wallet/address_text/view.cljs +++ b/src/quo/components/wallet/address_text/view.cljs @@ -17,9 +17,10 @@ (str network ":")]) (defn- view-internal - [{:keys [networks address blur? theme format full-address? size weight] + [{:keys [networks address blur? format full-address? size weight] :or {size :paragraph-2}}] - (let [network-colored-text (map #(colored-network-text {:theme theme + (let [theme (quo.theme/use-theme) + network-colored-text (map #(colored-network-text {:theme theme :network % :weight weight :size size})) @@ -44,6 +45,4 @@ (into [text/text] network-colored-text $) (conj $ address-text)))) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/amount_input/view.cljs b/src/quo/components/wallet/amount_input/view.cljs index 77433872a0..926ade8625 100644 --- a/src/quo/components/wallet/amount_input/view.cljs +++ b/src/quo/components/wallet/amount_input/view.cljs @@ -26,7 +26,7 @@ :or {value 0 min-value 0 max-value 999999999}}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style (merge style/container container-style)} [amount-button diff --git a/src/quo/components/wallet/confirmation_progress/schema.cljs b/src/quo/components/wallet/confirmation_progress/schema.cljs index c3c8ef2ebc..a6dcb19eb2 100644 --- a/src/quo/components/wallet/confirmation_progress/schema.cljs +++ b/src/quo/components/wallet/confirmation_progress/schema.cljs @@ -10,6 +10,5 @@ [:progress-value {:optional true} [:maybe :int]] [:network {:optional true} [:enum :mainnet :optimism :arbitrum]] [:state {:optional true} [:enum :pending :sending :confirmed :finalising :finalized :error]] - [:customization-color {:optional true} [:maybe :schema.common/customization-color]] - [:theme :schema.common/theme]]]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]] :any]) diff --git a/src/quo/components/wallet/confirmation_progress/view.cljs b/src/quo/components/wallet/confirmation_progress/view.cljs index 02deb81086..173ead8131 100644 --- a/src/quo/components/wallet/confirmation_progress/view.cljs +++ b/src/quo/components/wallet/confirmation_progress/view.cljs @@ -2,7 +2,6 @@ (:require [quo.components.wallet.confirmation-progress.schema :as component-schema] [quo.components.wallet.confirmation-progress.style :as style] [quo.components.wallet.progress-bar.view :as progress-box] - [quo.theme :as quo.theme] [react-native.core :as rn] [schema.core :as schema])) @@ -68,6 +67,4 @@ (:arbitrum :optimism) [progress-boxes-sidenet props] nil)) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/keypair/view.cljs b/src/quo/components/wallet/keypair/view.cljs index a995fc4a67..f6065daab0 100644 --- a/src/quo/components/wallet/keypair/view.cljs +++ b/src/quo/components/wallet/keypair/view.cljs @@ -38,7 +38,7 @@ (defn title-view [{:keys [details action selected? type blur? customization-color on-options-press]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) {:keys [full-name]} details] [rn/view {:style style/title-container diff --git a/src/quo/components/wallet/network_amount/schema.cljs b/src/quo/components/wallet/network_amount/schema.cljs index a7baa54e5f..12ebd1fc13 100644 --- a/src/quo/components/wallet/network_amount/schema.cljs +++ b/src/quo/components/wallet/network_amount/schema.cljs @@ -6,6 +6,5 @@ [:props [:map {:closed true} [:amount {:optional true} [:maybe :string]] - [:token {:optional true} [:or :keyword :string]] - [:theme :schema.common/theme]]]] + [:token {:optional true} [:or :keyword :string]]]]] :any]) diff --git a/src/quo/components/wallet/network_amount/view.cljs b/src/quo/components/wallet/network_amount/view.cljs index 2e92a8c6de..207f5acfd4 100644 --- a/src/quo/components/wallet/network_amount/view.cljs +++ b/src/quo/components/wallet/network_amount/view.cljs @@ -10,15 +10,16 @@ [schema.core :as schema])) (defn- view-internal - [{:keys [amount token theme]}] - [rn/view {:style style/container} - [token/view {:token token :size :size-12}] - [text/text - {:weight :medium - :size :paragraph-2 - :style style/text} - (str amount " " (string/upper-case (clj->js token)))] - [rn/view - {:style (style/divider theme)}]]) + [{:keys [amount token]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/container} + [token/view {:token token :size :size-12}] + [text/text + {:weight :medium + :size :paragraph-2 + :style style/text} + (str amount " " (string/upper-case (clj->js token)))] + [rn/view + {:style (style/divider theme)}]])) -(def view (quo.theme/with-theme (schema/instrument #'view-internal network-amount-schema/?schema))) +(def view (schema/instrument #'view-internal network-amount-schema/?schema)) diff --git a/src/quo/components/wallet/network_bridge/schema.cljs b/src/quo/components/wallet/network_bridge/schema.cljs index c070baabb2..67d9a57825 100644 --- a/src/quo/components/wallet/network_bridge/schema.cljs +++ b/src/quo/components/wallet/network_bridge/schema.cljs @@ -8,7 +8,6 @@ [:catn [:props [:map - [:theme :schema.common/theme] [:network {:optional true} [:maybe :keyword]] [:status {:optional true} [:maybe ?network-bridge-status]] [:amount {:optional true} [:maybe :string]] diff --git a/src/quo/components/wallet/network_bridge/view.cljs b/src/quo/components/wallet/network_bridge/view.cljs index c033ee953a..119c46c86a 100644 --- a/src/quo/components/wallet/network_bridge/view.cljs +++ b/src/quo/components/wallet/network_bridge/view.cljs @@ -27,43 +27,42 @@ :else (string/capitalize (name network)))) (defn view-internal - [{:keys [theme network status amount container-style on-press] :as args}] - (if (= status :add) - [network-bridge-add args] - [rn/pressable - {:style (merge (style/container network status theme) container-style) - :accessible true - :accessibility-label :container - :on-press on-press} - (if (= status :loading) + [{:keys [network status amount container-style on-press] :as args}] + (let [theme (quo.theme/use-theme)] + (if (= status :add) + [network-bridge-add args] + [rn/pressable + {:style (merge (style/container network status theme) container-style) + :accessible true + :accessibility-label :container + :on-press on-press} + (if (= status :loading) + [rn/view + {:style (style/loading-skeleton theme) + :accessible true + :accessibility-label :loading}] + [rn/view + {:style {:flex-direction :row + :justify-content :space-between}} + [text/text + {:size :paragraph-2 + :weight :medium} amount] + (when (= status :locked) + [icon/icon :i/locked + {:size 12 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) + :accessible true + :accessibility-label :lock}])]) [rn/view - {:style (style/loading-skeleton theme) - :accessible true - :accessibility-label :loading}] - [rn/view - {:style {:flex-direction :row - :justify-content :space-between}} + {:style {:flex-direction :row + :align-items :center}} + [rn/image + {:source (resources/get-network network) + :style style/network-icon}] [text/text - {:size :paragraph-2 - :weight :medium} amount] - (when (= status :locked) - [icon/icon :i/locked - {:size 12 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) - :accessible true - :accessibility-label :lock}])]) - [rn/view - {:style {:flex-direction :row - :align-items :center}} - [rn/image - {:source (resources/get-network network) - :style style/network-icon}] - [text/text - {:size :label - :weight :medium - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - (network->text network)]]])) + {:size :label + :weight :medium + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (network->text network)]]]))) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal network-bridge-schema/?schema))) +(def view (schema/instrument #'view-internal network-bridge-schema/?schema)) diff --git a/src/quo/components/wallet/network_link/schema.cljs b/src/quo/components/wallet/network_link/schema.cljs index c0b89e2351..e8d2ec086b 100644 --- a/src/quo/components/wallet/network_link/schema.cljs +++ b/src/quo/components/wallet/network_link/schema.cljs @@ -9,6 +9,5 @@ [:map [:shape {:optional true} [:maybe [:enum :linear :1x :2x]]] [:source {:optional true} [:maybe ?networks]] - [:destination {:optional true} [:maybe ?networks]] - [:theme :schema.common/theme]]]] + [:destination {:optional true} [:maybe ?networks]]]]] :any]) diff --git a/src/quo/components/wallet/network_link/view.cljs b/src/quo/components/wallet/network_link/view.cljs index 2b9f56a53d..a0c7114536 100644 --- a/src/quo/components/wallet/network_link/view.cljs +++ b/src/quo/components/wallet/network_link/view.cljs @@ -35,8 +35,9 @@ :stroke-width "1"}]]) (defn link-linear - [{:keys [source theme]}] - (let [[container-width + [{:keys [source]}] + (let [theme (quo.theme/use-theme) + [container-width set-container-width] (rn/use-state 100) stroke-color (colors/resolve-color source theme) fill-color (colors/theme-colors colors/white colors/neutral-90 theme) @@ -52,8 +53,9 @@ [circle fill-color stroke-color]]])) (defn link-1x - [{:keys [source destination theme]}] - (let [[container-width + [{:keys [source destination]}] + (let [theme (quo.theme/use-theme) + [container-width set-container-width] (rn/use-state 100) stroke-color "url(#gradient)" source-color (colors/resolve-color source theme) @@ -100,8 +102,9 @@ [circle fill-color destination-color]]])) (defn link-2x - [{:keys [source destination theme]}] - (let [[container-width + [{:keys [source destination]}] + (let [theme (quo.theme/use-theme) + [container-width set-container-width] (rn/use-state 100) stroke-color "url(#gradient)" source-color (colors/resolve-color source theme) @@ -155,6 +158,4 @@ :1x [link-1x props] :2x [link-2x props])]) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/network_routing/component_spec.cljs b/src/quo/components/wallet/network_routing/component_spec.cljs index cb3475988a..2a4487ddec 100644 --- a/src/quo/components/wallet/network_routing/component_spec.cljs +++ b/src/quo/components/wallet/network_routing/component_spec.cljs @@ -22,7 +22,7 @@ ;; Fires on-layout callback since the total width is required (h/fire-event :layout component #js {:nativeEvent #js {:layout #js {:width 1000}}}) ;; Update props to trigger rerender, otherwise it won't be updated - (rerender-fn [quo.theme/provider {:theme :light} + (rerender-fn [quo.theme/provider :light [network-routing/view (assoc default-props :requesting-data? true)]]) ;; Check number of networks rendered (->> (js->clj (h/query-all-by-label-text :network-routing-bar)) diff --git a/src/quo/components/wallet/network_routing/view.cljs b/src/quo/components/wallet/network_routing/view.cljs index 25331398c0..577acec69a 100644 --- a/src/quo/components/wallet/network_routing/view.cljs +++ b/src/quo/components/wallet/network_routing/view.cljs @@ -197,7 +197,7 @@ (defn view-internal [{:keys [networks container-style] :as params}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [total-width set-total-width] (rn/use-state nil) on-layout (rn/use-callback #(let [width (oops/oget % "nativeEvent.layout.width")] diff --git a/src/quo/components/wallet/progress_bar/schema.cljs b/src/quo/components/wallet/progress_bar/schema.cljs index 6ef509a6ac..25be8a4268 100644 --- a/src/quo/components/wallet/progress_bar/schema.cljs +++ b/src/quo/components/wallet/progress_bar/schema.cljs @@ -6,7 +6,6 @@ [:props [:map [:customization-color {:optional true} [:maybe :schema.common/customization-color]] - [:theme :schema.common/theme] [:progressed-value {:optional true} [:maybe [:or :string :int]]] [:full-width? {:optional true} [:maybe :boolean]]]]] :any]) diff --git a/src/quo/components/wallet/progress_bar/style.cljs b/src/quo/components/wallet/progress_bar/style.cljs index 8a1ebe76c1..a8fb77f117 100644 --- a/src/quo/components/wallet/progress_bar/style.cljs +++ b/src/quo/components/wallet/progress_bar/style.cljs @@ -24,7 +24,7 @@ (def max-value 100) (defn root-container - [{:keys [customization-color state theme full-width?]}] + [{:keys [customization-color state full-width?]} theme] (let [{:keys [background-color border-color]} (get-in (border-and-background-color customization-color theme) [theme (if full-width? :pending state)])] @@ -39,7 +39,7 @@ :margin-vertical 2})) (defn progressed-bar - [{:keys [customization-color state theme progressed-value]}] + [{:keys [customization-color state progressed-value]} theme] (let [{:keys [background-color]} (get-in (border-and-background-color customization-color theme) [theme state]) progress (if (> progressed-value max-value) max-value progressed-value)] diff --git a/src/quo/components/wallet/progress_bar/view.cljs b/src/quo/components/wallet/progress_bar/view.cljs index f7c7e9e8f7..6d9c422bcb 100644 --- a/src/quo/components/wallet/progress_bar/view.cljs +++ b/src/quo/components/wallet/progress_bar/view.cljs @@ -8,12 +8,11 @@ (defn- view-internal [{:keys [full-width?] :as props}] - [rn/view - {:accessibility-label :progress-bar - :style (style/root-container props)} - (when full-width? - [rn/view {:style (style/progressed-bar props)}])]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:accessibility-label :progress-bar + :style (style/root-container props theme)} + (when full-width? + [rn/view {:style (style/progressed-bar props theme)}])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal progress-bar-schema/?schema))) +(def view (schema/instrument #'view-internal progress-bar-schema/?schema)) diff --git a/src/quo/components/wallet/required_tokens/schema.cljs b/src/quo/components/wallet/required_tokens/schema.cljs index 8bf19f6864..6ad329d869 100644 --- a/src/quo/components/wallet/required_tokens/schema.cljs +++ b/src/quo/components/wallet/required_tokens/schema.cljs @@ -12,6 +12,5 @@ [:collectible-img-src {:optional true} [:maybe :schema.common/image-source]] [:collectible-name {:optional true} [:maybe :string]] [:divider? {:optional true} [:maybe :boolean]] - [:theme :schema.common/theme] [:container-style {:optional true} [:maybe :map]]]]] :any]) diff --git a/src/quo/components/wallet/required_tokens/view.cljs b/src/quo/components/wallet/required_tokens/view.cljs index 6a70955570..3cfb7a9657 100644 --- a/src/quo/components/wallet/required_tokens/view.cljs +++ b/src/quo/components/wallet/required_tokens/view.cljs @@ -8,34 +8,33 @@ [schema.core :as schema])) (defn- view-internal - [{:keys [type amount token token-img-src collectible-img-src collectible-name divider? theme + [{:keys [type amount token token-img-src collectible-img-src collectible-name divider? container-style]}] - [rn/view - {:style (merge style/container container-style) - :accessibility-label :wallet-required-tokens} - (case type - :token [token/view - (assoc (if token-img-src - {:image-source token-img-src} - {:token token}) - :size - 14)] - :collectible [rn/image - {:style style/collectible-img - :source collectible-img-src}] - nil) - [text/text - {:size :paragraph-2 - :weight :medium - :style {:margin-left 4}} - (case type - :token (str amount " " token) - :collectible (str amount " " collectible-name) - nil)] - (when divider? - [rn/view - {:style (style/divider theme)}])]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge style/container container-style) + :accessibility-label :wallet-required-tokens} + (case type + :token [token/view + (assoc (if token-img-src + {:image-source token-img-src} + {:token token}) + :size + 14)] + :collectible [rn/image + {:style style/collectible-img + :source collectible-img-src}] + nil) + [text/text + {:size :paragraph-2 + :weight :medium + :style {:margin-left 4}} + (case type + :token (str amount " " token) + :collectible (str amount " " collectible-name) + nil)] + (when divider? + [rn/view + {:style (style/divider theme)}])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal required-tokens-schema/?schema))) +(def view (schema/instrument #'view-internal required-tokens-schema/?schema)) diff --git a/src/quo/components/wallet/summary_info/schema.cljs b/src/quo/components/wallet/summary_info/schema.cljs index 3d604830b5..83f9e912e3 100644 --- a/src/quo/components/wallet/summary_info/schema.cljs +++ b/src/quo/components/wallet/summary_info/schema.cljs @@ -5,7 +5,6 @@ [:catn [:props [:map - [:theme :schema.common/theme] [:type [:enum :status-account :saved-account :account :user]] [:account-props {:optional true} [:maybe :map]] [:networks? {:optional true} [:maybe :boolean]] diff --git a/src/quo/components/wallet/summary_info/view.cljs b/src/quo/components/wallet/summary_info/view.cljs index 23593e2877..ea97aef79f 100644 --- a/src/quo/components/wallet/summary_info/view.cljs +++ b/src/quo/components/wallet/summary_info/view.cljs @@ -58,45 +58,44 @@ :theme theme}])])) (defn- view-internal - [{:keys [theme type account-props networks? values]}] - [rn/view - {:style (style/container networks? theme)} - [rn/view - {:style style/info-container} - (case type - :status-account [account-avatar/view account-props] - :saved-account [wallet-user-avatar/wallet-user-avatar (assoc account-props :size :size-32)] - :account [wallet-user-avatar/wallet-user-avatar - (assoc account-props - :size :size-32 - :neutral? true)] - [user-avatar/user-avatar account-props]) - [rn/view {:style {:margin-left 8}} - (when (not= type :account) [text/text {:weight :semi-bold} (:name account-props)]) + [{:keys [type account-props networks? values]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (style/container networks? theme)} [rn/view - {:style {:flex-direction :row - :align-items :center}} - (when (= type :user) - [:<> - [rn/view {:style {:margin-right 4}} [account-avatar/view (:status-account account-props)]] - [text/text - {:size :paragraph-2 - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - (get-in account-props [:status-account :name])] - [rn/view - {:style (style/dot-divider theme)}]]) - [text/text - {:size (when (not= type :account) :paragraph-2) - :weight (when (= type :account) :semi-bold) - :style {:color (when (not= type :account) - (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}} - (:address account-props)]]]] - (when networks? - [:<> - [rn/view - {:style (style/line-divider theme)}] - [networks values theme]])]) + {:style style/info-container} + (case type + :status-account [account-avatar/view account-props] + :saved-account [wallet-user-avatar/wallet-user-avatar (assoc account-props :size :size-32)] + :account [wallet-user-avatar/wallet-user-avatar + (assoc account-props + :size :size-32 + :neutral? true)] + [user-avatar/user-avatar account-props]) + [rn/view {:style {:margin-left 8}} + (when (not= type :account) [text/text {:weight :semi-bold} (:name account-props)]) + [rn/view + {:style {:flex-direction :row + :align-items :center}} + (when (= type :user) + [:<> + [rn/view {:style {:margin-right 4}} [account-avatar/view (:status-account account-props)]] + [text/text + {:size :paragraph-2 + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (get-in account-props [:status-account :name])] + [rn/view + {:style (style/dot-divider theme)}]]) + [text/text + {:size (when (not= type :account) :paragraph-2) + :weight (when (= type :account) :semi-bold) + :style {:color (when (not= type :account) + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}} + (:address account-props)]]]] + (when networks? + [:<> + [rn/view + {:style (style/line-divider theme)}] + [networks values theme]])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal summary-info-schema/?schema))) +(def view (schema/instrument #'view-internal summary-info-schema/?schema)) diff --git a/src/quo/components/wallet/token_input/view.cljs b/src/quo/components/wallet/token_input/view.cljs index 701197f889..cf77007656 100644 --- a/src/quo/components/wallet/token_input/view.cljs +++ b/src/quo/components/wallet/token_input/view.cljs @@ -125,7 +125,7 @@ (defn- view-internal [{:keys [container-style value on-swap] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) width (:width (rn/get-window)) [value-internal set-value-internal] (rn/use-state nil) [crypto? set-crypto] (rn/use-state true) diff --git a/src/quo/components/wallet/transaction_progress/component_spec.cljs b/src/quo/components/wallet/transaction_progress/component_spec.cljs index 347fea1e97..0a277732b1 100644 --- a/src/quo/components/wallet/transaction_progress/component_spec.cljs +++ b/src/quo/components/wallet/transaction_progress/component_spec.cljs @@ -30,7 +30,7 @@ (h/describe "Transaction Progress" (h/test "component renders without props" (h/render-with-theme-provider - [quo/transaction-progress]) + [quo/transaction-progress {}]) (h/is-truthy (h/get-by-label-text :transaction-progress))) (h/test "component renders when state is pending and network is mainnet" diff --git a/src/quo/components/wallet/transaction_progress/schema.cljs b/src/quo/components/wallet/transaction_progress/schema.cljs index 2c2cb4840b..fcd8ab06ad 100644 --- a/src/quo/components/wallet/transaction_progress/schema.cljs +++ b/src/quo/components/wallet/transaction_progress/schema.cljs @@ -14,7 +14,6 @@ [:catn [:props [:map - [:theme :schema.common/theme] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:title {:optional true} [:maybe :string]] [:tag-name {:optional true} [:maybe :string]] diff --git a/src/quo/components/wallet/transaction_progress/view.cljs b/src/quo/components/wallet/transaction_progress/view.cljs index 7ddda95d6e..5501e2ff07 100644 --- a/src/quo/components/wallet/transaction_progress/view.cljs +++ b/src/quo/components/wallet/transaction_progress/view.cljs @@ -170,22 +170,21 @@ :progress-value progress}]]) (defn- view-internal - [{:keys [title on-press accessibility-label theme tag-photo tag-name tag-number networks] + [{:keys [title on-press accessibility-label tag-photo tag-name tag-number networks] :or {accessibility-label :transaction-progress}}] - [rn/touchable-without-feedback - {:on-press on-press - :accessibility-label accessibility-label} - [rn/view {:style (style/box-style theme)} - [title-internal - {:title title - :theme theme - :networks networks}] - [tag-internal tag-photo tag-name tag-number theme] - (for [network networks] - (let [assoc-props #(get-network networks %)] - ^{:key (:network network)} - [view-network (assoc-props (:network network))]))]]) + (let [theme (quo.theme/use-theme)] + [rn/touchable-without-feedback + {:on-press on-press + :accessibility-label accessibility-label} + [rn/view {:style (style/box-style theme)} + [title-internal + {:title title + :theme theme + :networks networks}] + [tag-internal tag-photo tag-name tag-number theme] + (for [network networks] + (let [assoc-props #(get-network networks %)] + ^{:key (:network network)} + [view-network (assoc-props (:network network))]))]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/transaction_summary/schema.cljs b/src/quo/components/wallet/transaction_summary/schema.cljs index 908abb6477..4cfe9e2173 100644 --- a/src/quo/components/wallet/transaction_summary/schema.cljs +++ b/src/quo/components/wallet/transaction_summary/schema.cljs @@ -6,7 +6,6 @@ [:catn [:props [:map - [:theme :schema.common/theme] [:transaction {:optional true} [:maybe [:enum :send :swap :bridge]]] [:first-tag {:optional true} [:maybe context-tag-schema/?schema]] [:second-tag {:optional true} [:maybe context-tag-schema/?schema]] diff --git a/src/quo/components/wallet/transaction_summary/view.cljs b/src/quo/components/wallet/transaction_summary/view.cljs index eb253e692a..a4fd260452 100644 --- a/src/quo/components/wallet/transaction_summary/view.cljs +++ b/src/quo/components/wallet/transaction_summary/view.cljs @@ -68,40 +68,39 @@ content]]) (defn- view-internal - [{:keys [theme first-tag second-tag third-tag fourth-tag second-tag-prefix + [{:keys [first-tag second-tag third-tag fourth-tag second-tag-prefix third-tag-prefix fourth-tag-prefix fifth-tag max-fees nonce input-data] :as props}] - [rn/view - {:style (style/container theme) - :accessibility-label :transaction-summary} - [transaction-header props] - [rn/view {:style style/content} - [rn/view {:style style/content-line} - (when first-tag [prop-tag first-tag]) - (when second-tag-prefix [prop-text second-tag-prefix theme]) - (when second-tag [prop-tag second-tag])] - [rn/view {:style style/content-line} - (when third-tag-prefix [prop-text third-tag-prefix theme]) - (when third-tag [prop-tag third-tag]) - (when fourth-tag-prefix [prop-text fourth-tag-prefix theme]) - (when fourth-tag [prop-tag fourth-tag]) - (when fifth-tag [prop-tag fifth-tag])]] - [rn/view {:style (style/divider theme)}] - [rn/view {:style style/extras-container} - [extra-info - {:header (i18n/label :t/max-fees) - :content max-fees - :theme theme}] - [extra-info - {:header (i18n/label :t/nonce) - :content nonce - :theme theme}] - [extra-info - {:header (i18n/label :t/input-data) - :content input-data - :theme theme}]]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (style/container theme) + :accessibility-label :transaction-summary} + [transaction-header props] + [rn/view {:style style/content} + [rn/view {:style style/content-line} + (when first-tag [prop-tag first-tag]) + (when second-tag-prefix [prop-text second-tag-prefix theme]) + (when second-tag [prop-tag second-tag])] + [rn/view {:style style/content-line} + (when third-tag-prefix [prop-text third-tag-prefix theme]) + (when third-tag [prop-tag third-tag]) + (when fourth-tag-prefix [prop-text fourth-tag-prefix theme]) + (when fourth-tag [prop-tag fourth-tag]) + (when fifth-tag [prop-tag fifth-tag])]] + [rn/view {:style (style/divider theme)}] + [rn/view {:style style/extras-container} + [extra-info + {:header (i18n/label :t/max-fees) + :content max-fees + :theme theme}] + [extra-info + {:header (i18n/label :t/nonce) + :content nonce + :theme theme}] + [extra-info + {:header (i18n/label :t/input-data) + :content input-data + :theme theme}]]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/wallet_activity/view.cljs b/src/quo/components/wallet/wallet_activity/view.cljs index 1b9c8d0f0e..4690cd3499 100644 --- a/src/quo/components/wallet/wallet_activity/view.cljs +++ b/src/quo/components/wallet/wallet_activity/view.cljs @@ -102,7 +102,7 @@ [{:keys [state blur? first-tag second-tag third-tag fourth-tag on-press second-tag-prefix third-tag-prefix fourth-tag-prefix] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) diff --git a/src/quo/components/wallet/wallet_overview/schema.cljs b/src/quo/components/wallet/wallet_overview/schema.cljs index d65836c7bc..c2ed3f383f 100644 --- a/src/quo/components/wallet/wallet_overview/schema.cljs +++ b/src/quo/components/wallet/wallet_overview/schema.cljs @@ -15,7 +15,6 @@ [:end-date {:optional true} [:maybe :string]] [:currency-change {:optional true} [:maybe :string]] [:percentage-change {:optional true} [:maybe :string]] - [:theme :schema.common/theme] [:dropdown-on-press {:optional true} [:maybe fn?]] [:networks {:optional true} [:maybe [:sequential [:map [:source [:maybe :schema.common/image-source]]]]]] diff --git a/src/quo/components/wallet/wallet_overview/view.cljs b/src/quo/components/wallet/wallet_overview/view.cljs index f3045225ba..bd0b370bac 100644 --- a/src/quo/components/wallet/wallet_overview/view.cljs +++ b/src/quo/components/wallet/wallet_overview/view.cljs @@ -25,20 +25,21 @@ bars)) (defn- view-info-top - [{:keys [state balance theme networks dropdown-on-press dropdown-state]}] - [rn/view {:style style/container-info-top} - (if (= state :loading) - (loading-bars [{:width 201 :height 20 :margin 0}] theme) - [text/text - {:weight :semi-bold - :size :heading-1 - :style (style/style-text-heading theme)} - balance]) - [network-dropdown/view - {:state (or dropdown-state :default) - :blur? true - :on-press dropdown-on-press} - networks]]) + [{:keys [state balance networks dropdown-on-press dropdown-state]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/container-info-top} + (if (= state :loading) + (loading-bars [{:width 201 :height 20 :margin 0}] theme) + [text/text + {:weight :semi-bold + :size :heading-1 + :style (style/style-text-heading theme)} + balance]) + [network-dropdown/view + {:state (or dropdown-state :default) + :blur? true + :on-press dropdown-on-press} + networks]])) (defn- view-metrics [{:keys [metrics currency-change percentage-change theme]}] @@ -118,6 +119,4 @@ [view-info-top props] [view-info-bottom props]]) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/foundations/colors.cljs b/src/quo/foundations/colors.cljs index 04248181d6..6275d13b41 100644 --- a/src/quo/foundations/colors.cljs +++ b/src/quo/foundations/colors.cljs @@ -1,7 +1,7 @@ (ns quo.foundations.colors (:require [clojure.string :as string] - [quo.theme :as theme] + [quo.theme] [react-native.platform :as platform])) (def account-colors @@ -37,10 +37,10 @@ (def theme-alpha (memoize (fn - ([color light-opacity dark-opacity] - (theme-alpha color light-opacity color dark-opacity)) - ([light-color light-opacity dark-color dark-opacity] - (if (theme/dark?) + ([color light-opacity dark-opacity theme] + (theme-alpha color light-opacity color dark-opacity theme)) + ([light-color light-opacity dark-color dark-opacity theme] + (if (= :dark theme) (alpha light-color light-opacity) (alpha dark-color dark-opacity)))))) @@ -364,16 +364,7 @@ (def shadow "rgba(9,16,28,0.08)") -;;General - -;; divider -(def divider-light "#EDF2f4") -(def divider-dark "#0E1620") - (defn theme-colors "(theme-colors light dark override-theme)" - ([light dark] - (theme-colors light dark nil)) - ([light dark override-theme] - (let [theme (or override-theme (theme/get-theme))] - (if (= theme :light) light dark)))) + [light dark theme] + (if (= theme :light) light dark)) diff --git a/src/quo/foundations/gradients.cljs b/src/quo/foundations/gradients.cljs index 03338ddfcf..76acc75516 100644 --- a/src/quo/foundations/gradients.cljs +++ b/src/quo/foundations/gradients.cljs @@ -25,7 +25,7 @@ (defn view [{:keys [color-index container-style] :or {color-index 1}}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [linear-gradient/linear-gradient {:style (merge {:border-radius 16} container-style) :accessibility-label :gradient-overlay diff --git a/src/quo/foundations/shadows.cljs b/src/quo/foundations/shadows.cljs index d6f1244ec7..431378f482 100644 --- a/src/quo/foundations/shadows.cljs +++ b/src/quo/foundations/shadows.cljs @@ -2,7 +2,6 @@ (:refer-clojure :exclude [get]) (:require [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] [react-native.platform :as platform] [utils.number])) @@ -83,8 +82,6 @@ `theme` - :light/:dark (optional). `scale-type` - :normal/:inverted (optional). " - ([weight] - (get weight (quo.theme/get-theme))) ([weight theme] (get weight theme :normal)) ([weight theme scale-type] diff --git a/src/quo/theme.cljs b/src/quo/theme.cljs index c92091d6b7..ef2d61d72a 100644 --- a/src/quo/theme.cljs +++ b/src/quo/theme.cljs @@ -1,61 +1,16 @@ (ns quo.theme (:require ["react" :as react] - [react-native.core :as rn] - [reagent.core :as reagent] - utils.transforms)) + [react-native.core :as rn])) (defonce ^:private theme-context (react/createContext :light)) -(defonce ^:private theme-state (reagent/atom :light)) - -(defn dark? - [] - (= :dark @theme-state)) - -(defn get-theme - [] - @theme-state) - -(defn set-theme - [value] - (reset! theme-state value)) - -(defn theme-value - "Returns a value based on the current/override-theme theme." - ([light-value dark-value] - (theme-value light-value dark-value nil)) - ([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 `quo.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}] + [theme & children] + (into [:> (.-Provider theme-context) {:value theme}] children)) (defn use-theme - "A hook that returns the current theme context." + "A hook that returns the current theme keyword." [] - (utils.transforms/js->clj (rn/use-context theme-context))) - -(defn use-theme-value - [] - (keyword (:theme (use-theme)))) - -(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 `quo.theme/provider`." - [component] - (fn [& args] - (into [:f> f-with-theme component] args))) + (keyword (rn/use-context theme-context))) diff --git a/src/status_im/common/alert_banner/events.cljs b/src/status_im/common/alert_banner/events.cljs index ff5cf853da..56fc0f62e4 100644 --- a/src/status_im/common/alert_banner/events.cljs +++ b/src/status_im/common/alert_banner/events.cljs @@ -7,7 +7,7 @@ db (assoc-in db [:alert-banners (:type banner)] banner)] (cond-> {:db db} (zero? current-banners-count) - (assoc :show-alert-banner (:view-id db))))) + (assoc :show-alert-banner [(:view-id db) (:theme db)])))) (defn remove-alert-banner [{:keys [db]} [banner-type]] @@ -15,12 +15,12 @@ new-count (count (get db :alert-banners))] (cond-> {:db db} (zero? new-count) - (assoc :hide-alert-banner (:view-id db))))) + (assoc :hide-alert-banner [(:view-id db) (:theme db)])))) (defn remove-all-alert-banners [{:keys [db]}] {:db (dissoc db :alert-banners) - :hide-alert-banner (:view-id db)}) + :hide-alert-banner [(:view-id db) (:theme db)]}) (re-frame/reg-event-fx :alert-banners/add add-alert-banner) (re-frame/reg-event-fx :alert-banners/remove remove-alert-banner) diff --git a/src/status_im/common/alert_banner/events_test.cljs b/src/status_im/common/alert_banner/events_test.cljs index 6244a483ef..1061fb7b81 100644 --- a/src/status_im/common/alert_banner/events_test.cljs +++ b/src/status_im/common/alert_banner/events_test.cljs @@ -9,7 +9,7 @@ (is (match? {:db {:alert-banners {:alert {:text "Alert" :type :alert}}} - :show-alert-banner nil} + :show-alert-banner [nil nil]} (events/add-alert-banner {:db {}} [{:text "Alert" :type :alert}]))))) @@ -17,7 +17,7 @@ (deftest remove-alert-banner (testing "Alert banner is removed" (is (match? {:db {} - :hide-alert-banner nil} + :hide-alert-banner [nil nil]} (events/remove-alert-banner {:db {:alert-banners {:alert {:text "Alert" :type :alert}}}} @@ -34,7 +34,7 @@ (deftest remove-all-alert-banners (testing "All Alert banners are removed" (is (match? {:db {} - :hide-alert-banner nil} + :hide-alert-banner [nil nil]} (events/remove-all-alert-banners {:db {:alert-banners {:alert {:text "Alert" :type :alert} diff --git a/src/status_im/common/alert_banner/view.cljs b/src/status_im/common/alert_banner/view.cljs index 3cd4e341a3..4f34e4e2bb 100644 --- a/src/status_im/common/alert_banner/view.cljs +++ b/src/status_im/common/alert_banner/view.cljs @@ -39,7 +39,7 @@ (defn view [] (let [banners (rf/sub [:alert-banners]) - theme (quo.theme/use-theme-value) + theme (quo.theme/use-theme) banners-count (count banners) alert-banner (:alert banners) error-banner (:error banners) diff --git a/src/status_im/common/bottom_sheet/view.cljs b/src/status_im/common/bottom_sheet/view.cljs index a2191eb447..905f1bcb5f 100644 --- a/src/status_im/common/bottom_sheet/view.cljs +++ b/src/status_im/common/bottom_sheet/view.cljs @@ -66,7 +66,7 @@ {:keys [content selected-item padding-bottom-override border-radius on-close shell? gradient-cover? customization-color hide-handle? blur-radius] :or {border-radius 12}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) {window-height :height} (rn/get-window) [sheet-height set-sheet-height] (rn/use-state 0) [layout-height set-layout-height] (rn/use-state window-height) diff --git a/src/status_im/common/bottom_sheet_screen/style.cljs b/src/status_im/common/bottom_sheet_screen/style.cljs index 2d3e02d75a..bc0e074f18 100644 --- a/src/status_im/common/bottom_sheet_screen/style.cljs +++ b/src/status_im/common/bottom_sheet_screen/style.cljs @@ -1,7 +1,7 @@ (ns status-im.common.bottom-sheet-screen.style (:require [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.reanimated :as reanimated])) (defn container @@ -47,4 +47,4 @@ :height 4 :border-radius 100 :background-color (colors/theme-colors colors/neutral-100 colors/white theme) - :opacity (theme/theme-value 0.05 0.1)}) + :opacity (if (= theme :light) 0.05 0.1)}) diff --git a/src/status_im/common/bottom_sheet_screen/view.cljs b/src/status_im/common/bottom_sheet_screen/view.cljs index f3c08409d4..bef2baebe9 100644 --- a/src/status_im/common/bottom_sheet_screen/view.cljs +++ b/src/status_im/common/bottom_sheet_screen/view.cljs @@ -1,7 +1,7 @@ (ns status-im.common.bottom-sheet-screen.view (:require [oops.core :as oops] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.platform :as platform] @@ -40,7 +40,7 @@ (let [y (oops/oget e "nativeEvent.contentOffset.y")] (reset! curr-scroll y))) -(defn- f-view +(defn view [_] (let [scroll-enabled? (reagent/atom true) curr-scroll (reagent/atom 0) @@ -48,8 +48,9 @@ set-animating-true #(reset! animating? true) set-animating-false (fn [ms] (js/setTimeout #(reset! animating? false) ms))] - (fn [{:keys [content skip-background? theme]}] - (let [{:keys [top] :as insets} (safe-area/get-insets) + (fn [{:keys [content skip-background?]}] + (let [theme (quo.theme/use-theme) + {:keys [top] :as insets} (safe-area/get-insets) alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) padding-top (+ alert-banners-top-margin (if platform/ios? top (+ top 10))) @@ -95,9 +96,3 @@ :current-scroll curr-scroll :on-scroll #(on-scroll % curr-scroll) :sheet-animating? animating?}]]]])))) - -(defn- internal-view - [params] - [:f> f-view params]) - -(def view (theme/with-theme internal-view)) diff --git a/src/status_im/common/confirmation_drawer/style.cljs b/src/status_im/common/confirmation_drawer/style.cljs index f81af5d98c..581235183e 100644 --- a/src/status_im/common/confirmation_drawer/style.cljs +++ b/src/status_im/common/confirmation_drawer/style.cljs @@ -3,9 +3,9 @@ [quo.foundations.colors :as colors])) (defn context-container - [] + [theme] {:flex-direction :row - :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :border-radius 20 :align-items :center :align-self :flex-start diff --git a/src/status_im/common/confirmation_drawer/view.cljs b/src/status_im/common/confirmation_drawer/view.cljs index 658a7c4d7b..d615e9ae02 100644 --- a/src/status_im/common/confirmation_drawer/view.cljs +++ b/src/status_im/common/confirmation_drawer/view.cljs @@ -1,6 +1,7 @@ (ns status-im.common.confirmation-drawer.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.common.confirmation-drawer.style :as style] @@ -37,6 +38,7 @@ (let [{:keys [group-chat chat-id public-key color profile-picture name]} context id (or chat-id public-key) + theme (quo.theme/use-theme) [primary-name _] (when-not group-chat (rf/sub [:contacts/contact-two-names-by-identity id])) display-name (cond @@ -53,7 +55,7 @@ [quo/text {:weight :semi-bold :size :heading-2} title] - [rn/view {:style (style/context-container)} + [rn/view {:style (style/context-container theme)} [avatar group-chat color display-name photo-path] [quo/text {:weight :medium diff --git a/src/status_im/common/contact_list/view.cljs b/src/status_im/common/contact_list/view.cljs index 3c384b6476..24a65abec7 100644 --- a/src/status_im/common/contact_list/view.cljs +++ b/src/status_im/common/contact_list/view.cljs @@ -11,6 +11,6 @@ (defn contacts-section-header [{:keys [title]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [quo/divider-label {:container-style (style/contacts-section-header theme)} title])) diff --git a/src/status_im/common/emoji_picker/view.cljs b/src/status_im/common/emoji_picker/view.cljs index 1e827f0d59..3e1b4ac8d8 100644 --- a/src/status_im/common/emoji_picker/view.cljs +++ b/src/status_im/common/emoji_picker/view.cljs @@ -120,8 +120,9 @@ :window-size (if @sheet-animating? 1 10)}]) (defn- footer - [{:keys [theme active-category scroll-ref]}] - (let [on-press (fn [id index] + [{:keys [active-category scroll-ref]}] + (let [theme (quo.theme/use-theme) + on-press (fn [id index] (on-press-category {:id id :index index @@ -133,8 +134,8 @@ {:style style/category-blur-container :blur-radius (if platform/android? 20 10) :blur-amount (if platform/ios? 20 10) - :blur-type (quo.theme/theme-value (if platform/ios? :light :xlight) :dark theme) - :overlay-color (quo.theme/theme-value colors/white-70-blur colors/neutral-95-opa-70-blur theme)} + :blur-type (if (= theme :light) (if platform/ios? :light :xlight) :dark) + :overlay-color (if (= theme :light) colors/white-70-blur colors/neutral-95-opa-70-blur)} [quo/showcase-nav {:state :scroll :active-id @active-category @@ -147,8 +148,8 @@ (reset! filtered-data nil) (reset! search-text "")) -(defn f-view - [{:keys [search-active? on-change-text clear-states active-category scroll-ref theme] +(defn sheet-view + [{:keys [search-active? on-change-text clear-states active-category scroll-ref] :as sheet-opts}] [rn/keyboard-avoiding-view {:style style/flex-spacer @@ -165,11 +166,10 @@ [render-list sheet-opts] (when-not search-active? [footer - {:theme theme - :active-category active-category + {:active-category active-category :scroll-ref scroll-ref}])]]) -(defn- view-internal +(defn view [_] (let [{:keys [on-select]} (rf/sub [:get-screen-params]) scroll-ref (atom nil) @@ -198,7 +198,7 @@ :active-category active-category :should-update-active-category? (nil? @filtered-data)}))] (fn [sheet-opts] - [:f> f-view + [sheet-view (assoc sheet-opts :search-active? (pos? (count @search-text)) :on-change-text on-change-text @@ -209,5 +209,3 @@ :on-viewable-items-changed on-viewable-items-changed :active-category active-category :scroll-ref scroll-ref)]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/common/floating_button_page/floating_container/view.cljs b/src/status_im/common/floating_button_page/floating_container/view.cljs index e069909f44..a601609aa9 100644 --- a/src/status_im/common/floating_button_page/floating_container/view.cljs +++ b/src/status_im/common/floating_button_page/floating_container/view.cljs @@ -5,21 +5,20 @@ [status-im.common.floating-button-page.floating-container.style :as style])) (defn- blur-container - [child theme] - [blur/view - {:blur-amount 12 - :blur-radius 12 - :blur-type (quo.theme/theme-value :light :dark theme)} - [rn/view {:style style/blur-inner-container} - child]]) + [child] + (let [theme (quo.theme/use-theme)] + [blur/view + {:blur-amount 12 + :blur-radius 12 + :blur-type theme} + [rn/view {:style style/blur-inner-container} + child]])) -(defn view-internal - [{:keys [theme on-layout keyboard-shown? blur?]} child] +(defn view + [{:keys [on-layout keyboard-shown? blur?]} child] [rn/view {:style (style/content-container blur? keyboard-shown?) :on-layout on-layout} (if blur? - [blur-container child theme] + [blur-container child] child)]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/common/home/banner/view.cljs b/src/status_im/common/home/banner/view.cljs index 71414577aa..723cad745b 100644 --- a/src/status_im/common/home/banner/view.cljs +++ b/src/status_im/common/home/banner/view.cljs @@ -32,15 +32,15 @@ (defn- banner-card-blur-layer [scroll-shared-value child] (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq) - theme (quo.theme/use-theme-value)] + theme (quo.theme/use-theme)] [reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value theme)} [blur/view {:style style/fill-space :blur-amount (if platform/ios? 20 10) - :blur-type (quo.theme/theme-value (if platform/ios? :light :xlight) :dark) + :blur-type (if (= theme :light) (if platform/ios? :light :xlight) :dark) :overlay-color (if open-sheet? - (colors/theme-colors colors/white colors/neutral-95-opa-70) - (quo.theme/theme-value nil colors/neutral-95-opa-70))} + (colors/theme-colors colors/white colors/neutral-95-opa-70 theme) + (if (= theme :light) nil colors/neutral-95-opa-70))} child]])) (defn- banner-card-hiding-layer @@ -72,7 +72,7 @@ (defn animated-banner [{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [:<> [:f> banner-card-blur-layer scroll-shared-value [:f> banner-card-hiding-layer diff --git a/src/status_im/common/mute_drawer/style.cljs b/src/status_im/common/mute_drawer/style.cljs index 565e46a877..80a28d5d66 100644 --- a/src/status_im/common/mute_drawer/style.cljs +++ b/src/status_im/common/mute_drawer/style.cljs @@ -3,7 +3,7 @@ [quo.foundations.colors :as colors])) (defn header-text - [] + [theme] {:margin-left 20 :margin-bottom 10 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) diff --git a/src/status_im/common/mute_drawer/view.cljs b/src/status_im/common/mute_drawer/view.cljs index 3f688750b9..a80d3ebcb9 100644 --- a/src/status_im/common/mute_drawer/view.cljs +++ b/src/status_im/common/mute_drawer/view.cljs @@ -1,6 +1,7 @@ (ns status-im.common.mute-drawer.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [status-im.common.mute-drawer.style :as style] [status-im.constants :as constants] @@ -23,79 +24,80 @@ (defn mute-drawer [{:keys [id accessibility-label muted? chat-type community?]}] - [rn/view {:accessibility-label accessibility-label} - [quo/text - {:weight :medium - :size :paragraph-2 - :style (style/header-text)} - (i18n/label - (if community? - :t/mute-community - (if (not-community-chat? chat-type) - :t/mute-chat-capitialized - :t/mute-channel)))] - [quo/menu-item - {:type :transparent - :title (i18n/label :t/mute-for-15-mins) - :icon-bg-color :transparent - :container-padding-vertical 12 - :title-column-style {:margin-left 2} - :on-press (fn [] - (hide-sheet-and-dispatch - {:id id - :chat-type chat-type - :muted? muted? - :community? community? - :muted-type constants/mute-for-15-mins-type}))}] - [quo/menu-item - {:type :transparent - :title (i18n/label :t/mute-for-1-hour) - :icon-bg-color :transparent - :container-padding-vertical 12 - :title-column-style {:margin-left 2} - :on-press (fn [] - (hide-sheet-and-dispatch - {:id id - :chat-type chat-type - :muted? muted? - :community? community? - :muted-type constants/mute-for-1-hour-type}))}] - [quo/menu-item - {:type :transparent - :title (i18n/label :t/mute-for-8-hours) - :icon-bg-color :transparent - :container-padding-vertical 12 - :title-column-style {:margin-left 2} - :on-press (fn [] - (hide-sheet-and-dispatch - {:id id - :chat-type chat-type - :muted? muted? - :community? community? - :muted-type constants/mute-for-8-hours-type}))}] - [quo/menu-item - {:type :transparent - :title (i18n/label :t/mute-for-1-week) - :icon-bg-color :transparent - :container-padding-vertical 12 - :title-column-style {:margin-left 2} - :on-press (fn [] - (hide-sheet-and-dispatch - {:id id - :chat-type chat-type - :muted? muted? - :community? community? - :muted-type constants/mute-for-1-week}))}] - [quo/menu-item - {:type :transparent - :title (i18n/label :t/mute-till-unmute) - :icon-bg-color :transparent - :container-padding-vertical 12 - :title-column-style {:margin-left 2} - :on-press (fn [] - (hide-sheet-and-dispatch - {:id id - :chat-type chat-type - :muted? muted? - :community? community? - :muted-type constants/mute-till-unmuted}))}]]) + (let [theme (quo.theme/use-theme)] + [rn/view {:accessibility-label accessibility-label} + [quo/text + {:weight :medium + :size :paragraph-2 + :style (style/header-text theme)} + (i18n/label + (if community? + :t/mute-community + (if (not-community-chat? chat-type) + :t/mute-chat-capitialized + :t/mute-channel)))] + [quo/menu-item + {:type :transparent + :title (i18n/label :t/mute-for-15-mins) + :icon-bg-color :transparent + :container-padding-vertical 12 + :title-column-style {:margin-left 2} + :on-press (fn [] + (hide-sheet-and-dispatch + {:id id + :chat-type chat-type + :muted? muted? + :community? community? + :muted-type constants/mute-for-15-mins-type}))}] + [quo/menu-item + {:type :transparent + :title (i18n/label :t/mute-for-1-hour) + :icon-bg-color :transparent + :container-padding-vertical 12 + :title-column-style {:margin-left 2} + :on-press (fn [] + (hide-sheet-and-dispatch + {:id id + :chat-type chat-type + :muted? muted? + :community? community? + :muted-type constants/mute-for-1-hour-type}))}] + [quo/menu-item + {:type :transparent + :title (i18n/label :t/mute-for-8-hours) + :icon-bg-color :transparent + :container-padding-vertical 12 + :title-column-style {:margin-left 2} + :on-press (fn [] + (hide-sheet-and-dispatch + {:id id + :chat-type chat-type + :muted? muted? + :community? community? + :muted-type constants/mute-for-8-hours-type}))}] + [quo/menu-item + {:type :transparent + :title (i18n/label :t/mute-for-1-week) + :icon-bg-color :transparent + :container-padding-vertical 12 + :title-column-style {:margin-left 2} + :on-press (fn [] + (hide-sheet-and-dispatch + {:id id + :chat-type chat-type + :muted? muted? + :community? community? + :muted-type constants/mute-for-1-week}))}] + [quo/menu-item + {:type :transparent + :title (i18n/label :t/mute-till-unmute) + :icon-bg-color :transparent + :container-padding-vertical 12 + :title-column-style {:margin-left 2} + :on-press (fn [] + (hide-sheet-and-dispatch + {:id id + :chat-type chat-type + :muted? muted? + :community? community? + :muted-type constants/mute-till-unmuted}))}]])) diff --git a/src/status_im/common/scan_qr_code/view.cljs b/src/status_im/common/scan_qr_code/view.cljs index 3af38d4ca8..0b45f31a9a 100644 --- a/src/status_im/common/scan_qr_code/view.cljs +++ b/src/status_im/common/scan_qr_code/view.cljs @@ -185,7 +185,7 @@ (rf/dispatch [:navigate-back]) true) -(defn f-view-internal +(defn view [{:keys [title subtitle validate-fn on-success-scan error-message]}] (let [insets (safe-area/get-insets) qr-code-succeed? (reagent/atom false) @@ -237,7 +237,7 @@ [scan-qr-code-tab @qr-view-finder (when subtitle true)] [rn/view {:style style/flex-spacer}] (when show-camera? - [quo.theme/provider {:theme :light} + [quo.theme/provider :light [quo/button {:icon-only? true :type :grey @@ -247,9 +247,3 @@ :container-style (style/camera-flash-button @qr-view-finder) :on-press #(swap! torch? not)} flashlight-icon]])]])))) - -(defn view-internal - [props] - [:f> f-view-internal props]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/common/scroll_page/style.cljs b/src/status_im/common/scroll_page/style.cljs index a4763a872a..476e490b2b 100644 --- a/src/status_im/common/scroll_page/style.cljs +++ b/src/status_im/common/scroll_page/style.cljs @@ -13,7 +13,7 @@ :flex 1}) (defn blur-slider - [animation height] + [animation height theme] (reanimated/apply-animations-to-style {:transform [{:translateY animation}]} {:z-index 5 @@ -25,7 +25,8 @@ :background-color (if platform/ios? (colors/theme-colors colors/white-opa-70 - colors/neutral-95-opa-70) + colors/neutral-95-opa-70 + theme) :transparent)})) (defn sticky-header-title diff --git a/src/status_im/common/scroll_page/view.cljs b/src/status_im/common/scroll_page/view.cljs index 2a48b116fa..806c4fe690 100644 --- a/src/status_im/common/scroll_page/view.cljs +++ b/src/status_im/common/scroll_page/view.cljs @@ -2,6 +2,7 @@ (:require [oops.core :as oops] [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] @@ -27,7 +28,8 @@ (defn f-scroll-page-header [{:keys [scroll-height height page-nav-right-section-buttons sticky-header top-nav title-colum navigate-back? collapsed? page-nav-props overlay-shown?]}] - (let [input-range [0 10] + (let [theme (quo.theme/use-theme) + input-range [0 10] output-range [-208 -45] y (reanimated/use-shared-value scroll-height) translate-animation (reanimated/interpolate y @@ -49,7 +51,7 @@ {:blur-amount 20 :blur-type :transparent :overlay-color :transparent - :style (style/blur-slider translate-animation height)}] + :style (style/blur-slider translate-animation height theme)}] [rn/view {:style {:z-index 6 :position :absolute diff --git a/src/status_im/common/standard_authentication/password_input/view.cljs b/src/status_im/common/standard_authentication/password_input/view.cljs index 21abc3fc89..316df7fec8 100644 --- a/src/status_im/common/standard_authentication/password_input/view.cljs +++ b/src/status_im/common/standard_authentication/password_input/view.cljs @@ -23,7 +23,7 @@ (defn- error-info [error-message processing shell?] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) on-press (rn/use-callback (fn [] (rn/dismiss-keyboard!) @@ -56,7 +56,7 @@ error? (boolean (seq error-message)) default-value (rn/use-ref-atom "") ;;bug on Android ;;https://github.com/status-im/status-mobile/issues/19004 - theme (quo.theme/use-theme-value) + theme (quo.theme/use-theme) on-change-password (rn/use-callback (fn [entered-password] (reset! default-value entered-password) diff --git a/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs b/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs index cef4210ab4..350a10458b 100644 --- a/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs +++ b/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs @@ -10,7 +10,7 @@ [{:keys [track-text customization-color auth-button-label on-auth-success on-auth-fail auth-button-icon-left size blur? container-style disabled? dependencies] :or {container-style {:flex 1}}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) auth-method (rf/sub [:auth-method]) biometric-auth? (= auth-method constants/auth-method-biometric) on-complete (rn/use-callback diff --git a/src/status_im/common/theme/core.cljs b/src/status_im/common/theme/core.cljs index ed415db4eb..64df9a5350 100644 --- a/src/status_im/common/theme/core.cljs +++ b/src/status_im/common/theme/core.cljs @@ -2,7 +2,6 @@ (:require [legacy.status-im.ui.components.colors :as legacy-colors] [oops.core :refer [oget]] - [quo.theme :as quo] [react-native.core :as rn] [react-native.platform :as platform] [utils.re-frame :as rf])) @@ -30,9 +29,8 @@ [] (= @device-theme "dark")) -(defn set-theme +(defn set-legacy-theme [value] - (quo/set-theme value) (reset! legacy-colors/theme (case value :dark legacy-colors/dark-theme legacy-colors/light-theme)) diff --git a/src/status_im/common/theme/events.cljs b/src/status_im/common/theme/events.cljs index 01d256ffff..40aa9ef3b3 100644 --- a/src/status_im/common/theme/events.cljs +++ b/src/status_im/common/theme/events.cljs @@ -7,3 +7,8 @@ :theme/init-theme (fn [] (theme/add-device-theme-change-listener))) + +(re-frame/reg-event-fx + :theme/switch + (fn [{db :db} [theme]] + {:db (assoc db :theme theme)})) diff --git a/src/status_im/common/toasts/events.cljs b/src/status_im/common/toasts/events.cljs index 7eb046b382..5daa25716e 100644 --- a/src/status_im/common/toasts/events.cljs +++ b/src/status_im/common/toasts/events.cljs @@ -19,7 +19,7 @@ (update :toasts dissoc :hide-toasts-timer-set))} (and (not update?) (= (count ordered) 1)) - (assoc :show-toasts (:view-id db)) + (assoc :show-toasts [(:view-id db) (:theme db)]) (not (:id opts)) (update-in [:db :toasts :next-toast-number] inc)))) @@ -30,7 +30,7 @@ (when (get-in db [:toasts :hide-toasts-timer-set]) {:db (update db :toasts dissoc :hide-toasts-timer-set) :hide-toasts nil - :reload-status-nav-color-fx (:view-id db)})) + :reload-status-nav-color-fx [(:view-id db) (:theme db)]})) (rf/defn close {:events [:toasts/close]} diff --git a/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/style.cljs b/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/style.cljs index 508a381c0d..2e54042418 100644 --- a/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/style.cljs +++ b/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/style.cljs @@ -4,9 +4,9 @@ [react-native.platform :as platform])) (defn context-container - [] + [theme] {:flex-direction :row - :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :border-radius 20 :align-items :center :align-self :flex-start @@ -25,9 +25,9 @@ :margin-bottom (when platform/ios? (max (:bottom insets) 20))}) (defn nickname-description - [] + [theme] {:margin-left 4 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) (def nickname-description-container {:flex-direction :row diff --git a/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/view.cljs b/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/view.cljs index d5082cf4e0..239b12e268 100644 --- a/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/view.cljs +++ b/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/view.cljs @@ -3,6 +3,7 @@ [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -29,6 +30,7 @@ (let [{:keys [primary-name nickname public-key]} contact entered-nickname (reagent/atom (or nickname "")) photo-path (rf/sub [:chats/photo-path public-key]) + theme (quo.theme/use-theme) insets (safe-area/get-insets)] (fn [{:keys [title description accessibility-label close-button-text]}] @@ -38,7 +40,7 @@ [quo/text {:weight :semi-bold :size :heading-2} title] - [rn/view {:style (style/context-container)} + [rn/view {:style (style/context-container theme)} [quo/context-tag {:type :default :blur? false @@ -60,11 +62,11 @@ {:style style/nickname-description-container} [quo/icon :i/info {:size 16 - :color (colors/theme-colors colors/black colors/white)}] + :color (colors/theme-colors colors/black colors/white theme)}] [quo/text {:weight :regular :size :paragraph-2 - :style (style/nickname-description)} + :style (style/nickname-description theme)} description]] [rn/view {:style style/buttons-container} [quo/button diff --git a/src/status_im/contexts/chat/group_create/view.cljs b/src/status_im/contexts/chat/group_create/view.cljs index 0d05c1ee4d..427c7fe088 100644 --- a/src/status_im/contexts/chat/group_create/view.cljs +++ b/src/status_im/contexts/chat/group_create/view.cljs @@ -42,7 +42,7 @@ (defn view [] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) {window-width :width} (rn/get-window) profile (rf/sub [:profile/profile-with-image]) contacts (rf/sub [:selected-group-contacts]) diff --git a/src/status_im/contexts/chat/group_details/style.cljs b/src/status_im/contexts/chat/group_details/style.cljs index 3e19784a40..d288993b00 100644 --- a/src/status_im/contexts/chat/group_details/style.cljs +++ b/src/status_im/contexts/chat/group_details/style.cljs @@ -8,22 +8,22 @@ :padding-horizontal 20}) (defn action-container - [color] - {:background-color (colors/theme-alpha color 0.1 0.1) + [color theme] + {:background-color (colors/theme-alpha color 0.1 0.1 theme) :flex 0.29 :border-radius 16 :padding 12}) (defn count-container - [] + [theme] {:width 16 :height 16 :border-radius 6 - :background-color (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5)}) + :background-color (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)}) (defn close-icon - [] - {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) + [theme] + {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :margin-left 20 :width 32 :height 32 @@ -33,11 +33,11 @@ :margin-bottom 24}) (defn bottom-container - [bottom] + [bottom theme] {:padding-horizontal 20 :padding-vertical 12 :margin-bottom bottom - :background-color (colors/theme-colors colors/white colors/neutral-95-opa-70) + :background-color (colors/theme-colors colors/white colors/neutral-95-opa-70 theme) :flex-direction :row}) (def floating-shell-button diff --git a/src/status_im/contexts/chat/group_details/view.cljs b/src/status_im/contexts/chat/group_details/view.cljs index caaa5aaafe..6839bd5953 100644 --- a/src/status_im/contexts/chat/group_details/view.cljs +++ b/src/status_im/contexts/chat/group_details/view.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -46,13 +47,14 @@ deselected-members (rf/sub [:group-chat/deselected-members]) chat-id (rf/sub [:get-screen-params :group-details]) {:keys [admins] :as group} (rf/sub [:chats/chat-by-id chat-id]) + theme (quo.theme/use-theme) admin? (get admins (rf/sub [:multiaccount/public-key]))] [rn/view {:flex 1 :margin-top 20} [rn/touchable-opacity {:on-press #(rf/dispatch [:navigate-back]) :accessibility-label :close-manage-members - :style (style/close-icon)} - [quo/icon :i/close {:color (colors/theme-colors colors/neutral-100 colors/white)}]] + :style (style/close-icon theme)} + [quo/icon :i/close {:color (colors/theme-colors colors/neutral-100 colors/white theme)}]] [quo/text {:size :heading-1 :weight :semi-bold @@ -67,7 +69,7 @@ :content-container-style {:padding-bottom 20} :render-data {:group group} :render-fn add-member-contact-item-render}] - [rn/view {:style (style/bottom-container 30)} + [rn/view {:style (style/bottom-container 30 theme)} [quo/button {:container-style {:flex 1} :type :primary diff --git a/src/status_im/contexts/chat/home/add_new_contact/style.cljs b/src/status_im/contexts/chat/home/add_new_contact/style.cljs index a868cb928a..f9fa3c2769 100644 --- a/src/status_im/contexts/chat/home/add_new_contact/style.cljs +++ b/src/status_im/contexts/chat/home/add_new_contact/style.cljs @@ -2,9 +2,9 @@ (:require [quo.foundations.colors :as colors])) (defn container-outer - [] + [theme] {:flex 1 - :background-color (colors/theme-colors colors/white colors/neutral-95) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme) :justify-content :space-between :align-items :center :margin-top 2 @@ -16,11 +16,11 @@ :margin-top 8}}) (defn text-description - [] + [theme] {:size :paragraph-2 :weight :medium :style {:margin-bottom 6 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}) (def icon-invalid {:size 16 @@ -47,7 +47,7 @@ :align-self :stretch}) (defn found-user-container - [] + [theme] {:flex-direction :row :align-items :center :padding-top 8 @@ -56,31 +56,36 @@ :padding-bottom 8 :color (colors/theme-colors colors/black - colors/white) + colors/white + theme) :background-color (colors/theme-colors colors/white - colors/neutral-95) + colors/neutral-95 + theme) :border-width 1 :border-radius 12 :border-color (colors/theme-colors colors/neutral-20 - colors/neutral-80)}) + colors/neutral-80 + theme)}) (def found-user-text {:margin-left 8 :flex-direction :column}) (defn found-user-display-name - [] + [theme] {:color (colors/theme-colors colors/black - colors/white)}) + colors/white + theme)}) (defn found-user-key - [] + [theme] {:color (colors/theme-colors colors/neutral-50 - colors/neutral-40)}) + colors/neutral-40 + theme)}) (def button-view-profile {:margin-top 24 diff --git a/src/status_im/contexts/chat/home/add_new_contact/views.cljs b/src/status_im/contexts/chat/home/add_new_contact/views.cljs index 4be041fcfa..c687e9776c 100644 --- a/src/status_im/contexts/chat/home/add_new_contact/views.cljs +++ b/src/status_im/contexts/chat/home/add_new_contact/views.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.chat.home.add-new-contact.views (:require [clojure.string :as string] [quo.core :as quo] + [quo.theme] [react-native.clipboard :as clipboard] [react-native.core :as rn] [status-im.common.floating-button-page.view :as floating-button-page] @@ -13,12 +14,13 @@ (defn found-contact [public-key] (let [{:keys [primary-name compressed-key]} (rf/sub [:contacts/contact-by-identity public-key]) - photo-path (rf/sub [:chats/photo-path public-key])] + photo-path (rf/sub [:chats/photo-path public-key]) + theme (quo.theme/use-theme)] (when primary-name [rn/view style/found-user - [quo/text (style/text-description) + [quo/text (style/text-description theme) (i18n/label :t/user-found)] - [rn/view (style/found-user-container) + [rn/view (style/found-user-container theme) [quo/user-avatar {:full-name primary-name :profile-picture photo-path @@ -28,12 +30,12 @@ [quo/text {:weight :semi-bold :size :paragraph-1 - :style (style/found-user-display-name)} + :style (style/found-user-display-name theme)} primary-name] [quo/text {:weight :regular :size :paragraph-2 - :style (style/found-user-key)} + :style (style/found-user-key theme)} (address/get-shortened-compressed-key compressed-key)]]]]))) (defn- search-input @@ -111,7 +113,8 @@ (defn new-contact [] (let [{:keys [public-key ens state msg]} (rf/sub [:contacts/new-identity]) - customization-color (rf/sub [:profile/customization-color])] + customization-color (rf/sub [:profile/customization-color]) + theme (quo.theme/use-theme)] [floating-button-page/view {:header-container-style {:margin-top 8} :header [quo/page-nav @@ -139,7 +142,7 @@ :description :text :description-text (i18n/label :t/find-your-friends) :container-style {:padding-vertical 8}}] - [rn/view {:style (style/container-outer)} + [rn/view {:style (style/container-outer theme)} [search-input] (case state :invalid [invalid-text msg] diff --git a/src/status_im/contexts/chat/home/chat_list_item/style.cljs b/src/status_im/contexts/chat/home/chat_list_item/style.cljs index 2a4189b8f6..8a58589e48 100644 --- a/src/status_im/contexts/chat/home/chat_list_item/style.cljs +++ b/src/status_im/contexts/chat/home/chat_list_item/style.cljs @@ -29,8 +29,8 @@ ;; TODO: duplicate of `quo.components.common.unread-grey-dot.style` ;; Replace it when this component is defined as part of `quo.components` (defn grey-dot - [] + [theme] {:width 8 :height 8 :border-radius 4 - :background-color (colors/theme-colors colors/neutral-40 colors/neutral-60)}) + :background-color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)}) diff --git a/src/status_im/contexts/chat/home/chat_list_item/view.cljs b/src/status_im/contexts/chat/home/chat_list_item/view.cljs index c69079db2d..9c8c65dc15 100644 --- a/src/status_im/contexts/chat/home/chat_list_item/view.cljs +++ b/src/status_im/contexts/chat/home/chat_list_item/view.cljs @@ -3,6 +3,7 @@ [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [status-im.common.home.actions.view :as actions] [status-im.constants :as constants] @@ -148,7 +149,8 @@ (defn last-message-preview "Render the preview of a last message to a maximum of max-subheader-length characters" [group-chat {:keys [deleted? outgoing from deleted-for-me?] :as message}] - (let [[primary-name _] (rf/sub [:contacts/contact-two-names-by-identity from]) + (let [theme (quo.theme/use-theme) + [primary-name _] (rf/sub [:contacts/contact-two-names-by-identity from]) preview-text (if deleted-for-me? (i18n/label :t/you-deleted-a-message) (if deleted? @@ -161,7 +163,8 @@ [quo/text {:size :paragraph-2 :style {:color (colors/theme-colors colors/neutral-50 - colors/neutral-40) + colors/neutral-40 + theme) :flex 1} :number-of-lines 1 :ellipsize-mode :tail @@ -195,6 +198,7 @@ (defn notification [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}] (let [customization-color (rf/sub [:profile/customization-color]) + theme (quo.theme/use-theme) unread-messages? (pos? unviewed-messages-count) unread-mentions? (pos? unviewed-mentions-count)] (cond @@ -214,7 +218,7 @@ (and group-chat unread-messages?) [notification-layout [rn/view - {:style (style/grey-dot) + {:style (style/grey-dot theme) :accessibility-label :unviewed-messages-public}]] unread-messages? diff --git a/src/status_im/contexts/chat/home/contact_request/view.cljs b/src/status_im/contexts/chat/home/contact_request/view.cljs index a8dad53a1f..ae9a94425c 100644 --- a/src/status_im/contexts/chat/home/contact_request/view.cljs +++ b/src/status_im/contexts/chat/home/contact_request/view.cljs @@ -34,9 +34,10 @@ " " (- (count requests) 2) " " (i18n/label :t/more)))) -(defn- view-internal - [{:keys [theme requests]}] - (let [customization-color (rf/sub [:profile/customization-color])] +(defn view + [{:keys [requests]}] + (let [theme (quo.theme/use-theme) + customization-color (rf/sub [:profile/customization-color])] [rn/touchable-opacity {:active-opacity 1 :accessibility-label :open-activity-center-contact-requests @@ -62,5 +63,3 @@ :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_im/contexts/chat/home/new_chat/view.cljs b/src/status_im/contexts/chat/home/new_chat/view.cljs index 28202773b2..8de42fbb39 100644 --- a/src/status_im/contexts/chat/home/new_chat/view.cljs +++ b/src/status_im/contexts/chat/home/new_chat/view.cljs @@ -87,7 +87,7 @@ (defn view [{:keys [scroll-enabled? on-scroll close]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) contacts (rf/sub [:contacts/sorted-and-grouped-by-first-letter]) selected-contacts-count (rf/sub [:selected-contacts-count]) selected-contacts (rf/sub [:group/selected-contacts]) diff --git a/src/status_im/contexts/chat/home/view.cljs b/src/status_im/contexts/chat/home/view.cljs index 5dedf968b8..d9903aef40 100644 --- a/src/status_im/contexts/chat/home/view.cljs +++ b/src/status_im/contexts/chat/home/view.cljs @@ -128,7 +128,7 @@ (defn view [] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) scroll-ref (rn/use-ref-atom nil) set-scroll-ref (rn/use-callback #(reset! scroll-ref %)) {:keys [universal-profile-url]} (rf/sub [:profile/profile]) diff --git a/src/status_im/contexts/chat/messenger/composer/edit/view.cljs b/src/status_im/contexts/chat/messenger/composer/edit/view.cljs index 0b33024b3b..5daba1c0bf 100644 --- a/src/status_im/contexts/chat/messenger/composer/edit/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/edit/view.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.reanimated :as reanimated] [status-im.contexts.chat.messenger.composer.constants :as constants] @@ -12,27 +13,28 @@ (defn edit-message [{:keys [text-value input-ref]}] - [rn/view - {:style style/container - :accessibility-label :edit-message} - [rn/view {:style style/content-container} - [quo/icon - :i/connector-dotted - {:size 16 - :color (colors/theme-colors colors/neutral-40 colors/neutral-60) - :container-style style/icon-container}] - [rn/view {:style style/text-container} - [quo/text - {:weight :medium - :size :paragraph-2} - (i18n/label :t/editing-message)]]] - [quo/button - {:size 24 - :icon-only? true - :accessibility-label :edit-cancel-button - :on-press #(utils/cancel-edit-message text-value input-ref) - :type :outline} - :i/close]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style style/container + :accessibility-label :edit-message} + [rn/view {:style style/content-container} + [quo/icon + :i/connector-dotted + {:size 16 + :color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme) + :container-style style/icon-container}] + [rn/view {:style style/text-container} + [quo/text + {:weight :medium + :size :paragraph-2} + (i18n/label :t/editing-message)]]] + [quo/button + {:size 24 + :icon-only? true + :accessibility-label :edit-cancel-button + :on-press #(utils/cancel-edit-message text-value input-ref) + :type :outline} + :i/close]])) (defn- f-view [props] diff --git a/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs b/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs index 65c8f5b484..c500eccb75 100644 --- a/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs +++ b/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs @@ -19,9 +19,9 @@ :right 0})) (defn top-gradient - [opacity z-index showing-extra-space?] - {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-95-opa-0) - (colors/theme-colors colors/white colors/neutral-95)] + [opacity z-index showing-extra-space? theme] + {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-95-opa-0 theme) + (colors/theme-colors colors/white colors/neutral-95 theme)] :start {:x 0 :y 1} :end {:x 0 :y 0} :style (top-gradient-style opacity z-index showing-extra-space?)}) @@ -34,9 +34,9 @@ :right 0}) (defn bottom-gradient - [] - {:colors [(colors/theme-colors colors/white colors/neutral-95) - (colors/theme-colors colors/white-opa-0 colors/neutral-95-opa-0)] + [theme] + {:colors [(colors/theme-colors colors/white colors/neutral-95 theme) + (colors/theme-colors colors/white-opa-0 colors/neutral-95-opa-0 theme)] :start {:x 0 :y 1} :end {:x 0 :y 0} :style bottom-gradient-style}) diff --git a/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs b/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs index f4417412c9..998954e01c 100644 --- a/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs @@ -1,5 +1,6 @@ (ns status-im.contexts.chat.messenger.composer.gradients.view (:require + [quo.theme] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient] [react-native.reanimated :as reanimated] @@ -11,17 +12,18 @@ {:keys [gradient-z-index]} {:keys [gradient-opacity]} show-bottom-gradient?] - (let [showing-extra-space? (boolean (or (rf/sub [:chats/edit-message]) + (let [theme (quo.theme/use-theme) + showing-extra-space? (boolean (or (rf/sub [:chats/edit-message]) (rf/sub [:chats/reply-message])))] [:<> [reanimated/linear-gradient - (style/top-gradient gradient-opacity @gradient-z-index showing-extra-space?)] + (style/top-gradient gradient-opacity @gradient-z-index showing-extra-space? theme)] (when show-bottom-gradient? [rn/pressable {:on-press #(when @input-ref (.focus ^js @input-ref)) :style {:z-index 1} :accessibility-label :bottom-gradient} - [linear-gradient/linear-gradient (style/bottom-gradient)]])])) + [linear-gradient/linear-gradient (style/bottom-gradient theme)]])])) (defn view [props state animations show-bottom-gradient?] diff --git a/src/status_im/contexts/chat/messenger/composer/images/view.cljs b/src/status_im/contexts/chat/messenger/composer/images/view.cljs index dc2c1e16e9..201a8dcfc3 100644 --- a/src/status_im/contexts/chat/messenger/composer/images/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/images/view.cljs @@ -28,7 +28,7 @@ (defn f-images-list [] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) images (rf/sub [:chats/sending-image]) height (reanimated/use-shared-value (if (seq images) constants/images-container-height 0))] (rn/use-effect (fn [] diff --git a/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs b/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs index fd5c1e57f9..65cc12ff27 100644 --- a/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs +++ b/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs @@ -7,16 +7,16 @@ (defn shadow - [] + [theme] (if platform/ios? - {:shadow-radius (colors/theme-colors 30 50) - :shadow-opacity (colors/theme-colors 0.1 0.7) + {:shadow-radius (colors/theme-colors 30 50 theme) + :shadow-opacity (colors/theme-colors 0.1 0.7 theme) :shadow-color colors/neutral-100 - :shadow-offset {:width 0 :height (colors/theme-colors 8 12)}} + :shadow-offset {:width 0 :height (colors/theme-colors 8 12 theme)}} {:elevation 10})) (defn container - [opacity bottom] + [opacity bottom theme] (reanimated/apply-animations-to-style {:opacity opacity} (merge @@ -27,5 +27,5 @@ :border-radius 16 :z-index 4 :max-height constants/mentions-max-height - :background-color (colors/theme-colors colors/white colors/neutral-95)} - (shadow)))) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)} + (shadow theme)))) diff --git a/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs b/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs index 4f96cb1732..4e12d88be1 100644 --- a/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs @@ -1,5 +1,6 @@ (ns status-im.contexts.chat.messenger.composer.mentions.view (:require + [quo.theme] [react-native.core :as rn] [react-native.platform :as platform] [react-native.reanimated :as reanimated] @@ -32,6 +33,7 @@ (defn- f-view [suggestions-atom props state animations max-height cursor-pos images link-previews? reply edit] (let [suggestions (rf/sub [:chat/mention-suggestions]) + theme (quo.theme/use-theme) opacity (reanimated/use-shared-value (if (seq suggestions) 1 0)) size (count suggestions) data {:keyboard-height @(:kb-height state) @@ -52,7 +54,7 @@ (reanimated/animate opacity (if (seq suggestions) 1 0))) [(seq suggestions)]) [reanimated/view - {:style (style/container opacity mentions-pos)} + {:style (style/container opacity mentions-pos theme)} [rn/flat-list {:keyboard-should-persist-taps :always :data (vals @suggestions-atom) diff --git a/src/status_im/contexts/chat/messenger/composer/reply/view.cljs b/src/status_im/contexts/chat/messenger/composer/reply/view.cljs index 68272c6e37..14eaa92d61 100644 --- a/src/status_im/contexts/chat/messenger/composer/reply/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/reply/view.cljs @@ -3,6 +3,7 @@ [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient] [react-native.reanimated :as reanimated] @@ -89,6 +90,7 @@ in-chat-input? pin? recording-audio? input-ref] (let [[primary-name _] (rf/sub [:contacts/contact-two-names-by-identity from]) current-public-key (rf/sub [:multiaccount/public-key]) + theme (quo.theme/use-theme) content-type (or content-type contentType) text (get-quoted-text-with-mentions (or parsed-text (:parsed-text content)))] [rn/view @@ -98,7 +100,7 @@ (when-not pin? [quo/icon :i/connector {:size 16 - :color (colors/theme-colors colors/neutral-40 colors/neutral-60) + :color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme) :container-style {:position :absolute :left 0 :bottom -4 :width 16 :height 16}}]) (if (or deleted? deleted-for-me?) [rn/view {:style (style/quoted-message pin?)} @@ -121,7 +123,7 @@ [quo/text {:size :label :weight :regular - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40) + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) :margin-top 2}} (str " " (condp = (or content-type contentType) @@ -142,8 +144,8 @@ :i/close]) (when (and in-chat-input? recording-audio?) [linear-gradient/linear-gradient - {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-90-opa-0) - (colors/theme-colors colors/white colors/neutral-90)] + {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-90-opa-0 theme) + (colors/theme-colors colors/white colors/neutral-90 theme)] :start {:x 0 :y 0} :end {:x 0.7 :y 0} :style style/gradient}])])) diff --git a/src/status_im/contexts/chat/messenger/composer/style.cljs b/src/status_im/contexts/chat/messenger/composer/style.cljs index c52fbee521..3e3c985052 100644 --- a/src/status_im/contexts/chat/messenger/composer/style.cljs +++ b/src/status_im/contexts/chat/messenger/composer/style.cljs @@ -2,7 +2,6 @@ (:require [quo.foundations.colors :as colors] [quo.foundations.typography :as typography] - [quo.theme :as quo.theme] [react-native.platform :as platform] [react-native.reanimated :as reanimated] [status-im.contexts.chat.messenger.composer.constants :as constants])) @@ -110,7 +109,7 @@ [theme] {:style {:flex 1} :blur-radius (if platform/ios? 20 10) - :blur-type (quo.theme/theme-value :light :dark theme) + :blur-type theme :blur-amount 20}) (defn shell-button diff --git a/src/status_im/contexts/chat/messenger/composer/view.cljs b/src/status_im/contexts/chat/messenger/composer/view.cljs index 32e21e9b0f..d11a73c93b 100644 --- a/src/status_im/contexts/chat/messenger/composer/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/view.cljs @@ -127,11 +127,11 @@ :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 (quo.theme/theme-value :light :dark) + :keyboard-appearance theme :max-font-size-multiplier 1 :multiline true :placeholder (i18n/label :t/type-something) - :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50) + :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) :style (style/input-text props state {:max-height max-height @@ -146,7 +146,7 @@ (defn f-composer [props] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) opacity (reanimated/use-shared-value 0) window-height (:height (rn/get-window)) background-y (reanimated/use-shared-value (- window-height)) diff --git a/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs b/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs index d963b7a828..c2f53bba9c 100644 --- a/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs +++ b/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs @@ -24,16 +24,17 @@ [message/message message context (atom false)]) (defn empty-pinned-messages-state - [{:keys [theme]}] - [rn/view {:style style/no-pinned-messages-container} - [quo/empty-state - {:blur? false - :image (resources/get-themed-image :no-pinned-messages theme) - :title (i18n/label :t/no-pinned-messages) - :description (i18n/label :t/no-pinned-messages-desc)}]]) + [] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/no-pinned-messages-container} + [quo/empty-state + {:blur? false + :image (resources/get-themed-image :no-pinned-messages theme) + :title (i18n/label :t/no-pinned-messages) + :description (i18n/label :t/no-pinned-messages-desc)}]])) -(defn f-pinned-messages - [{:keys [theme chat-id disable-message-long-press?]}] +(defn view + [{:keys [chat-id disable-message-long-press?]}] (let [pinned (rf/sub [:chats/pinned-sorted-list chat-id]) render-data (rf/sub [:chats/current-chat-message-list-view-context :in-pinned-view]) current-chat (rf/sub [:chats/chat-by-id chat-id]) @@ -65,11 +66,4 @@ :footer [rn/view {:style style/list-footer}] :key-fn list-key-fn :separator [quo/separator {:style {:margin-vertical 8}}]}] - [empty-pinned-messages-state - {:theme theme}])])) - -(defn- internal-pinned-messages - [params] - [:f> f-pinned-messages params]) - -(def view (quo.theme/with-theme internal-pinned-messages)) + [empty-pinned-messages-state])])) diff --git a/src/status_im/contexts/chat/messenger/messages/content/audio/style.cljs b/src/status_im/contexts/chat/messenger/messages/content/audio/style.cljs index 31f772b5ab..4abf63943d 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/audio/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/audio/style.cljs @@ -1,10 +1,10 @@ (ns status-im.contexts.chat.messenger.messages.content.audio.style (:require [quo.foundations.colors :as colors] - [quo.theme :as theme])) + [quo.theme])) (defn container - [] + [theme] {:width 295 :height 56 :border-radius 12 @@ -13,8 +13,8 @@ :flex-direction :row :align-items :center :justify-content :space-between - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) - :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40)}) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) + :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40 theme)}) (def play-pause-slider-container {:flex-direction :row @@ -27,8 +27,8 @@ :bottom nil}) (defn play-pause-container - [] - {:background-color (get-in colors/customization [:blue (if (theme/dark?) 60 50)]) + [theme] + {:background-color (get-in colors/customization [:blue (if (= :dark theme) 60 50)]) :width 32 :height 32 :border-radius 16 diff --git a/src/status_im/contexts/chat/messenger/messages/content/audio/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/audio/view.cljs index 58ad55061d..313e500e76 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/audio/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/audio/view.cljs @@ -4,6 +4,7 @@ [goog.string :as gstring] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.audio-toolkit :as audio] [react-native.core :as rn] [react-native.platform :as platform] @@ -148,7 +149,8 @@ (defn f-audio-message [player-state progress seeking-audio? {:keys [audio-duration-ms message-id]} {:keys [in-pinned-view?]}] - (let [player-key (get-player-key message-id in-pinned-view?) + (let [theme (quo.theme/use-theme) + player-key (get-player-key message-id in-pinned-view?) player (@active-players player-key) duration (min constants/audio-max-duration-ms audio-duration-ms) time-secs (quot @@ -188,7 +190,7 @@ (i18n/label :t/error-loading-audio)] [rn/view {:accessibility-label :audio-message-container - :style (style/container)} + :style (style/container theme)} [rn/touchable-opacity {:accessibility-label :play-pause-audio-message-button :allow-multiple-presses? true @@ -200,7 +202,7 @@ :seeking-audio? seeking-audio? :user-interaction? true :mediaserver-port mediaserver-port}) - :style (style/play-pause-container)} + :style (style/play-pause-container theme)} [quo/icon (cond (= @player-state :preparing) diff --git a/src/status_im/contexts/chat/messenger/messages/content/pin/style.cljs b/src/status_im/contexts/chat/messenger/messages/content/pin/style.cljs index e7159c0f2a..f1c52b2ea6 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/pin/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/pin/style.cljs @@ -16,8 +16,8 @@ :margin-left 2}) (defn pinned-message-text - [] - {:color (colors/theme-colors colors/neutral-100 colors/white) + [theme] + {:color (colors/theme-colors colors/neutral-100 colors/white theme) :margin-left 4}) (def system-message-container diff --git a/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs index 72d9d6023e..22651437f3 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs @@ -51,9 +51,10 @@ :emoji (get constants/reactions (:emoji-id reaction)))) -(defn- view-internal - [{:keys [message-id chat-id pinned-by preview? theme]} user-message-content] - (let [reactions (rf/sub [:chats/message-reactions message-id chat-id])] +(defn message-reactions-row + [{:keys [message-id chat-id pinned-by preview?]} user-message-content] + (let [theme (quo.theme/use-theme) + reactions (rf/sub [:chats/message-reactions message-id chat-id])] [:<> (when (seq reactions) [quo/react @@ -71,5 +72,3 @@ :on-press-add #(on-press-add {:chat-id chat-id :message-id message-id :user-message-content user-message-content})}])])) - -(def message-reactions-row (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/chat/messenger/messages/content/status/style.cljs b/src/status_im/contexts/chat/messenger/messages/content/status/style.cljs index 15a829b7e8..c83ed4d6ac 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/status/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/status/style.cljs @@ -7,6 +7,6 @@ :align-items :center}) (defn message-status-text - [] + [theme] {:margin-left 4 - :color (colors/theme-colors colors/neutral-40 colors/neutral-50)}) + :color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}) diff --git a/src/status_im/contexts/chat/messenger/messages/content/status/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/status/view.cljs index 4f2d4389b4..7780041d70 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/status/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/status/view.cljs @@ -2,24 +2,26 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [status-im.contexts.chat.messenger.messages.content.status.style :as style] [utils.i18n :as i18n])) (defn status [outgoing-status] - [rn/view - {:accessibility-label :message-status - :style style/status-container} - [quo/icon - (if (= outgoing-status :delivered) - :i/delivered - :i/sent) - {:size 12 - :color (colors/theme-colors colors/neutral-40 colors/neutral-50)}] - [quo/text - {:size :label - :style (style/message-status-text)} - (if (= outgoing-status :delivered) - (i18n/label :t/delivered) - (i18n/label :t/sent))]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:accessibility-label :message-status + :style style/status-container} + [quo/icon + (if (= outgoing-status :delivered) + :i/delivered + :i/sent) + {:size 12 + :color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}] + [quo/text + {:size :label + :style (style/message-status-text theme)} + (if (= outgoing-status :delivered) + (i18n/label :t/delivered) + (i18n/label :t/sent))]])) diff --git a/src/status_im/contexts/chat/messenger/messages/content/text/style.cljs b/src/status_im/contexts/chat/messenger/messages/content/text/style.cljs index c5afbe9c2c..209c9aa28a 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/text/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/text/style.cljs @@ -22,23 +22,16 @@ :border-radius 6 :transform [{:translateY (if platform/ios? (if first-child-mention 4.5 3) 4.5)}]}) -(def mention-tag-text +(defn mention-tag-text + [theme] {:color (colors/theme-colors colors/primary-50 - colors/primary-60) + colors/primary-60 + theme) :selection-color :transparent :suppress-highlighting true}) (defn code - [] - {:background-color (colors/theme-colors colors/neutral-5 colors/white-opa-5) + [theme] + {:background-color (colors/theme-colors colors/neutral-5 colors/white-opa-5 theme) :border-width 1 - :border-color (colors/theme-colors colors/neutral-20 colors/white-opa-20)}) - -(def edited-block - {:margin-top 4}) - -(defn edited-tag - [] - {:font-size 11 - :margin-top 4 - :color (colors/theme-colors colors/neutral-40 colors/neutral-50)}) + :border-color (colors/theme-colors colors/neutral-20 colors/white-opa-20 theme)}) diff --git a/src/status_im/contexts/chat/messenger/messages/content/text/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/text/view.cljs index a544a35149..70ea0779c7 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/text/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/text/view.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.platform :as platform] [status-im.contexts.chat.messenger.messages.content.link-preview.view :as link-preview] @@ -11,7 +12,7 @@ [utils.re-frame :as rf])) (defn render-inline - [units {:keys [type literal destination]} chat-id style-override first-child-mention] + [units {:keys [type literal destination]} chat-id style-override first-child-mention theme] (let [show-as-plain-text? (seq style-override)] (case (keyword type) :code @@ -19,7 +20,7 @@ [quo/text {:style (if show-as-plain-text? {:color colors/white} - (merge style/block (style/code))) + (merge style/block (style/code theme))) :weight :code} literal]) :emph @@ -50,7 +51,7 @@ :link (conj units [quo/text - {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60)} + {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60 theme)} :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])} destination]) @@ -62,7 +63,7 @@ :style (style/mention-tag-wrapper first-child-mention)} [quo/text {:weight :medium - :style style/mention-tag-text + :style (style/mention-tag-text theme) :size :paragraph-1} (rf/sub [:messages/resolve-mention literal])]]) @@ -73,7 +74,8 @@ :style {:font-size 11 ; Font-size must be used instead of props or the ; styles will clash with original message text :color (colors/theme-colors colors/neutral-40 - colors/neutral-50)}} + colors/neutral-50 + theme)}} literal]) :status-tag (let [community-id (rf/sub [:community-id-by-chat-id chat-id])] @@ -95,7 +97,7 @@ (empty? (get-in children [0 :literal])))) (defn render-block - [blocks {:keys [type literal children]} chat-id style-override] + [blocks {:keys [type literal children]} chat-id style-override theme] (let [mention-first (first-child-mention children)] (case (keyword type) :paragraph @@ -103,7 +105,7 @@ [rn/view (reduce (fn [acc e] - (render-inline acc e chat-id style-override mention-first)) + (render-inline acc e chat-id style-override mention-first theme)) [quo/text {:size :paragraph-1 :key (rand-int 1000000) ;; https://github.com/status-im/status-mobile/pull/19203 @@ -117,7 +119,7 @@ (conj blocks (reduce (fn [acc e] - (render-inline acc e chat-id style-override first-child-mention)) + (render-inline acc e chat-id style-override first-child-mention theme)) [quo/text {:size :paragraph-1}] children)) @@ -128,7 +130,7 @@ :codeblock (conj blocks - [rn/view {:style (merge style/block (style/code))} + [rn/view {:style (merge style/block (style/code theme))} [quo/text (subs literal 0 (dec (count literal)))]]) blocks))) @@ -150,16 +152,17 @@ (defn render-parsed-text [{:keys [content chat-id edited-at style-override on-layout]}] ^{:key (:parsed-text content)} - [rn/view - {:style style-override - :on-layout on-layout - :accessibility-label :message-text-content} - (reduce (fn [acc e] - (render-block acc e chat-id style-override)) - [:<>] - (cond-> (:parsed-text content) - edited-at - add-edited-tag))]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style style-override + :on-layout on-layout + :accessibility-label :message-text-content} + (reduce (fn [acc e] + (render-block acc e chat-id style-override theme)) + [:<>] + (cond-> (:parsed-text content) + edited-at + add-edited-tag))])) (defn text-content [message-data] diff --git a/src/status_im/contexts/chat/messenger/messages/content/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/view.cljs index 4b3cdcde46..d937dbecb3 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/view.cljs @@ -148,12 +148,13 @@ (declare on-long-press) -(defn- user-message-content-internal +(defn user-message-content [] (let [show-delivery-state? (reagent/atom false)] (fn [{:keys [message-data context keyboard-shown? show-reactions? in-reaction-and-action-menu? - show-user-info? preview? theme]}] - (let [{:keys [content-type quoted-message content outgoing outgoing-status pinned-by pinned + show-user-info? preview?]}] + (let [theme (quo.theme/use-theme) + {:keys [content-type quoted-message content outgoing outgoing-status pinned-by pinned last-in-group? message-id chat-id]} message-data {:keys [disable-message-long-press?]} context first-image (first (:album message-data)) @@ -262,15 +263,13 @@ (when show-reactions? [reactions/message-reactions-row (assoc message-data :preview? preview?) [rn/view {:pointer-events :none} - [user-message-content-internal + [user-message-content {: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 [{:keys [deleted? deleted-for-me?] :as message-data} context keyboard-shown?] (rf/dispatch [:dismiss-keyboard]) diff --git a/src/status_im/contexts/chat/messenger/messages/link_preview/style.cljs b/src/status_im/contexts/chat/messenger/messages/link_preview/style.cljs deleted file mode 100644 index 614058777f..0000000000 --- a/src/status_im/contexts/chat/messenger/messages/link_preview/style.cljs +++ /dev/null @@ -1,81 +0,0 @@ -(ns status-im.contexts.chat.messenger.messages.link-preview.style - (:require - [quo.foundations.colors :as colors] - [quo.foundations.typography :as typography] - [react-native.core :as rn])) - -(def screen-width (:width (rn/get-window))) - -(defn scale-dimensions - "Scale a given height and width to be maximum percentage allowed of the screen width" - [{:keys [height width] :as dimensions}] - (let [max-cover 0.5 - aspect-ratio (/ height width) - max-width (* max-cover screen-width)] - (if (< width max-width) - dimensions - {:width max-width - :height (* aspect-ratio max-width)}))) - -(defn link-preview-enable-request-wrapper - [] - {:border-left-width 2 - :border-left-color (colors/theme-colors colors/neutral-10 colors/neutral-80) - :padding-horizontal 16 - :margin-top 8}) - -(defn wrapper - [] - {:overflow :hidden - :border-left-width 2 - :border-left-color (colors/theme-colors colors/neutral-10 colors/neutral-60) - :padding-horizontal 16 - :margin-top 8}) - -(defn separator - [] - {:height 4}) - -(defn title-wrapper - [] - {:flex-direction :row - :align-items :center}) - -(defn title-site-image - [] - {:width 16 - :height 16 - :background-color (colors/theme-colors colors/neutral-20 colors/neutral-60) - :border-radius 8 - :margin-right 6}) - -(defn title-text - [] - (merge - {:color (colors/theme-colors colors/black colors/white)} - typography/font-semi-bold - typography/paragraph-1)) - -(defn main-text - [] - (merge - {:color (colors/theme-colors colors/black colors/white) - :margin-top 4 - :margin-bottom 8} - typography/paragraph-2)) - -(defn extra-text - [] - (merge - {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)} - typography/font-medium - typography/paragraph-2)) - -(defn image - [{:keys [height width] :as dimensions}] - (merge (if (and (pos? height) - (pos? width)) - (scale-dimensions dimensions) - {:height 170}) - {:overflow :hidden - :border-radius 12})) diff --git a/src/status_im/contexts/chat/messenger/messages/link_preview/view.cljs b/src/status_im/contexts/chat/messenger/messages/link_preview/view.cljs deleted file mode 100644 index 8bf0b081d1..0000000000 --- a/src/status_im/contexts/chat/messenger/messages/link_preview/view.cljs +++ /dev/null @@ -1,177 +0,0 @@ -(ns status-im.contexts.chat.messenger.messages.link-preview.view - (:require - [clojure.string :as string] - [quo.core :as quo] - [react-native.core :as rn] - [react-native.fast-image :as fast-image] - [reagent.core :as reagent] - [status-im.constants :as constants] - [status-im.contexts.chat.messenger.messages.link-preview.events] - [status-im.contexts.chat.messenger.messages.link-preview.style :as style] - [utils.i18n :as i18n] - [utils.re-frame :as rf] - [utils.security.core :as security])) - -(defn link-belongs-to-domain - [link domain] - (string/starts-with? link (str "https://" domain))) - -(defn community-id-from-link - [link] - (nth (re-find constants/regx-community-universal-link link) 4)) - -(defn domain-info-if-whitelisted - [link whitelist] - (->> whitelist - (filter #(link-belongs-to-domain link (:address %))) - first)) - -(defn link-extended-info - [link whitelist enabled-list] - (if-not (community-id-from-link link) - (let [domain-info (domain-info-if-whitelisted link whitelist)] - {:whitelisted? (boolean domain-info) - :enabled? (contains? enabled-list (:title domain-info)) - :link link}) - {:whitelisted? true - :enabled? true - :link link - :community? true})) - -(defn previewable-link - [links whitelist enabled-list] - (->> links - (map #(link-extended-info % whitelist enabled-list)) - (filter #(:whitelisted? %)) - (first))) - -(defn is-gif? - [url] - (and url (string/ends-with? url ".gif"))) - -(defn community-preview - [{:keys [name members description verified] :as community}] - (let [members-count (count members)] - [rn/view (style/wrapper) - [rn/view (style/title-wrapper) - [rn/image {:style (style/title-site-image)}] - [rn/text {:style (style/title-text)} - name]] - [rn/text {:style (style/extra-text)} - (if verified - (i18n/label :t/verified-community) - (i18n/label :t/community))] - [rn/text {:style (style/main-text)} - description] - [rn/text {:style (style/extra-text)} - (i18n/label-pluralize members-count :t/community-members {:count members-count})] - [rn/view (style/separator)] - [quo/button - {:type :grey - :on-press #(rf/dispatch [:navigate-to :community - {:from-chat true - :community-id (:id community)}])} - (i18n/label :t/view)]])) - -(defn community-preview-loader - [community-link] - (let [cached-preview-data (rf/sub [:link-preview/cache community-link])] - (reagent/create-class - {:component-did-mount - (fn [] - (when-not cached-preview-data - (let [community-id (community-id-from-link community-link)] - (rf/dispatch [:communities/fetch-community - {:community-id community-id - :update-last-opened-at? false}])))) - :reagent-render - (fn [] - (when cached-preview-data - [community-preview cached-preview-data]))}))) - -(defn link-preview-loader - [link _] - (let [measured-width (reagent/atom 0) - measured-height (reagent/atom 0)] - (reagent/create-class - {:component-did-mount - (fn [] - (rf/dispatch [:chat.ui/load-link-preview-data link])) - :component-did-update - (fn [this [_ previous-props]] - (let [[_ props] (.-argv (.-props ^js this)) - refresh-photo? (not= previous-props props)] - (when refresh-photo? - (rf/dispatch [:chat.ui/load-link-preview-data props])))) - :reagent-render - (fn [link {:keys [on-long-press]}] - (let [cached-preview-data (rf/sub [:link-preview/cache link])] - (when-let [{:keys [site title thumbnail-url error]} cached-preview-data] - (when (and (not error) site title) - [rn/touchable-opacity - {:style (when-not (is-gif? thumbnail-url) - {:align-self :stretch}) - :on-press #(when (security/safe-link? link) - (rf/dispatch [:browser.ui/message-link-pressed link])) - :on-long-press on-long-press} - [rn/view (style/wrapper) - (when-not (is-gif? thumbnail-url) - [:<> - [rn/view (style/title-wrapper) - [rn/image {:style (style/title-site-image)}] - [rn/text {:style (style/title-text)} - site]] - [rn/text {:style (style/main-text)} - title] - [rn/text {:style (style/extra-text)} - link]]) - (when-not (string/blank? thumbnail-url) - [:<> - [rn/view (style/separator)] - [fast-image/fast-image - {:source {:uri thumbnail-url} - :on-load (fn [e] - (let [{:keys [width height]} (js->clj (.-nativeEvent e) - :keywordize-keys - true)] - (reset! measured-width width) - (reset! measured-height height))) - :style (style/image {:width @measured-width - :height @measured-height}) - :accessibility-label :member-photo}]])]]))))}))) - -(defn link-preview-enable-request - [] - [rn/view (style/link-preview-enable-request-wrapper) - [rn/text {:style (style/title-text)} - (i18n/label :t/enable-link-previews)] - [rn/text {:style (style/main-text)} - (i18n/label :t/once-enabled-share-metadata)] - [rn/view (style/separator)] - [quo/button - {:type :grey - :on-press #(rf/dispatch [:open-modal :link-preview-settings])} - (i18n/label :t/enable)] - [rn/view (style/separator)] - [quo/button - {:type :grey - :on-press #(rf/dispatch [:chat.ui/should-suggest-link-preview false])} - (i18n/label :t/dont-ask)]]) - -(defn link-preview - [{:keys [message-id chat-id]} context] - (let [links (get-in (rf/sub [:chats/chat-messages chat-id]) [message-id :content :links]) - ask-user? (rf/sub [:link-preview/link-preview-request-enabled]) - enabled-sites (rf/sub [:link-preview/enabled-sites]) - whitelist (rf/sub [:link-previews-whitelist])] - (when links - (let [{:keys [link - whitelisted? - enabled? - community?]} - (previewable-link links whitelist enabled-sites) - link-whitelisted? (and link whitelisted?)] - (cond - community? [community-preview-loader link] - (and link-whitelisted? enabled?) [link-preview-loader link context] - (and link-whitelisted? ask-user?) [link-preview-enable-request]))))) diff --git a/src/status_im/contexts/chat/messenger/messages/list/style.cljs b/src/status_im/contexts/chat/messenger/messages/list/style.cljs index c8cf9fb1ed..e78cfe7488 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/style.cljs @@ -2,7 +2,6 @@ (:require [quo.foundations.colors :as colors] [quo.foundations.shadows :as shadows] - [quo.theme :as quo.theme] [react-native.reanimated :as reanimated] [status-im.contexts.chat.messenger.messages.constants :as messages.constants])) @@ -26,7 +25,7 @@ (reanimated/apply-animations-to-style {:bottom bottom} (merge - (shadows/get 2 (quo.theme/get-theme) :inverted) + (shadows/get 2 theme :inverted) {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) :padding-horizontal 20 :border-radius 20 diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs index 1e6b9bbda9..5cb3c3d9f9 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -347,7 +347,7 @@ (defn messages-list-content [{:keys [insets distance-from-list-top content-height layout-height distance-atom chat-screen-layout-calculations-complete? chat-list-scroll-y]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) {:keys [chat-type chat-id] :as chat} (rf/sub [:chats/current-chat-chat-view]) one-to-one-chat? (= chat-type constants/one-to-one-chat-type) community-channel? (= constants/community-chat-type chat-type) diff --git a/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs b/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs index f28e04c7a5..5e70daf6fe 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs @@ -55,9 +55,9 @@ {:margin-left 8}) (defn header-display-name - [] - {:color (colors/theme-colors colors/black colors/white)}) + [theme] + {:color (colors/theme-colors colors/black colors/white theme)}) (defn header-status - [] - {:color (colors/theme-colors colors/neutral-80-opa-50 colors/white-opa-40)}) + [theme] + {:color (colors/theme-colors colors/neutral-80-opa-50 colors/white-opa-40 theme)}) diff --git a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs index 060a480333..18adc97b33 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs @@ -3,6 +3,7 @@ [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [re-frame.db] [react-native.blur :as blur] [react-native.core :as rn] @@ -21,7 +22,8 @@ (defn header-content-container [{:keys [chat distance-from-list-top all-loaded? chat-screen-layout-calculations-complete?]}] - (let [{:keys [chat-id group-chat chat-type chat-name + (let [theme (quo.theme/use-theme) + {:keys [chat-id group-chat chat-type chat-name emoji color]} chat display-name (cond (= chat-type constants/one-to-one-chat-type) @@ -68,20 +70,21 @@ {:weight :semi-bold :size :paragraph-1 :number-of-lines 1 - :style (style/header-display-name)} + :style (style/header-display-name theme)} display-name] (when-not group-chat [quo/text {:number-of-lines 1 :weight :medium :size :paragraph-2 - :style (style/header-status)} + :style (style/header-status theme)} (i18n/label (if online? :t/online :t/offline))])]])) (defn animated-background-and-pinned-banner [{:keys [chat-id navigation-view-height distance-from-list-top all-loaded?]}] - (let [animation-distance messages.constants/header-animation-distance + (let [theme (quo.theme/use-theme) + animation-distance messages.constants/header-animation-distance props {:distance-from-list-top distance-from-list-top :all-loaded? all-loaded?} background-opacity (worklets/interpolate-navigation-view-opacity @@ -106,7 +109,7 @@ {:style {:flex 1} :blur-amount 20 :blur-type :transparent - :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur) + :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur theme) :blur-radius (if platform/ios? 20 10)}]] [pin.banner/banner {:chat-id chat-id diff --git a/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs b/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs index 9d664c4505..a533a02abc 100644 --- a/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs @@ -1,7 +1,7 @@ (ns status-im.contexts.chat.messenger.messages.pin.banner.view (:require [quo.core :as quo] - [quo.theme :as theme] + [quo.theme] [react-native.blur :as blur] [react-native.platform :as platform] [react-native.reanimated :as reanimated] @@ -10,18 +10,19 @@ (defn f-banner [{:keys [chat-id banner-opacity top-offset]} latest-pin-text pins-count] - [reanimated/view {:style (style/container-animated-style top-offset banner-opacity)} - [blur/view - {:style style/container - :blur-radius (if platform/ios? 20 10) - :blur-type (if (theme/dark?) :dark :light) - :blur-amount 20}] - [quo/banner - {:latest-pin-text latest-pin-text - :pins-count pins-count - :on-press (fn [] - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}]]) + (let [theme (quo.theme/use-theme)] + [reanimated/view {:style (style/container-animated-style top-offset banner-opacity)} + [blur/view + {:style style/container + :blur-radius (if platform/ios? 20 10) + :blur-type theme + :blur-amount 20}] + [quo/banner + {:latest-pin-text latest-pin-text + :pins-count pins-count + :on-press (fn [] + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}]])) (defn banner [{:keys [chat-id] :as props}] diff --git a/src/status_im/contexts/chat/messenger/photo_selector/album_selector/style.cljs b/src/status_im/contexts/chat/messenger/photo_selector/album_selector/style.cljs index 756fd90012..932ed6d4b8 100644 --- a/src/status_im/contexts/chat/messenger/photo_selector/album_selector/style.cljs +++ b/src/status_im/contexts/chat/messenger/photo_selector/album_selector/style.cljs @@ -4,13 +4,14 @@ [react-native.reanimated :as reanimated])) (defn selector-container - [top] + [top theme] (reanimated/apply-animations-to-style {:top top} {:position :absolute :z-index 1 :background-color (colors/theme-colors colors/white - colors/neutral-100) + colors/neutral-100 + theme) :left 0 :right 0})) diff --git a/src/status_im/contexts/chat/messenger/photo_selector/album_selector/view.cljs b/src/status_im/contexts/chat/messenger/photo_selector/album_selector/view.cljs index ab4b20c7d6..84531e1fa1 100644 --- a/src/status_im/contexts/chat/messenger/photo_selector/album_selector/view.cljs +++ b/src/status_im/contexts/chat/messenger/photo_selector/album_selector/view.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.platform :as platform] @@ -12,7 +13,8 @@ (defn render-album [{title :title size :count uri :uri} index _ {:keys [album? selected-album top]}] - (let [selected? (= selected-album title)] + (let [selected? (= selected-album title) + theme (quo.theme/use-theme)] [rn/touchable-opacity {:on-press (fn [] (rf/dispatch [:chat.ui/camera-roll-select-album title]) @@ -33,7 +35,7 @@ title] [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)}} (when size (str size " " @@ -45,7 +47,7 @@ {:style {:position :absolute :right 16}} [quo/icon :i/check - {:size 20 :color (colors/theme-colors colors/primary-50 colors/primary-60)}]])])) + {:size 20 :color (colors/theme-colors colors/primary-50 colors/primary-60 theme)}]])])) (def no-title "no-title") @@ -63,7 +65,8 @@ (defn- f-album-selector [{:keys [scroll-enabled? on-scroll]} album? selected-album top] - (let [albums (rf/sub [:camera-roll/albums]) + (let [theme (quo.theme/use-theme) + albums (rf/sub [:camera-roll/albums]) total-photos-count-android (rf/sub [:camera-roll/total-photos-count-android]) total-photos-count-ios (rf/sub [:camera-roll/total-photos-count-ios]) albums-sections [{:title no-title @@ -75,7 +78,7 @@ {:title (i18n/label :t/my-albums) :data (:my-albums albums)}] window-height (:height (rn/get-window))] - [reanimated/view {:style (style/selector-container top)} + [reanimated/view {:style (style/selector-container top theme)} [gesture/section-list {:data albums-sections :sections albums-sections diff --git a/src/status_im/contexts/chat/messenger/photo_selector/style.cljs b/src/status_im/contexts/chat/messenger/photo_selector/style.cljs index 130c99c8d1..6bffc473bb 100644 --- a/src/status_im/contexts/chat/messenger/photo_selector/style.cljs +++ b/src/status_im/contexts/chat/messenger/photo_selector/style.cljs @@ -25,8 +25,8 @@ :right 20}) (defn close-button-container - [] - {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) + [theme] + {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :width 32 :height 32 :border-radius 10 @@ -36,17 +36,17 @@ :left 20}) (defn title-container - [] + [theme] {:flex-direction :row - :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :border-radius 10 :padding-horizontal 12 :padding-vertical 5 :align-self :center}) (defn chevron-container - [] - {:background-color (colors/theme-colors colors/neutral-30 colors/neutral-100) + [theme] + {:background-color (colors/theme-colors colors/neutral-30 colors/neutral-100 theme) :width 14 :height 14 :border-radius 7 @@ -65,11 +65,11 @@ :border-top-right-radius (when (= index 2) 20)}) (defn overlay - [window-width] + [window-width theme] {:position :absolute :width (- (/ window-width 3) 0.67) :height (/ window-width 3) - :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)}) (def image-count {:position :absolute diff --git a/src/status_im/contexts/chat/messenger/photo_selector/view.cljs b/src/status_im/contexts/chat/messenger/photo_selector/view.cljs index 25b655c896..75d1165335 100644 --- a/src/status_im/contexts/chat/messenger/photo_selector/view.cljs +++ b/src/status_im/contexts/chat/messenger/photo_selector/view.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.chat.messenger.photo-selector.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.linear-gradient :as linear-gradient] @@ -67,7 +68,8 @@ (defn render-image [item index _ {:keys [window-width selected]}] - (let [customization-color (rf/sub [:profile/customization-color]) + (let [theme (quo.theme/use-theme) + customization-color (rf/sub [:profile/customization-color]) item-selected? (some #(= (:uri item) (:uri %)) @selected)] [rn/touchable-opacity {:on-press (fn [] @@ -83,7 +85,7 @@ :style (style/image window-width index)}] (when item-selected? [:<> - [rn/view {:style (style/overlay window-width)}] + [rn/view {:style (style/overlay window-width theme)}] [quo/counter {:container-style style/image-count :customization-color customization-color diff --git a/src/status_im/contexts/chat/messenger/placeholder/style.cljs b/src/status_im/contexts/chat/messenger/placeholder/style.cljs index a6309f17cb..b58677d420 100644 --- a/src/status_im/contexts/chat/messenger/placeholder/style.cljs +++ b/src/status_im/contexts/chat/messenger/placeholder/style.cljs @@ -3,7 +3,7 @@ [react-native.reanimated :as reanimated])) (defn container - [top opacity z-index] + [top opacity z-index theme] (reanimated/apply-animations-to-style {:opacity opacity :z-index z-index} @@ -13,4 +13,4 @@ :left 0 :right 0 :bottom 0 - :background-color (colors/theme-colors colors/white colors/neutral-95)})) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)})) diff --git a/src/status_im/contexts/chat/messenger/placeholder/view.cljs b/src/status_im/contexts/chat/messenger/placeholder/view.cljs index a8fc68a8d2..729997b1ec 100644 --- a/src/status_im/contexts/chat/messenger/placeholder/view.cljs +++ b/src/status_im/contexts/chat/messenger/placeholder/view.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.chat.messenger.placeholder.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] @@ -16,8 +17,9 @@ (defn view [chat-screen-layout-calculations-complete?] - (let [top (safe-area/get-top) + (let [theme (quo.theme/use-theme) + top (safe-area/get-top) opacity (worklets/placeholder-opacity chat-screen-layout-calculations-complete?) z-index (worklets/placeholder-z-index chat-screen-layout-calculations-complete?)] - [reanimated/view {:style (style/container top opacity z-index)} + [reanimated/view {:style (style/container top opacity z-index theme)} [loading-skeleton]])) diff --git a/src/status_im/contexts/communities/actions/accounts_selection/style.cljs b/src/status_im/contexts/communities/actions/accounts_selection/style.cljs index 3742bd32d2..8334d90e58 100644 --- a/src/status_im/contexts/communities/actions/accounts_selection/style.cljs +++ b/src/status_im/contexts/communities/actions/accounts_selection/style.cljs @@ -14,7 +14,7 @@ :padding-horizontal screen-horizontal-padding}) (defn bottom-actions - [] + [theme] {:padding-vertical 12 :padding-horizontal screen-horizontal-padding - :background-color (colors/theme-colors colors/white colors/neutral-95)}) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}) diff --git a/src/status_im/contexts/communities/actions/accounts_selection/view.cljs b/src/status_im/contexts/communities/actions/accounts_selection/view.cljs index 6f04893ba5..1dea111e27 100644 --- a/src/status_im/contexts/communities/actions/accounts_selection/view.cljs +++ b/src/status_im/contexts/communities/actions/accounts_selection/view.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.communities.actions.accounts-selection.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture] [status-im.contexts.communities.actions.accounts-selection.style :as style] @@ -14,7 +15,8 @@ (defn view [] - (let [{id :community-id} (rf/sub [:get-screen-params]) + (let [theme (quo.theme/use-theme) + {id :community-id} (rf/sub [:get-screen-params]) {:keys [name color images joined]} (rf/sub [:communities/community id]) has-permissions? (rf/sub [:communities/has-permissions? id]) airdrop-account (rf/sub [:communities/airdrop-account id]) @@ -138,7 +140,7 @@ (when-not can-edit-addresses? [community-rules/view id])]] (when-not can-edit-addresses? - [rn/view {:style (style/bottom-actions)} + [rn/view {:style (style/bottom-actions theme)} [quo/slide-button {:size :size-48 :track-text (i18n/label :t/slide-to-request-to-join) diff --git a/src/status_im/contexts/communities/actions/channel_view_details/view.cljs b/src/status_im/contexts/communities/actions/channel_view_details/view.cljs index 39e7009d98..1cb3a79deb 100644 --- a/src/status_im/contexts/communities/actions/channel_view_details/view.cljs +++ b/src/status_im/contexts/communities/actions/channel_view_details/view.cljs @@ -19,7 +19,7 @@ [primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity public-key]) {:keys [ens-verified added? compressed-key]} (rf/sub [:contacts/contact-by-address public-key]) - theme (quo.theme/use-theme-value)] + theme (quo.theme/use-theme)] [contact-list-item/contact-list-item {:on-press #(rf/dispatch [:chat.ui/show-profile public-key]) :on-long-press show-profile-actions @@ -65,7 +65,7 @@ pins-count (rf/sub [:chats/pin-messages-count chat-id]) items (rf/sub [:communities/sorted-community-members-section-list community-id]) - theme (quo.theme/use-theme-value)] + theme (quo.theme/use-theme)] (rn/use-mount (fn [] (rf/dispatch [:pin-message/load-pin-messages chat-id]))) [:<> diff --git a/src/status_im/contexts/communities/actions/invite_contacts/view.cljs b/src/status_im/contexts/communities/actions/invite_contacts/view.cljs index c9b1721454..1e6fb74ee4 100644 --- a/src/status_im/contexts/communities/actions/invite_contacts/view.cljs +++ b/src/status_im/contexts/communities/actions/invite_contacts/view.cljs @@ -71,11 +71,12 @@ :disabled? community-member?} item])) -(defn view-internal - [{:keys [theme]}] +(defn view + [] (fn [] (rn/use-unmount #(rf/dispatch [:group-chat/clear-contacts])) - (let [customization-color (rf/sub [:profile/customization-color]) + (let [theme (quo.theme/use-theme) + customization-color (rf/sub [:profile/customization-color]) {:keys [id]} (rf/sub [:get-screen-params]) contacts (rf/sub [:contacts/filtered-active-sections]) selected (rf/sub [:group/selected-contacts]) @@ -137,5 +138,3 @@ (if (= 1 selected-contacts-count) (i18n/label :t/invite-1-user) (i18n/label :t/invite-n-users {:count selected-contacts-count}))])])]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/communities/actions/request_to_join/view.cljs b/src/status_im/contexts/communities/actions/request_to_join/view.cljs index 37abefc50c..b8511c9999 100644 --- a/src/status_im/contexts/communities/actions/request_to_join/view.cljs +++ b/src/status_im/contexts/communities/actions/request_to_join/view.cljs @@ -22,10 +22,11 @@ (rf/dispatch [:navigate-back])) -(defn- view-internal - [{:keys [theme]}] +(defn view + [] (fn [] - (let [{:keys [id]} (rf/sub [:get-screen-params]) + (let [theme (quo.theme/use-theme) + {:keys [id]} (rf/sub [:get-screen-params]) {:keys [color name images]} (rf/sub [:communities/community id])] [rn/safe-area-view {:flex 1} [gesture/scroll-view {:style style/container} @@ -67,5 +68,3 @@ {:size :paragraph-2 :style style/final-disclaimer-text} (i18n/label :t/request-to-join-disclaimer)]]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/communities/discover/view.cljs b/src/status_im/contexts/communities/discover/view.cljs index 7851ba83bf..c34b3c07d4 100644 --- a/src/status_im/contexts/communities/discover/view.cljs +++ b/src/status_im/contexts/communities/discover/view.cljs @@ -43,24 +43,26 @@ (defn featured-communities-header [communities-count] - [rn/view - {:style style/featured-communities-header} - [rn/view - {:style style/featured-communities-title-container} - [quo/text - {:accessibility-label :featured-communities-title - :weight :semi-bold - :size :paragraph-1 - :style {:margin-right 6}} - (i18n/label :t/featured)] - [quo/counter {:type :grey} communities-count]] - [quo/icon :i/info - {:container-style style/communities-header-container - :resize-mode :center - :size 20 - :color (colors/theme-colors - colors/neutral-50 - colors/neutral-40)}]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style style/featured-communities-header} + [rn/view + {:style style/featured-communities-title-container} + [quo/text + {:accessibility-label :featured-communities-title + :weight :semi-bold + :size :paragraph-1 + :style {:margin-right 6}} + (i18n/label :t/featured)] + [quo/counter {:type :grey} communities-count]] + [quo/icon :i/info + {:container-style style/communities-header-container + :resize-mode :center + :size 20 + :color (colors/theme-colors + colors/neutral-50 + colors/neutral-40 + theme)}]])) (defn discover-communities-segments [selected-tab fixed] @@ -214,7 +216,7 @@ :height (if (> @scroll-height 360) 208 148) - :background-color (colors/theme-colors colors/white colors/neutral-95) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme) :sticky-header [render-sticky-header {:selected-tab selected-tab :scroll-height scroll-height}]} @@ -225,10 +227,12 @@ featured-communities @view-type]]))) -(defn f-view-internal - [{:keys [theme]}] - (let [featured-communities (rf/sub [:communities/featured-contract-communities]) +(defn view + [] + (let [theme (quo.theme/use-theme) + featured-communities (rf/sub [:communities/featured-contract-communities]) customization-color (rf/sub [:profile/customization-color])] + (rn/use-mount #(rf/dispatch [:fetch-contract-communities])) [rn/view {:style (style/discover-screen-container (colors/theme-colors colors/white @@ -240,11 +244,3 @@ :customization-color customization-color :label (i18n/label :t/jump-to)}} style/floating-shell-button]])) - - -(defn- internal-discover-view - [params] - (rf/dispatch [:fetch-contract-communities]) - [:f> f-view-internal params]) - -(def view (quo.theme/with-theme internal-discover-view)) diff --git a/src/status_im/contexts/communities/home/view.cljs b/src/status_im/contexts/communities/home/view.cljs index d8ac34ab54..954c4d0343 100644 --- a/src/status_im/contexts/communities/home/view.cljs +++ b/src/status_im/contexts/communities/home/view.cljs @@ -75,12 +75,13 @@ :banner (resources/get-image :discover) :accessibility-label :communities-home-discover-card}}) -(defn- f-view-internal - [{:keys [theme]}] +(defn view + [] (let [flat-list-ref (atom nil) set-flat-list-ref #(reset! flat-list-ref %)] (fn [] - (let [customization-color (rf/sub [:profile/customization-color]) + (let [theme (quo.theme/use-theme) + customization-color (rf/sub [:profile/customization-color]) selected-tab (or (rf/sub [:communities/selected-tab]) :joined) {:keys [joined pending opened]} (rf/sub [:communities/grouped-by-status]) selected-items (case selected-tab @@ -117,9 +118,3 @@ :selected-tab selected-tab :on-tab-change (fn [tab] (rf/dispatch [:communities/select-tab tab])) :scroll-shared-value scroll-shared-value}]])))) - -(defn- internal-communities-home-view - [params] - [:f> f-view-internal params]) - -(def view (quo.theme/with-theme internal-communities-home-view)) diff --git a/src/status_im/contexts/communities/overview/style.cljs b/src/status_im/contexts/communities/overview/style.cljs index be2a301697..2807a479e2 100644 --- a/src/status_im/contexts/communities/overview/style.cljs +++ b/src/status_im/contexts/communities/overview/style.cljs @@ -60,9 +60,9 @@ :flex 1}) (defn token-gated-container - [] + [theme] {:border-radius 16 - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) :border-width 1 :padding-top 10 :margin-bottom 106}) diff --git a/src/status_im/contexts/communities/overview/view.cljs b/src/status_im/contexts/communities/overview/view.cljs index 7257ce4965..3d1d9afde1 100644 --- a/src/status_im/contexts/communities/overview/view.cljs +++ b/src/status_im/contexts/communities/overview/view.cljs @@ -3,7 +3,7 @@ [oops.core :as oops] [quo.core :as quo] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] @@ -99,7 +99,7 @@ (defn- info-button [] - (let [theme (theme/use-theme)] + (let [theme (quo.theme/use-theme)] [rn/pressable {:on-press #(rf/dispatch @@ -133,7 +133,8 @@ (defn- token-requirements [{:keys [id color role-permissions?]}] - (let [{:keys [can-request-access? + (let [theme (quo.theme/use-theme) + {:keys [can-request-access? no-member-permission? tokens networks-not-supported? @@ -150,7 +151,7 @@ [request-access-button id color] :else - [rn/view {:style (style/token-gated-container)} + [rn/view {:style (style/token-gated-container theme)} [rn/view {:style {:padding-horizontal 12 :flex-direction :row @@ -323,7 +324,8 @@ (swap! categories-heights select-keys categories) (reset! first-channel-height height))] (fn [id joined name images] - (let [cover {:uri (get-in images [:banner :uri])} + (let [theme (quo.theme/use-theme) + cover {:uri (get-in images [:banner :uri])} logo {:uri (get-in images [:thumbnail :uri])} collapsed? (and initial-joined? joined) first-category-height (->> @categories-heights @@ -340,7 +342,7 @@ :navigate-back? true :height 148 :overlay-shown? overlay-shown? - :background-color (colors/theme-colors colors/white colors/neutral-95) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme) :page-nav-props {:type :community :right-side (page-nav-right-section-buttons id) :community-name name diff --git a/src/status_im/contexts/preview/quo/animated_header_list/animated_header_list.cljs b/src/status_im/contexts/preview/quo/animated_header_list/animated_header_list.cljs index 60de2e8ba6..5a16f4750d 100644 --- a/src/status_im/contexts/preview/quo/animated_header_list/animated_header_list.cljs +++ b/src/status_im/contexts/preview/quo/animated_header_list/animated_header_list.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [re-frame.core :as rf] [react-native.core :as rn] [react-native.fast-image :as fast-image] @@ -68,10 +69,9 @@ :style {:margin-top 56 :margin-left 20}} "Alicia Keys"]) -(def theme-color (colors/theme-alpha "#5BCC95" 0.2 0.2)) - -(def parameters - {:theme-color theme-color +(defn parameters + [theme] + {:theme-color (colors/theme-alpha "#5BCC95" 0.2 0.2 theme) :cover-uri "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/kitten-playing-with-toy-mouse-royalty-free-image-590055188-1542816918.jpg?crop=1.00xw:0.758xh;0,0.132xh&resize=480:*" :f-display-picture-comp f-display-picture-comp @@ -82,4 +82,5 @@ (defn mock-screen [] - [quo/animated-header-list parameters]) + (let [theme (quo.theme/use-theme)] + [quo/animated-header-list (parameters theme)])) diff --git a/src/status_im/contexts/preview/quo/common.cljs b/src/status_im/contexts/preview/quo/common.cljs index db616afe60..cea42ce91a 100644 --- a/src/status_im/contexts/preview/quo/common.cljs +++ b/src/status_im/contexts/preview/quo/common.cljs @@ -5,9 +5,10 @@ [utils.re-frame :as rf])) -(defn- view-internal - [{:keys [theme title]}] - (let [logged-in? (rf/sub [:multiaccount/logged-in?]) +(defn navigation-bar + [{:keys [title]}] + (let [theme (quo.theme/use-theme) + logged-in? (rf/sub [:multiaccount/logged-in?]) has-profiles? (boolean (rf/sub [:profile/profiles-overview])) root (if has-profiles? :screen/profile.profiles :screen/onboarding.intro) light? (= theme :light)] @@ -17,11 +18,11 @@ :text-align :left :icon-name :i/close :right-side [{:icon-name (if light? :i/dark :i/light) - :on-press #(if light? (quo.theme/set-theme :dark) (quo.theme/set-theme :light))}] + :on-press #(if light? + (rf/dispatch [:theme/switch :dark]) + (rf/dispatch [:theme/switch :light]))}] :on-press #(if (or logged-in? (not= (rf/sub [:view-id]) :quo-preview)) (rf/dispatch [:navigate-back]) (do - (quo.theme/set-theme :dark) + (rf/dispatch [:theme/switch :dark]) (rf/dispatch [:init-root root])))}])) - -(def navigation-bar (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/preview/quo/community/list_item.cljs b/src/status_im/contexts/preview/quo/community/list_item.cljs index 74be8a6ae8..62edb5b832 100644 --- a/src/status_im/contexts/preview/quo/community/list_item.cljs +++ b/src/status_im/contexts/preview/quo/community/list_item.cljs @@ -60,7 +60,7 @@ (conj descriptors-base {:type :text :key :subtitle})) (defn descriptors - [{:keys [members? info] :as state}] + [{:keys [members? info] :as state} theme] (let [descs (case (:type state) :discover (cond-> descriptors-type-discover members? @@ -76,7 +76,7 @@ (into [descriptor-unread-count])) :share descriptors-type-share nil)] - (if (quo.theme/dark?) + (if (= :dark theme) (into [descriptor-blur] descs) descs))) @@ -94,15 +94,16 @@ :active-count 112100 :unread-count 5})] (fn [] - [preview/preview-container {:state state :descriptor (descriptors @state)} - [quo/community-list - (merge @state - {:container-style {:width 335} - :logo (resources/get-mock-image :status-logo) - :tokens (:tokens data/community) - :on-press #(js/alert "List item pressed") - :on-long-press #(js/alert "Long pressed item") - :on-press-info #(js/alert "Info pressed") - :members (when (:members? @state) - {:members-count (:members-count @state) - :active-count (:active-count @state)})})]]))) + (let [theme (quo.theme/use-theme)] + [preview/preview-container {:state state :descriptor (descriptors @state theme)} + [quo/community-list + (merge @state + {:container-style {:width 335} + :logo (resources/get-mock-image :status-logo) + :tokens (:tokens data/community) + :on-press #(js/alert "List item pressed") + :on-long-press #(js/alert "Long pressed item") + :on-press-info #(js/alert "Info pressed") + :members (when (:members? @state) + {:members-count (:members-count @state) + :active-count (:active-count @state)})})]])))) diff --git a/src/status_im/contexts/preview/quo/empty_state/empty_state.cljs b/src/status_im/contexts/preview/quo/empty_state/empty_state.cljs index 03a75f7729..76b71c7c63 100644 --- a/src/status_im/contexts/preview/quo/empty_state/empty_state.cljs +++ b/src/status_im/contexts/preview/quo/empty_state/empty_state.cljs @@ -22,9 +22,10 @@ {:key :blur? :type :boolean}]) -(defn view-internal - [{:keys [theme]}] - (let [state (reagent/atom {:image :no-contacts +(defn view + [] + (let [theme (quo.theme/use-theme) + state (reagent/atom {:image :no-contacts :title "A big friendly title" :description "Some cool description will be here" :blur? false @@ -46,5 +47,3 @@ {:text (:lower-button-text @state) :on-press #(js/alert "Lower button")}) (assoc :image (resources/get-themed-image (:image @state) theme)))]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/preview/quo/foundations/shadows.cljs b/src/status_im/contexts/preview/quo/foundations/shadows.cljs index b2c9a3b9bf..5c7af21fbf 100644 --- a/src/status_im/contexts/preview/quo/foundations/shadows.cljs +++ b/src/status_im/contexts/preview/quo/foundations/shadows.cljs @@ -9,7 +9,7 @@ [status-im.contexts.preview.quo.preview :as preview])) (defn demo-box - [shadow? description shadow-style] + [shadow? description shadow-style theme] [rn/view {:style {:margin-left :auto :margin-right :auto @@ -21,7 +21,7 @@ {:style (merge {:width 60 :height 60 :border-radius 16 - :background-color (colors/theme-colors colors/white colors/neutral-90)} + :background-color (colors/theme-colors colors/white colors/neutral-90 theme)} (when shadow? shadow-style))}]]) (def descriptor @@ -31,7 +31,8 @@ (defn view [] (let [state (reagent/atom {:shadow? true}) - shadow? (reagent/cursor state [:shadow?])] + shadow? (reagent/cursor state [:shadow?]) + theme (quo.theme/use-theme)] (fn [] [preview/preview-container {:state state :descriptor descriptor} [quo/text @@ -39,19 +40,19 @@ :margin-right :auto :align-items :center}} "Normal Scales"] - [demo-box @shadow? "Shadow 1" (shadows/get 1)] - [demo-box @shadow? "Shadow 2" (shadows/get 2)] - [demo-box @shadow? "Shadow 3" (shadows/get 3)] - [demo-box @shadow? "Shadow 4" (shadows/get 4)] + [demo-box @shadow? "Shadow 1" (shadows/get 1 theme) theme] + [demo-box @shadow? "Shadow 2" (shadows/get 2 theme) theme] + [demo-box @shadow? "Shadow 3" (shadows/get 3 theme) theme] + [demo-box @shadow? "Shadow 4" (shadows/get 4 theme) theme] [quo/text {:style {:margin-left :auto :margin-right :auto :align-items :center}} "Inverted Scales"] - [demo-box @shadow? "Shadow 1" (shadows/get 1 (quo.theme/get-theme) :inverted)] - [demo-box @shadow? "Shadow 2" (shadows/get 2 (quo.theme/get-theme) :inverted)] - [demo-box @shadow? "Shadow 3" (shadows/get 3 (quo.theme/get-theme) :inverted)] - [demo-box @shadow? "Shadow 4" (shadows/get 4 (quo.theme/get-theme) :inverted)] + [demo-box @shadow? "Shadow 1" (shadows/get 1 theme :inverted) theme] + [demo-box @shadow? "Shadow 2" (shadows/get 2 theme :inverted) theme] + [demo-box @shadow? "Shadow 3" (shadows/get 3 theme :inverted) theme] + [demo-box @shadow? "Shadow 4" (shadows/get 4 theme :inverted) theme] [quo/text {:style {:margin-left :auto :margin-right :auto 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 73c76c8c93..4d05912ab8 100644 --- a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs +++ b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.preview.quo.gradient.gradient-cover (:require [quo.core :as quo] - [quo.theme :as quo.theme] [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] @@ -52,7 +51,7 @@ (fn [] (rn/use-effect (fn [] (when @blur? - (quo.theme/set-theme :dark))) + (rf/dispatch [:theme/switch :dark]))) [@blur?]) [preview/preview-container {:state state :descriptor descriptor} [rn/view diff --git a/src/status_im/contexts/preview/quo/graph/interactive_graph.cljs b/src/status_im/contexts/preview/quo/graph/interactive_graph.cljs index c06bc35051..9f21326322 100644 --- a/src/status_im/contexts/preview/quo/graph/interactive_graph.cljs +++ b/src/status_im/contexts/preview/quo/graph/interactive_graph.cljs @@ -4,6 +4,7 @@ [quo.components.graph.utils :as utils] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.preview.quo.preview :as preview])) @@ -112,28 +113,30 @@ (defn f-view [state] (fn [] - (rn/use-effect (fn [] - (let [time-frame (:time-frame @state) - data (generate-data time-frame) - highest-value (utils/find-highest-value data) - lowest-value (utils/find-lowest-value data) - average-value (gstring/format "%.2f" (/ (+ highest-value lowest-value) 2))] - (swap! state assoc :data data :reference-value average-value))) - [(:time-frame @state)]) - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [quo/interactive-graph - {:data (:data @state) - :state (:state @state) - :reference-value (:reference-value @state) - :reference-prefix (:reference-prefix @state) - :customization-color (:customization-color @state) - :decimal-separator (:decimal-separator @state)}]]])) + (let [theme (quo.theme/use-theme)] + (rn/use-effect (fn [] + (let [time-frame (:time-frame @state) + data (generate-data time-frame) + highest-value (utils/find-highest-value data) + lowest-value (utils/find-lowest-value data) + average-value (gstring/format "%.2f" (/ (+ highest-value lowest-value) 2))] + (swap! state assoc :data data :reference-value average-value))) + [(:time-frame @state)]) + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [preview/customizer state descriptor theme] + [quo/interactive-graph + {:data (:data @state) + :state (:state @state) + :reference-value (:reference-value @state) + :reference-prefix (:reference-prefix @state) + :customization-color (:customization-color @state) + :decimal-separator (:decimal-separator @state)}]]]))) (defn view [] - (let [data (generate-data :1-week) + (let [theme (quo.theme/use-theme) + data (generate-data :1-week) highest-value (utils/find-highest-value data) lowest-value (utils/find-lowest-value data) average-value (gstring/format "%.2f" (/ (+ highest-value lowest-value) 2)) @@ -148,6 +151,7 @@ {:style {:background-color (colors/theme-colors colors/white - colors/neutral-95) + colors/neutral-95 + theme) :flex 1}} [:f> f-view state]])) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index 247f16de05..4b6205e7b0 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -2,6 +2,7 @@ (:refer-clojure :exclude [filter]) (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.preview.quo.animated-header-list.animated-header-list @@ -564,12 +565,13 @@ (defn- main-screen [] - [:<> - [common/navigation-bar {:title "Quo components preview"}] - [rn/scroll-view {:style (style/main)} - (for [category (sort screens-categories)] - ^{:key (first category)} - [category-view category])]]) + (let [theme (quo.theme/use-theme)] + [:<> + [common/navigation-bar {:title "Quo components preview"}] + [rn/scroll-view {:style (style/main theme)} + (for [category (sort screens-categories)] + ^{:key (first category)} + [category-view category])]])) (def screens (->> screens-categories diff --git a/src/status_im/contexts/preview/quo/notifications/activity_logs.cljs b/src/status_im/contexts/preview/quo/notifications/activity_logs.cljs index e4602f3564..1f1bd81cd9 100644 --- a/src/status_im/contexts/preview/quo/notifications/activity_logs.cljs +++ b/src/status_im/contexts/preview/quo/notifications/activity_logs.cljs @@ -119,7 +119,8 @@ :unread? true :items []})] (fn [] - (let [{:keys [button-1-type + (let [theme (quo.theme/use-theme) + {:keys [button-1-type button-1-label button-2-type button-2-label @@ -172,8 +173,8 @@ [rn/view {:flex 1 :padding 16} - [preview/customizer state descriptor]] - [quo.theme/provider {:theme :dark} + [preview/customizer state descriptor theme]] + [quo.theme/provider :dark [rn/view {:background-color colors/neutral-90 :flex-direction :row diff --git a/src/status_im/contexts/preview/quo/preview.cljs b/src/status_im/contexts/preview/quo/preview.cljs index ea0745bd43..3a423dd230 100644 --- a/src/status_im/contexts/preview/quo/preview.cljs +++ b/src/status_im/contexts/preview/quo/preview.cljs @@ -6,7 +6,6 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [re-frame.core :as rf] [react-native.blur :as blur] [react-native.clipboard :as clipboard] [react-native.core :as rn] @@ -15,13 +14,14 @@ [status-im.common.resources :as resources] [status-im.contexts.preview.quo.common :as common] [status-im.contexts.preview.quo.style :as style] - utils.number) + utils.number + [utils.re-frame :as rf]) (:require-macros status-im.contexts.preview.quo.preview)) (defn- label-view - [_ label] + [_ label theme] [rn/view {:style style/label-container} - [rn/text {:style (style/label)} + [rn/text {:style (style/label theme)} label]]) (defn- humanize @@ -47,25 +47,26 @@ (defn- customizer-boolean [{:keys [label state] :as args}] - (let [label (or label (key->boolean-label (:key args))) + (let [theme (quo.theme/use-theme) + label (or label (key->boolean-label (:key args))) field-value (reagent/cursor state [(:key args)]) active? @field-value] [rn/view {:style style/field-row} [label-view state label] [rn/view {:style (style/boolean-container)} [rn/pressable - {:style (style/boolean-button {:active? active? :left? true}) + {:style (style/boolean-button {:active? active? :left? true} theme) :on-press #(reset! field-value true)} - [rn/text {:style (style/field-text active?)} + [rn/text {:style (style/field-text active? theme)} "True"]] [rn/pressable - {:style (style/boolean-button {:active? (not active?) :left? false}) + {:style (style/boolean-button {:active? (not active?) :left? false} theme) :on-press #(reset! field-value false)} - [rn/text {:style (style/field-text (not active?))} + [rn/text {:style (style/field-text (not active?) theme)} "False"]]]])) (defn- customizer-text - [{:keys [label state limit suffix] :as args}] + [{:keys [label state limit suffix] :as args} theme] (let [label (or label (key->text-label (:key args))) field-value (reagent/cursor state [(:key args)])] [rn/view {:style style/field-row} @@ -75,8 +76,8 @@ (merge {:value @field-value :show-cancel false - :style (style/field-container false) - :keyboard-appearance (quo.theme/theme-value :light :dark) + :style (style/field-container false theme) + :keyboard-appearance theme :on-change-text (fn [text] (reset! field-value (if (and suffix (> (count text) (count @field-value))) @@ -87,7 +88,7 @@ {:max-length limit}))]]])) (defn- customizer-number - [{:keys [label state default] :as args}] + [{:keys [label state default] :as args} theme] (let [label (or label (key->text-label (:key args))) field-value (reagent/cursor state [(:key args)])] [rn/view {:style style/field-row} @@ -97,8 +98,8 @@ (merge {:value (str @field-value) :show-cancel false - :style (style/field-container false) - :keyboard-appearance (quo.theme/theme-value :light :dark) + :style (style/field-container false theme) + :keyboard-appearance theme :on-change-text (fn [text] (reset! field-value (utils.number/parse-int text default)) (reagent/flush))})]]])) @@ -109,48 +110,49 @@ (defn- customizer-select-modal [{:keys [open options field-value]}] - [rn/modal - {:visible @open - :on-request-close #(reset! open false) - :status-bar-translucent true - :transparent true - :animation :slide} - [rn/view {:style (style/modal-overlay)} - [rn/view {:style (style/modal-container)} - [rn/scroll-view {:shows-vertical-scroll-indicator false} - (doall - (for [{k :key v :value} options - :let [v (or v (humanize k))]] - ^{:key k} - [rn/pressable - {:style (style/select-option (= @field-value k)) - :on-press (fn [] - (reset! open false) - (reset! field-value k))} - [rn/text {:style (style/field-text (= @field-value k))} - v]]))] - [rn/view {:style (style/footer)} - [rn/pressable - {:style (style/select-button) - :on-press (fn [] - (reset! field-value nil) - (reset! open false))} - [rn/text {:style (style/field-text false)} - "Clear"]] - [rn/view {:style {:width 16}}] - [rn/touchable-opacity - {:style (style/select-button) - :on-press #(reset! open false)} - [rn/text {:style (style/field-text false)} - "Close"]]]]]]) + (let [theme (quo.theme/use-theme)] + [rn/modal + {:visible @open + :on-request-close #(reset! open false) + :status-bar-translucent true + :transparent true + :animation :slide} + [rn/view {:style (style/modal-overlay theme)} + [rn/view {:style (style/modal-container theme)} + [rn/scroll-view {:shows-vertical-scroll-indicator false} + (doall + (for [{k :key v :value} options + :let [v (or v (humanize k))]] + ^{:key k} + [rn/pressable + {:style (style/select-option (= @field-value k) theme) + :on-press (fn [] + (reset! open false) + (reset! field-value k))} + [rn/text {:style (style/field-text (= @field-value k) theme)} + v]]))] + [rn/view {:style (style/footer theme)} + [rn/pressable + {:style (style/select-button theme) + :on-press (fn [] + (reset! field-value nil) + (reset! open false))} + [rn/text {:style (style/field-text false theme)} + "Clear"]] + [rn/view {:style {:width 16}}] + [rn/touchable-opacity + {:style (style/select-button theme) + :on-press #(reset! open false)} + [rn/text {:style (style/field-text false theme)} + "Close"]]]]]])) (defn- customizer-select-button - [{:keys [open selected-option]}] + [{:keys [open selected-option]} theme] [rn/pressable - {:style (style/select-container) + {:style (style/select-container theme) :on-press #(reset! open true)} [rn/text - {:style (style/field-select) + {:style (style/field-select theme) :number-of-lines 1} (if selected-option (or (:value selected-option) (humanize (:key selected-option))) @@ -162,7 +164,8 @@ [] (let [open (reagent/atom nil)] (fn [{:keys [label state options] :as args}] - (let [label (or label (key->text-label (:key args))) + (let [theme (quo.theme/use-theme) + label (or label (key->text-label (:key args))) field-value (reagent/cursor state [(:key args)]) selected-option (find-selected-option @field-value options)] [rn/view {:style style/field-row} @@ -172,52 +175,53 @@ {:open open :options options :field-value field-value}] - [customizer-select-button {:open open :selected-option selected-option}]]])))) + [customizer-select-button {:open open :selected-option selected-option} theme]]])))) (defn- customizer-multi-select-modal [{:keys [open-atom options selected-keys-atom]}] - [rn/modal - {:visible @open-atom - :on-request-close #(reset! open-atom false) - :status-bar-translucent true - :transparent true - :animation :slide} - [rn/view {:style (style/modal-overlay)} - [rn/view {:style (style/modal-container)} - [rn/scroll-view {:shows-vertical-scroll-indicator false} - (doall - (for [{k :key v :value} options - :let [v (or v (humanize k))]] - ^{:key k} + (let [theme (quo.theme/use-theme)] + [rn/modal + {:visible @open-atom + :on-request-close #(reset! open-atom false) + :status-bar-translucent true + :transparent true + :animation :slide} + [rn/view {:style (style/modal-overlay theme)} + [rn/view {:style (style/modal-container theme)} + [rn/scroll-view {:shows-vertical-scroll-indicator false} + (doall + (for [{k :key v :value} options + :let [v (or v (humanize k))]] + ^{:key k} - (let [checked? (boolean (some #(= k %) @selected-keys-atom)) - remove-key (fn [v] (filterv #(not= % k) v)) - on-press (fn [] - (swap! selected-keys-atom - (if checked? remove-key conj) - k))] - [rn/pressable - {:style (style/multi-select-option) - :on-press on-press} - [rn/text {:style (style/field-text false)} v] - [quo/selectors - {:type :checkbox - :checked? checked? - :on-change on-press}]])))] - [rn/view {:style (style/footer)} - [rn/pressable - {:style (style/select-button) - :on-press (fn [] - (reset! selected-keys-atom nil) - (reset! open-atom false))} - [rn/text {:style (style/field-text false)} - "Clear"]] - [rn/view {:style {:width 16}}] - [rn/touchable-opacity - {:style (style/select-button) - :on-press #(reset! open-atom false)} - [rn/text {:style (style/field-text false)} - "Close"]]]]]]) + (let [checked? (boolean (some #(= k %) @selected-keys-atom)) + remove-key (fn [v] (filterv #(not= % k) v)) + on-press (fn [] + (swap! selected-keys-atom + (if checked? remove-key conj) + k))] + [rn/pressable + {:style (style/multi-select-option theme) + :on-press on-press} + [rn/text {:style (style/field-text false theme)} v] + [quo/selectors + {:type :checkbox + :checked? checked? + :on-change on-press}]])))] + [rn/view {:style (style/footer theme)} + [rn/pressable + {:style (style/select-button theme) + :on-press (fn [] + (reset! selected-keys-atom nil) + (reset! open-atom false))} + [rn/text {:style (style/field-text false theme)} + "Clear"]] + [rn/view {:style {:width 16}}] + [rn/touchable-opacity + {:style (style/select-button theme) + :on-press #(reset! open-atom false)} + [rn/text {:style (style/field-text false theme)} + "Close"]]]]]])) (defn filter-by-keys [items ks] @@ -226,12 +230,12 @@ items)) (defn- customizer-multi-select-button - [{:keys [open selected-options]}] + [{:keys [open selected-options]} theme] [rn/pressable - {:style (style/select-container) + {:style (style/select-container theme) :on-press #(reset! open true)} [rn/text - {:style (style/field-select) + {:style (style/field-select theme) :number-of-lines 1} (if (seq selected-options) (string/join ", " (map :value selected-options)) @@ -243,7 +247,8 @@ [] (let [open (reagent/atom nil)] (fn [{:keys [label state options] :as args}] - (let [label (or label (key->text-label (:key args))) + (let [theme (quo.theme/use-theme) + label (or label (key->text-label (:key args))) selected-keys (reagent/cursor state [(:key args)]) selected-options (filter-by-keys options @selected-keys)] [rn/view {:style style/field-row} @@ -253,10 +258,10 @@ {:open-atom open :selected-keys-atom selected-keys :options options}] - [customizer-multi-select-button {:open open :selected-options selected-options}]]])))) + [customizer-multi-select-button {:open open :selected-options selected-options} theme]]])))) (defn customizer - [state descriptors] + [state descriptors theme] [rn/view {:style {:flex-shrink 1 :padding-horizontal 20}} @@ -271,8 +276,8 @@ [:<> (case (:type desc) :boolean [customizer-boolean descriptor] - :text [customizer-text descriptor] - :number [customizer-number descriptor] + :text [customizer-text descriptor theme] + :number [customizer-number descriptor theme] :select [customizer-select descriptor] :multi-select [customizer-multi-select descriptor] nil)]))]) @@ -325,20 +330,20 @@ blur-container-style blur-view-props blur-height show-blur-background? full-screen?] :or {blur-height 200}} & children] - (let [theme (quo.theme/use-theme-value) - title (or title @(rf/subscribe [:view-id]))] + (let [theme (quo.theme/use-theme) + title (or title (rf/sub [:view-id]))] (rn/use-effect (fn [] (when blur-dark-only? (if blur? - (quo.theme/set-theme :dark) - (quo.theme/set-theme :light)))) + (rf/dispatch [:theme/switch :dark]) + (rf/dispatch [:theme/switch :light])))) [blur? blur-dark-only?]) [rn/view {:style {:top (safe-area/get-top) :flex 1}} [common/navigation-bar {:title title}] [rn/scroll-view - {:style (style/panel-basic) + {:style (style/panel-basic theme) :shows-vertical-scroll-indicator false :content-container-style (when full-screen? {:flex 1})} [:<> @@ -347,7 +352,7 @@ :on-press rn/dismiss-keyboard!} (when descriptor [rn/view {:style style/customizer-container} - [customizer state descriptor]]) + [customizer state descriptor theme]]) (if blur? [rn/view {:style (merge style/component-container component-container-style)} (into [blur-view diff --git a/src/status_im/contexts/preview/quo/style.cljs b/src/status_im/contexts/preview/quo/style.cljs index 98288818cd..7296228863 100644 --- a/src/status_im/contexts/preview/quo/style.cljs +++ b/src/status_im/contexts/preview/quo/style.cljs @@ -10,20 +10,20 @@ (def text-default typography/paragraph-1) (defn field-active-bg-color - [] - (colors/theme-colors colors/primary-50 colors/primary-60)) + [theme] + (colors/theme-colors colors/primary-50 colors/primary-60 theme)) (defn field-default-color - [] - (colors/theme-colors colors/neutral-100 colors/white)) + [theme] + (colors/theme-colors colors/neutral-100 colors/white theme)) (defn field-default-bg-color - [] - (colors/theme-colors colors/neutral-20 colors/neutral-80)) + [theme] + (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)) (defn field-default-border-color - [] - (colors/theme-colors colors/neutral-30 colors/neutral-70)) + [theme] + (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)) (def field-row {:flex-direction :row @@ -34,78 +34,78 @@ {:flex field-flex-percentage}) (defn field-container - [active?] + [active? theme] (merge text-default {:color (if active? - (colors/theme-colors colors/white colors/white-opa-95) - (colors/theme-colors colors/neutral-100 colors/white)) + (colors/theme-colors colors/white colors/white-opa-95 theme) + (colors/theme-colors colors/neutral-100 colors/white theme)) :border-width 1 - :border-color (field-default-border-color) + :border-color (field-default-border-color theme) :border-radius field-border-radius :padding-vertical 9 :padding-horizontal 12})) (defn field-text - [active?] + [active? theme] (merge text-default {:color (if active? - (colors/theme-colors colors/white colors/white-opa-95) - (field-default-color))})) + (colors/theme-colors colors/white colors/white-opa-95 theme) + (field-default-color theme))})) (def customizer-container {:flex-shrink 1 :padding-top 12}) (defn multi-select-option - [] - (merge (field-container false) + [theme] + (merge (field-container false theme) {:justify-content :space-between :align-items :space-between :flex 1 :flex-direction :row :margin-vertical 4 - :background-color (field-default-bg-color)})) + :background-color (field-default-bg-color theme)})) (defn select-container - [] - (merge (field-container false) + [theme] + (merge (field-container false theme) {:flex-direction :row :align-items :center :border-radius field-border-radius - :background-color (field-default-bg-color) + :background-color (field-default-bg-color theme) :border-width 1 - :border-color (field-default-border-color)})) + :border-color (field-default-border-color theme)})) (defn field-select - [] + [theme] (merge text-default {:flex-grow 1 - :color (field-default-color)})) + :color (field-default-color theme)})) (defn select-option - [selected?] - (merge (field-container selected?) + [selected? theme] + (merge (field-container selected? theme) {:justify-content :center :flex 1 :margin-vertical 4} (if selected? - {:border-color (field-active-bg-color) - :background-color (field-active-bg-color)} - {:background-color (field-default-bg-color)}))) + {:border-color (field-active-bg-color theme) + :background-color (field-active-bg-color theme)} + {:background-color (field-default-bg-color theme)}))) (defn select-button - [] - (merge (select-option false) {:align-items :center})) + [theme] + (merge (select-option false theme) {:align-items :center})) (def label-container {:flex (- 1 field-flex-percentage) :padding-right 8}) (defn label - [] + [theme] (merge text-default typography/font-medium - {:color (field-default-color)})) + {:color (field-default-color theme)})) (defn boolean-container [] @@ -114,20 +114,20 @@ :border-radius field-border-radius}) (defn boolean-button - [{:keys [active? left?]}] + [{:keys [active? left?]} theme] (cond-> {:flex 1 :align-items :center :justify-content :center :padding-vertical 9 :padding-horizontal 12 :border-color (if active? - (field-active-bg-color) - (field-default-border-color)) + (field-active-bg-color theme) + (field-default-border-color theme)) :border-top-width 1 :border-bottom-width 1 :background-color (if active? - (field-active-bg-color) - (field-default-bg-color))} + (field-active-bg-color theme) + (field-default-bg-color theme))} left? (assoc :border-top-left-radius field-border-radius :border-bottom-left-radius field-border-radius @@ -141,33 +141,33 @@ ;;;; Modal (defn modal-overlay - [] + [theme] {:flex 1 :justify-content :center :padding-horizontal 24 - :background-color (colors/theme-colors colors/neutral-80-opa-60 colors/neutral-80-opa-80)}) + :background-color (colors/theme-colors colors/neutral-80-opa-60 colors/neutral-80-opa-80 theme)}) (defn modal-container - [] + [theme] {:padding-horizontal 16 :padding-vertical 8 :border-radius 12 :margin-vertical 100 - :background-color (colors/theme-colors colors/white colors/neutral-95)}) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}) (defn footer - [] + [theme] {:flex-direction :row :padding-top 10 :margin-top 10 :border-top-width 1 - :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}) + :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)}) ;;;; Misc (defn panel-basic - [] - {:background-color (colors/theme-colors colors/white colors/neutral-95) + [theme] + {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) :flex 1}) (def component-container @@ -177,8 +177,8 @@ :padding-horizontal 20}) (defn main - [] + [theme] {:flex 1 :padding-bottom 8 :padding-horizontal 16 - :background-color (colors/theme-colors colors/white colors/neutral-90)}) + :background-color (colors/theme-colors colors/white colors/neutral-90 theme)}) diff --git a/src/status_im/contexts/preview/quo/tags/permission_tag.cljs b/src/status_im/contexts/preview/quo/tags/permission_tag.cljs index 5be5a2c1d8..4cd012d622 100644 --- a/src/status_im/contexts/preview/quo/tags/permission_tag.cljs +++ b/src/status_im/contexts/preview/quo/tags/permission_tag.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.common.resources :as resources] @@ -170,19 +171,21 @@ [] (let [state (reagent/atom {:size 32})] (fn [] - [preview/preview-container - {:state state - :component-container-style {:margin-bottom 40} - :descriptor descriptor} - (when @state - (for [{:keys [tokens]} community-tokens] - ^{:key tokens} - [rn/view - {:margin-top 20 - :align-self :flex-end} - [quo/permission-tag - (merge @state - {:tokens tokens - :background-color (colors/theme-colors - colors/neutral-10 - colors/neutral-80)})]]))]))) + (let [theme (quo.theme/use-theme)] + [preview/preview-container + {:state state + :component-container-style {:margin-bottom 40} + :descriptor descriptor} + (when @state + (for [{:keys [tokens]} community-tokens] + ^{:key tokens} + [rn/view + {:margin-top 20 + :align-self :flex-end} + [quo/permission-tag + (merge @state + {:tokens tokens + :background-color (colors/theme-colors + colors/neutral-10 + colors/neutral-80 + theme)})]]))])))) diff --git a/src/status_im/contexts/preview/status_im/main.cljs b/src/status_im/contexts/preview/status_im/main.cljs index 9a850f046f..866908db8d 100644 --- a/src/status_im/contexts/preview/status_im/main.cljs +++ b/src/status_im/contexts/preview/status_im/main.cljs @@ -2,6 +2,7 @@ (:refer-clojure :exclude [filter]) (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.preview.quo.common :as common] @@ -40,12 +41,13 @@ (defn- main-screen [] - [:<> - [common/navigation-bar {:title "Status IM components"}] - [rn/scroll-view {:style (style/main)} - (for [category (sort screens-categories)] - ^{:key (first category)} - [category-view category])]]) + (let [theme (quo.theme/use-theme)] + [:<> + [common/navigation-bar {:title "Status IM components"}] + [rn/scroll-view {:style (style/main theme)} + (for [category (sort screens-categories)] + ^{:key (first category)} + [category-view category])]])) (def screens (->> screens-categories diff --git a/src/status_im/contexts/preview/status_im/style.cljs b/src/status_im/contexts/preview/status_im/style.cljs index 169701559f..195ca9296f 100644 --- a/src/status_im/contexts/preview/status_im/style.cljs +++ b/src/status_im/contexts/preview/status_im/style.cljs @@ -3,8 +3,8 @@ [quo.foundations.colors :as colors])) (defn main - [] + [theme] {:flex 1 :padding-bottom 8 :padding-horizontal 16 - :background-color (colors/theme-colors colors/white colors/neutral-90)}) + :background-color (colors/theme-colors colors/white colors/neutral-90 theme)}) diff --git a/src/status_im/contexts/profile/contact/header/view.cljs b/src/status_im/contexts/profile/contact/header/view.cljs index a8f89962f9..96f3263416 100644 --- a/src/status_im/contexts/profile/contact/header/view.cljs +++ b/src/status_im/contexts/profile/contact/header/view.cljs @@ -33,7 +33,7 @@ full-name (profile.utils/displayed-name contact) profile-picture (profile.utils/photo contact) online? (rf/sub [:visibility-status-updates/online? public-key]) - theme (quo.theme/use-theme-value) + theme (quo.theme/use-theme) contact-status (rn/use-memo (fn [] (cond (= contact-request-state diff --git a/src/status_im/contexts/profile/contact/view.cljs b/src/status_im/contexts/profile/contact/view.cljs index a3f31478a9..b777a3b658 100644 --- a/src/status_im/contexts/profile/contact/view.cljs +++ b/src/status_im/contexts/profile/contact/view.cljs @@ -26,7 +26,7 @@ (let [{:keys [customization-color]} (rf/sub [:contacts/current-contact]) profile-customization-color (rf/sub [:profile/customization-color]) scroll-y (reanimated/use-shared-value 0) - theme (quo.theme/use-theme-value)] + theme (quo.theme/use-theme)] [:<> [scroll-page/scroll-page {:navigate-back? true diff --git a/src/status_im/contexts/profile/edit/view.cljs b/src/status_im/contexts/profile/edit/view.cljs index 691556fcfd..96dc0b77be 100644 --- a/src/status_im/contexts/profile/edit/view.cljs +++ b/src/status_im/contexts/profile/edit/view.cljs @@ -23,9 +23,10 @@ [_ index] #js {:length 100 :offset (* 100 index) :index index}) -(defn internal-view - [theme] - (let [insets (safe-area/get-insets)] +(defn view + [] + (let [theme (quo.theme/use-theme) + insets (safe-area/get-insets)] [quo/overlay {:type :shell :container-style (style/page-wrapper (:top insets))} @@ -46,5 +47,3 @@ :max-to-render-per-batch 3 :shows-vertical-scroll-indicator false :render-fn item-view}]])) - -(def view (quo.theme/with-theme internal-view)) diff --git a/src/status_im/contexts/profile/settings/effects.cljs b/src/status_im/contexts/profile/settings/effects.cljs index 9f49cb9879..221b7e95af 100644 --- a/src/status_im/contexts/profile/settings/effects.cljs +++ b/src/status_im/contexts/profile/settings/effects.cljs @@ -26,7 +26,8 @@ (theme/device-theme-dark?))) :dark :light)] - (theme/set-theme theme) + (theme/set-legacy-theme theme) + (rf/dispatch [:theme/switch theme]) (rf/dispatch [:reload-status-nav-color view-id]) (when reload-ui? (re-frame/dispatch [:dismiss-all-overlays]) diff --git a/src/status_im/contexts/profile/settings/header/view.cljs b/src/status_im/contexts/profile/settings/header/view.cljs index 699572ef5e..75f11fbca1 100644 --- a/src/status_im/contexts/profile/settings/header/view.cljs +++ b/src/status_im/contexts/profile/settings/header/view.cljs @@ -12,9 +12,10 @@ [status-im.contexts.profile.utils :as profile.utils] [utils.re-frame :as rf])) -(defn- f-view - [{:keys [theme scroll-y]}] - (let [{:keys [public-key emoji-hash bio] :as profile} (rf/sub [:profile/profile-with-image]) +(defn view + [{:keys [scroll-y]}] + (let [theme (quo.theme/use-theme) + {:keys [public-key emoji-hash bio] :as profile} (rf/sub [:profile/profile-with-image]) online? (rf/sub [:visibility-status-updates/online? public-key]) status (rf/sub @@ -25,7 +26,7 @@ profile-picture (profile.utils/photo profile) emoji-string (string/join emoji-hash) {:keys [status-title status-icon]} (header.utils/visibility-status-type-data status) - border-theme (quo.theme/get-theme)] + border-theme theme] [:<> [header.shape/view {:scroll-y scroll-y @@ -60,5 +61,3 @@ :emoji-hash emoji-string :description bio :title full-name}]])) - -(def view (quo.theme/with-theme f-view)) diff --git a/src/status_im/contexts/profile/settings/screens/password/view.cljs b/src/status_im/contexts/profile/settings/screens/password/view.cljs index a029992a8b..dc0df7a4ed 100644 --- a/src/status_im/contexts/profile/settings/screens/password/view.cljs +++ b/src/status_im/contexts/profile/settings/screens/password/view.cljs @@ -56,9 +56,10 @@ :image-props :i/password :action :arrow}) -(defn- view-internal - [{:keys [theme]}] - (let [insets (safe-area/get-insets)] +(defn view + [] + (let [theme (quo.theme/use-theme) + insets (safe-area/get-insets)] [quo/overlay {:type :shell} [rn/view {:key :navigation @@ -82,5 +83,3 @@ (get-change-password-item)] :blur? true :list-type :settings}]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/profile/settings/view.cljs b/src/status_im/contexts/profile/settings/view.cljs index a20957ed39..64fa834386 100644 --- a/src/status_im/contexts/profile/settings/view.cljs +++ b/src/status_im/contexts/profile/settings/view.cljs @@ -37,9 +37,10 @@ [_ index] #js {:length 100 :offset (* 100 index) :index index}) -(defn- settings-view - [theme] - (let [insets (safe-area/get-insets) +(defn view + [] + (let [theme (quo.theme/use-theme) + insets (safe-area/get-insets) customization-color (rf/sub [:profile/customization-color]) scroll-y (reanimated/use-shared-value 0) logout-press #(rf/dispatch [:multiaccounts.logout.ui/logout-pressed]) @@ -84,9 +85,3 @@ :customization-color customization-color :label (i18n/label :t/jump-to)}} (style/floating-shell-button-style insets)]])) - -(defn- internal-view - [props] - [:f> settings-view props]) - -(def view (quo.theme/with-theme internal-view)) diff --git a/src/status_im/contexts/shell/activity_center/tabs/empty_tab/view.cljs b/src/status_im/contexts/shell/activity_center/tabs/empty_tab/view.cljs index a91eeb1a0b..f524b6af7e 100644 --- a/src/status_im/contexts/shell/activity_center/tabs/empty_tab/view.cljs +++ b/src/status_im/contexts/shell/activity_center/tabs/empty_tab/view.cljs @@ -20,9 +20,10 @@ types/membership (i18n/label :t/empty-notifications-membership-tab) types/system (i18n/label :t/empty-notifications-system-tab)}) -(defn empty-tab-internal - [{:keys [theme]}] - (let [filter-type (rf/sub [:activity-center/filter-type]) +(defn empty-tab + [] + (let [theme (quo.theme/use-theme) + filter-type (rf/sub [:activity-center/filter-type]) description (get empty-tab-description filter-type nil)] [rn/view {:style style/empty-container} [quo/empty-state @@ -30,5 +31,3 @@ :image (resources/get-themed-image :no-notifications theme) :title (i18n/label :t/empty-notifications-title-unread) :description description}]])) - -(def empty-tab (quo.theme/with-theme empty-tab-internal)) diff --git a/src/status_im/contexts/shell/jump_to/components/bottom_tabs/view.cljs b/src/status_im/contexts/shell/jump_to/components/bottom_tabs/view.cljs index fb9f2e9b24..687441ba87 100644 --- a/src/status_im/contexts/shell/jump_to/components/bottom_tabs/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/bottom_tabs/view.cljs @@ -59,7 +59,7 @@ shared-values))] (utils/load-stack @state/selected-stack-id) (reanimated/set-shared-value (:pass-through? shared-values) pass-through?) - [quo.theme/provider {:theme :dark} + [quo.theme/provider :dark [reanimated/view {:style (style/bottom-tabs-container pass-through? (:bottom-tabs-height shared-values))} (when pass-through? diff --git a/src/status_im/contexts/shell/jump_to/components/floating_screens/view.cljs b/src/status_im/contexts/shell/jump_to/components/floating_screens/view.cljs index 33ba142ba9..b5a62ef6a0 100644 --- a/src/status_im/contexts/shell/jump_to/components/floating_screens/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/floating_screens/view.cljs @@ -20,7 +20,7 @@ (defn f-screen [{:keys [screen-id id animation clock] :as screen-param}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] ;; First render screen, then animate (smoother animation) (rn/use-effect (fn [] diff --git a/src/status_im/contexts/shell/jump_to/components/home_stack/view.cljs b/src/status_im/contexts/shell/jump_to/components/home_stack/view.cljs index 734a6bc9c5..058e9b6af6 100644 --- a/src/status_im/contexts/shell/jump_to/components/home_stack/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/home_stack/view.cljs @@ -44,7 +44,7 @@ (defn f-home-stack [] (let [shared-values @state/shared-values-atom - theme (quo.theme/use-theme-value) + theme (quo.theme/use-theme) {:keys [width height]} (utils/dimensions) alert-banners-top-margin (rf/sub [:alert-banners/top-margin])] [reanimated/view diff --git a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs index 1054922f55..f27c32b432 100644 --- a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs @@ -2,7 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.blur :as blur] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient] @@ -90,7 +90,7 @@ [] (let [switcher-cards (rf/sub [:shell/sorted-switcher-cards]) top (safe-area/get-top)] - [theme/provider {:theme :dark} + [quo.theme/provider :dark [rn/view {:style {:top 0 :left 0 diff --git a/src/status_im/contexts/wallet/account/tabs/dapps/view.cljs b/src/status_im/contexts/wallet/account/tabs/dapps/view.cljs index 8c798e69b8..60561f958b 100644 --- a/src/status_im/contexts/wallet/account/tabs/dapps/view.cljs +++ b/src/status_im/contexts/wallet/account/tabs/dapps/view.cljs @@ -20,9 +20,10 @@ :add-divider? true :danger? true}]]]) -(defn- view-internal - [{:keys [theme]}] - (let [dapps-list []] +(defn view + [] + (let [theme (quo.theme/use-theme) + dapps-list []] (if (empty? dapps-list) [empty-tab/view {:title (i18n/label :t/no-dapps) @@ -34,5 +35,3 @@ :style (style/dapps-list theme) :render-fn (fn [item] [quo/dapp item]) :separator [rn/view {:style (style/separator theme)}]}]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/add_account/create_account/edit_derivation_path/view.cljs b/src/status_im/contexts/wallet/add_account/create_account/edit_derivation_path/view.cljs index 4973bbe133..9c91714b20 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/edit_derivation_path/view.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/edit_derivation_path/view.cljs @@ -15,7 +15,7 @@ [utils.re-frame :as rf] [utils.security.core :as security])) -(defn- view-internal +(defn view "States: default(filled) | -> (reveal-action) -> show @@ -30,8 +30,9 @@ (reset! path-value "") (when on-reset (on-reset)))] - (fn [{:keys [theme]}] - (let [{:keys [public-key address]} (rf/sub [:profile/profile]) + (fn [] + (let [theme (quo.theme/use-theme) + {:keys [public-key address]} (rf/sub [:profile/profile]) {:keys [password current-derivation-path]} (rf/sub [:get-screen-params]) primary-name (first (rf/sub [:contacts/contact-two-names-by-identity @@ -144,6 +145,3 @@ :on-delete (fn [] (reset! path-value (subs @path-value 0 (dec (count @path-value)))) (on-change-text))}])])))) - -(def view (quo.theme/with-theme view-internal)) - diff --git a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/style.cljs b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/style.cljs index fcae251000..e9db5c6116 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/style.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/style.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.wallet.add-account.create-account.new-keypair.backup-recovery-phrase.style (:require [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] [react-native.platform :as platform])) (defn seed-phrase-container @@ -45,7 +44,7 @@ [theme] {:style {:flex 1} :blur-radius 25 - :blur-type (quo.theme/theme-value :light :dark theme) + :blur-type theme :blur-amount 20}) (def slide-button diff --git a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs index d2f8369f7c..4e43bd5e89 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs @@ -37,8 +37,8 @@ :on-change #(swap! checked? assoc (keyword (str index)) %)}] [quo/text {:style {:margin-left 12}} (i18n/label item)]]) -(defn- f-view - [{:keys [theme]}] +(defn view + [] (let [step-labels [:t/backup-step-1 :t/backup-step-2 :t/backup-step-3 :t/backup-step-4] checked? (reagent/atom @@ -51,71 +51,67 @@ secret-phrase (reagent/atom []) random-phrase (reagent/atom [])] (fn [] - (rn/use-mount - (fn [] - (native-module/get-random-mnemonic #(reset! secret-phrase (string/split % #"\s"))) - (native-module/get-random-mnemonic #(reset! random-phrase (string/split % #"\s"))))) - [rn/view {:style {:flex 1}} - [quo/page-nav - {:icon-name :i/close - :on-press #(rf/dispatch [:navigate-back]) - :accessibility-label :top-bar}] - [quo/page-top - {:title (i18n/label :t/backup-recovery-phrase) - :description :text - :description-text (i18n/label :t/backup-recovery-phrase-description) - :container-style {:padding-bottom 8}}] - [rn/view {:style (style/seed-phrase-container theme)} - (when (pos? (count @secret-phrase)) - [:<> - [words-column - {:words @secret-phrase - :first-half? true}] - [rn/view {:style (style/separator theme)}] - [words-column - {:words @secret-phrase - :first-half? false}]]) - (when-not @revealed? - [rn/view {:style style/blur-container} - [blur/view (style/blur theme)]])] - (when-not @revealed? - [rn/view - {:style {:padding-horizontal 20 - :padding-top 20}} - [quo/text - {:weight :semi-bold - :style {:margin-bottom 8}} - (i18n/label :t/how-to-backup)] - [rn/flat-list - {:data step-labels - :render-fn step-item - :render-data {:checked? checked? - :customization-color customization-color} - :scroll-enabled false}]]) - (if @revealed? - [rn/view {:style style/slide-button} - [quo/bottom-actions - {:actions :one-action - :button-one-label (i18n/label :t/i-have-written) - :button-one-props {:disabled? (some false? (vals @checked?)) - :customization-color customization-color - :on-press #(rf/dispatch [:wallet/store-secret-phrase - {:secret-phrase @secret-phrase - :random-phrase @random-phrase}])}}] - [quo/text - {:size :paragraph-2 - :style (style/description-text theme)} - (i18n/label :t/next-you-will)]] - [quo/bottom-actions - {:actions :one-action - :button-one-label (i18n/label :t/reveal-phrase) - :button-one-props {:disabled? (some false? (vals @checked?)) - :customization-color customization-color - :on-press #(reset! revealed? true)} - :container-style style/slide-button}])]))) + (let [theme (quo.theme/use-theme)] -(defn view-internal - [params] - [:f> f-view params]) - -(def view (quo.theme/with-theme view-internal)) + (rn/use-mount + (fn [] + (native-module/get-random-mnemonic #(reset! secret-phrase (string/split % #"\s"))) + (native-module/get-random-mnemonic #(reset! random-phrase (string/split % #"\s"))))) + [rn/view {:style {:flex 1}} + [quo/page-nav + {:icon-name :i/close + :on-press #(rf/dispatch [:navigate-back]) + :accessibility-label :top-bar}] + [quo/page-top + {:title (i18n/label :t/backup-recovery-phrase) + :description :text + :description-text (i18n/label :t/backup-recovery-phrase-description) + :container-style {:padding-bottom 8}}] + [rn/view {:style (style/seed-phrase-container theme)} + (when (pos? (count @secret-phrase)) + [:<> + [words-column + {:words @secret-phrase + :first-half? true}] + [rn/view {:style (style/separator theme)}] + [words-column + {:words @secret-phrase + :first-half? false}]]) + (when-not @revealed? + [rn/view {:style style/blur-container} + [blur/view (style/blur theme)]])] + (when-not @revealed? + [rn/view + {:style {:padding-horizontal 20 + :padding-top 20}} + [quo/text + {:weight :semi-bold + :style {:margin-bottom 8}} + (i18n/label :t/how-to-backup)] + [rn/flat-list + {:data step-labels + :render-fn step-item + :render-data {:checked? checked? + :customization-color customization-color} + :scroll-enabled false}]]) + (if @revealed? + [rn/view {:style style/slide-button} + [quo/bottom-actions + {:actions :one-action + :button-one-label (i18n/label :t/i-have-written) + :button-one-props {:disabled? (some false? (vals @checked?)) + :customization-color customization-color + :on-press #(rf/dispatch [:wallet/store-secret-phrase + {:secret-phrase @secret-phrase + :random-phrase @random-phrase}])}}] + [quo/text + {:size :paragraph-2 + :style (style/description-text theme)} + (i18n/label :t/next-you-will)]] + [quo/bottom-actions + {:actions :one-action + :button-one-label (i18n/label :t/reveal-phrase) + :button-one-props {:disabled? (some false? (vals @checked?)) + :customization-color customization-color + :on-press #(reset! revealed? true)} + :container-style style/slide-button}])])))) diff --git a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/check_your_backup/view.cljs b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/check_your_backup/view.cljs index 9d443f24fa..acf6eb08a5 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/check_your_backup/view.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/check_your_backup/view.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.wallet.add-account.create-account.new-keypair.check-your-backup.view (:require [quo.core :as quo] - [quo.theme :as quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.wallet.add-account.create-account.new-keypair.check-your-backup.style :as style] @@ -59,7 +58,7 @@ :margin-right 12)] [button (assoc params :word (second options))]]) -(defn- view-internal +(defn view [] (let [random-indices (random-selection) quiz-index (reagent/atom 0) @@ -128,5 +127,3 @@ [buttons-row {:on-press on-button-press :options options-row-1}]]])))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/add_account/create_account/view.cljs b/src/status_im/contexts/wallet/add_account/create_account/view.cljs index 1c6102d8d1..dbb09737c0 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/view.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/view.cljs @@ -57,7 +57,7 @@ :description :text :description-props {:text formatted-path}}])) -(defn- view-internal +(defn view [_] (let [top (safe-area/get-top) bottom (safe-area/get-bottom) @@ -68,8 +68,9 @@ on-change-text #(reset! account-name %) show-account-origin #(rf/dispatch [:show-bottom-sheet {:content account-origin/view}])] - (fn [{:keys [theme]}] - (let [number-of-accounts (count (rf/sub + (fn [] + (let [theme (quo.theme/use-theme) + number-of-accounts (count (rf/sub [:wallet/accounts-without-watched-accounts])) {:keys [address customization-color]} (rf/sub [:profile/profile]) {:keys [new-keypair]} (rf/sub [:wallet/create-account]) @@ -178,5 +179,3 @@ :new-keypair? (boolean new-keypair) :derivation-path derivation-path :customization-color customization-color})}]])))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/bridge/bridge_to/view.cljs b/src/status_im/contexts/wallet/bridge/bridge_to/view.cljs index d917b55c77..0cf26d28b1 100644 --- a/src/status_im/contexts/wallet/bridge/bridge_to/view.cljs +++ b/src/status_im/contexts/wallet/bridge/bridge_to/view.cljs @@ -33,7 +33,7 @@ {:network-chain-id chain-id :stack-id :screen/wallet.bridge-to}])}]))) -(defn- view-internal +(defn view [] (let [send-bridge-data (rf/sub [:wallet/wallet-send]) network-details (rf/sub [:wallet/network-details]) @@ -62,5 +62,3 @@ :render-fn (fn [network] [bridge-token-component network account-token]) :content-container-style style/content-container}]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/bridge/input_amount/view.cljs b/src/status_im/contexts/wallet/bridge/input_amount/view.cljs index 05984cce5d..437c1a1630 100644 --- a/src/status_im/contexts/wallet/bridge/input_amount/view.cljs +++ b/src/status_im/contexts/wallet/bridge/input_amount/view.cljs @@ -1,13 +1,12 @@ (ns status-im.contexts.wallet.bridge.input-amount.view (:require - [quo.theme] [react-native.core :as rn] [status-im.contexts.wallet.bridge.input-amount.style :as style] [status-im.contexts.wallet.send.input-amount.view :as input-amount] [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn- view-internal +(defn view [] [rn/view {:style style/bridge-send-wrapper} [input-amount/view @@ -17,5 +16,3 @@ :on-navigate-back (fn [] (rf/dispatch [:wallet/clean-disabled-from-networks]) (rf/dispatch [:navigate-back]))}]]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/collectible/tabs/about/view.cljs b/src/status_im/contexts/wallet/collectible/tabs/about/view.cljs index 41f60f36ca..12a214c46d 100644 --- a/src/status_im/contexts/wallet/collectible/tabs/about/view.cljs +++ b/src/status_im/contexts/wallet/collectible/tabs/about/view.cljs @@ -1,6 +1,5 @@ (ns status-im.contexts.wallet.collectible.tabs.about.view (:require [quo.core :as quo] - [quo.theme] [react-native.core :as rn] [status-im.contexts.wallet.collectible.tabs.about.style :as style] [utils.i18n :as i18n] @@ -8,7 +7,7 @@ (def ^:private link-card-space 28) -(defn- view-internal +(defn view [] (let [window-width (rf/sub [:dimensions/window-width]) item-width (- (/ window-width 2) link-card-space) @@ -33,5 +32,3 @@ (for [item (:cards collectible-about)] ^{:key (:title item)} [quo/link-card (assoc item :container-style link-card-container-style)])])])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/collectible/tabs/overview/view.cljs b/src/status_im/contexts/wallet/collectible/tabs/overview/view.cljs index c34e433c9e..635b7d64c4 100644 --- a/src/status_im/contexts/wallet/collectible/tabs/overview/view.cljs +++ b/src/status_im/contexts/wallet/collectible/tabs/overview/view.cljs @@ -63,10 +63,8 @@ :network-image (quo.resources/get-network network-name) :subtitle subtitle}]]])) -(defn- view-internal +(defn view [] [:<> [info] [traits-section]]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/collectible/tabs/view.cljs b/src/status_im/contexts/wallet/collectible/tabs/view.cljs index e0939d9599..d695985a27 100644 --- a/src/status_im/contexts/wallet/collectible/tabs/view.cljs +++ b/src/status_im/contexts/wallet/collectible/tabs/view.cljs @@ -4,12 +4,10 @@ [status-im.contexts.wallet.collectible.tabs.activity.view :as activity] [status-im.contexts.wallet.collectible.tabs.overview.view :as overview])) -(defn- view-internal +(defn view [{:keys [selected-tab]}] (case selected-tab :overview [overview/view] :about [about/view] :activity [activity/view] nil)) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs index 68eabc6ad3..e478e7bbbf 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -29,22 +29,23 @@ (defn cta-buttons [] - [rn/view {:style style/buttons-container} - [quo/button - {:container-style style/send-button - :type :outline - :size 40 - :icon-left :i/send} - (i18n/label :t/send)] - [quo/button - {:container-style style/opensea-button - :type :outline - :size 40 - :icon-left :i/opensea - :icon-left-color (colors/theme-colors colors/neutral-100 colors/neutral-40) - :icon-right :i/external - :icon-right-color (colors/theme-colors colors/neutral-50 colors/neutral-40)} - (i18n/label :t/opensea)]]) + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/buttons-container} + [quo/button + {:container-style style/send-button + :type :outline + :size 40 + :icon-left :i/send} + (i18n/label :t/send)] + [quo/button + {:container-style style/opensea-button + :type :outline + :size 40 + :icon-left :i/opensea + :icon-left-color (colors/theme-colors colors/neutral-100 colors/neutral-40 theme) + :icon-right :i/external + :icon-right-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)} + (i18n/label :t/opensea)]])) (def tabs-data [{:id :overview @@ -54,12 +55,13 @@ :label (i18n/label :t/about) :accessibility-label :about-tab}]) -(defn f-view-internal - [{:keys [theme] :as _props}] +(defn view + [_] (let [selected-tab (reagent/atom :overview) on-tab-change #(reset! selected-tab %)] (fn [] - (let [collectible (rf/sub [:wallet/last-collectible-details]) + (let [theme (quo.theme/use-theme) + collectible (rf/sub [:wallet/last-collectible-details]) animation-shared-element-id (rf/sub [:animation-shared-element-id]) wallet-address (rf/sub [:wallet/current-viewing-account-address]) {:keys [id @@ -130,9 +132,3 @@ :on-change on-tab-change :data tabs-data}] [tabs/view {:selected-tab @selected-tab}]]])))) - -(defn- view-internal - [props] - [:f> f-view-internal props]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/common/activity_tab/view.cljs b/src/status_im/contexts/wallet/common/activity_tab/view.cljs index 75b8632ce1..00c7b38e70 100644 --- a/src/status_im/contexts/wallet/common/activity_tab/view.cljs +++ b/src/status_im/contexts/wallet/common/activity_tab/view.cljs @@ -15,9 +15,10 @@ (merge {:on-press #(js/alert "Item pressed")} item)]]) -(defn- view-internal - [{:keys [theme]}] - (let [activity-list []] +(defn view + [] + (let [theme (quo.theme/use-theme) + activity-list []] (if (empty? activity-list) [empty-tab/view {:title (i18n/label :t/no-activity) @@ -27,5 +28,3 @@ {:data activity-list :style {:flex 1} :render-fn activity-item}]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs b/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs index a311aeff43..e1bbb3b22e 100644 --- a/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs +++ b/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs @@ -27,7 +27,7 @@ :on-long-press #(when on-long-press (on-long-press collectible))}])) -(defn- view-internal +(defn view [{:keys [theme collectibles filtered? on-collectible-press on-end-reached current-account-address on-collectible-long-press]}] (let [no-results-match-query? (and filtered? (empty? collectibles))] @@ -60,5 +60,3 @@ on-collectible-long-press)) :on-end-reached on-end-reached :on-end-reached-threshold 4}]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/send/input_amount/view.cljs b/src/status_im/contexts/wallet/send/input_amount/view.cljs index 95df3a0db8..7861c2b735 100644 --- a/src/status_im/contexts/wallet/send/input_amount/view.cljs +++ b/src/status_im/contexts/wallet/send/input_amount/view.cljs @@ -2,7 +2,6 @@ (:require [clojure.string :as string] [quo.core :as quo] - [quo.theme :as quo.theme] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -136,7 +135,7 @@ (rf/dispatch [:wallet/edit-token-to-send token]) (clear-input!))}]])) -(defn- f-view-internal +(defn view ;; crypto-decimals, limit-crypto and initial-crypto-currency? args are needed ;; for component tests only [{default-on-confirm :on-confirm @@ -373,9 +372,3 @@ :on-press #(handle-keyboard-press % loading-routes? (current-limit)) :on-delete #(handle-delete loading-routes? (current-limit)) :on-long-press-delete #(on-long-press-delete loading-routes?)}]])))) - -(defn- view-internal - [props] - [:f> f-view-internal props]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/send/routes/view.cljs b/src/status_im/contexts/wallet/send/routes/view.cljs index 81f460fa46..e0268ee22f 100644 --- a/src/status_im/contexts/wallet/send/routes/view.cljs +++ b/src/status_im/contexts/wallet/send/routes/view.cljs @@ -200,10 +200,11 @@ :on-press-from-network on-press-from-network :on-press-to-network on-press-to-network}])) -(defn- view-internal - [{:keys [from-values-by-chain to-values-by-chain routes token theme fetch-routes +(defn view + [{:keys [from-values-by-chain to-values-by-chain routes token fetch-routes affordable-networks disabled-from-networks on-press-from-network on-press-to-network]}] - (let [token-symbol (:symbol token) + (let [theme (quo.theme/use-theme) + token-symbol (:symbol token) loading-suggested-routes? (rf/sub [:wallet/wallet-send-loading-suggested-routes?]) network-links (if loading-suggested-routes? affordable-networks routes)] (if (or (and (not-empty affordable-networks) loading-suggested-routes?) (not-empty routes)) @@ -241,5 +242,3 @@ [rn/view {:style style/empty-container} (when (and (not (nil? routes)) (not loading-suggested-routes?)) [quo/text (i18n/label :t/no-routes-found)])]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/send/select_address/tabs/view.cljs b/src/status_im/contexts/wallet/send/select_address/tabs/view.cljs index fcca70f35e..bf54d0567e 100644 --- a/src/status_im/contexts/wallet/send/select_address/tabs/view.cljs +++ b/src/status_im/contexts/wallet/send/select_address/tabs/view.cljs @@ -27,24 +27,23 @@ :stack-id :screen/wallet.select-address}])}])) other-accounts)))) -(defn view-internal - [{:keys [selected-tab theme]}] - (case selected-tab - :tab/recent [quo/empty-state - {:title (i18n/label :t/no-recent-transactions) - :description (i18n/label :t/make-one-it-is-easy-we-promise) - :image (resources/get-themed-image :angry-man theme) - :container-style style/empty-container-style}] - :tab/saved [quo/empty-state - {:title (i18n/label :t/no-saved-addresses) - :description (i18n/label :t/you-like-to-type-43-characters) - :image (resources/get-themed-image :sweating-man theme) - :container-style style/empty-container-style}] - :tab/contacts [quo/empty-state - {:title (i18n/label :t/no-contacts) - :description (i18n/label :t/no-contacts-description) - :image (resources/get-themed-image :no-contacts theme) - :container-style style/empty-container-style}] - :tab/my-accounts [my-accounts theme])) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [selected-tab]}] + (let [theme (quo.theme/use-theme)] + (case selected-tab + :tab/recent [quo/empty-state + {:title (i18n/label :t/no-recent-transactions) + :description (i18n/label :t/make-one-it-is-easy-we-promise) + :image (resources/get-themed-image :angry-man theme) + :container-style style/empty-container-style}] + :tab/saved [quo/empty-state + {:title (i18n/label :t/no-saved-addresses) + :description (i18n/label :t/you-like-to-type-43-characters) + :image (resources/get-themed-image :sweating-man theme) + :container-style style/empty-container-style}] + :tab/contacts [quo/empty-state + {:title (i18n/label :t/no-contacts) + :description (i18n/label :t/no-contacts-description) + :image (resources/get-themed-image :no-contacts theme) + :container-style style/empty-container-style}] + :tab/my-accounts [my-accounts theme]))) diff --git a/src/status_im/contexts/wallet/send/select_asset/view.cljs b/src/status_im/contexts/wallet/send/select_asset/view.cljs index 27c2e4675f..1911173945 100644 --- a/src/status_im/contexts/wallet/send/select_asset/view.cljs +++ b/src/status_im/contexts/wallet/send/select_asset/view.cljs @@ -2,7 +2,6 @@ (:require [clojure.string :as string] [quo.core :as quo] - [quo.theme :as quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.wallet.collectible.utils :as utils] @@ -64,7 +63,7 @@ :on-token-press on-token-press}] :tab/collectibles [collectibles-grid search-text])])) -(defn- f-view-internal +(defn view [] (let [selected-tab (reagent/atom (:id (first tabs-data))) search-text (reagent/atom "") @@ -93,9 +92,3 @@ :data tabs-data :on-change on-change-tab}] [tab-view @search-text @selected-tab on-change-text]]))) - -(defn- view-internal - [] - [:f> f-view-internal]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/send/send_amount/view.cljs b/src/status_im/contexts/wallet/send/send_amount/view.cljs index 8f7ec9041e..85aa8d1cf3 100644 --- a/src/status_im/contexts/wallet/send/send_amount/view.cljs +++ b/src/status_im/contexts/wallet/send/send_amount/view.cljs @@ -5,7 +5,7 @@ [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn- view-internal +(defn view [] [input-amount/view {:current-screen-id :screen/wallet.send-input-amount @@ -13,5 +13,3 @@ :on-navigate-back (fn [] (rf/dispatch [:wallet/clean-disabled-from-networks]) (rf/dispatch [:navigate-back]))}]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs b/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs index c136fb0498..d4b16bd57e 100644 --- a/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs +++ b/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs @@ -207,13 +207,14 @@ [quo/text {:style {:align-self :center}} (i18n/label :t/no-routes-found-confirmation)])]])) -(defn- view-internal +(defn view [_] (let [on-close (fn [] (rf/dispatch [:wallet/clean-suggested-routes]) (rf/dispatch [:navigate-back]))] - (fn [{:keys [theme]}] - (let [send-transaction-data (rf/sub [:wallet/wallet-send]) + (fn [] + (let [theme (quo.theme/use-theme) + send-transaction-data (rf/sub [:wallet/wallet-send]) {:keys [token-display-name collectible amount route to-address bridge-to-chain-id from-values-by-chain @@ -303,5 +304,3 @@ :theme theme :route route :transaction-type transaction-type}]]]])))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/sheets/account_options/view.cljs b/src/status_im/contexts/wallet/sheets/account_options/view.cljs index 5e6fc4ece5..4ad6072927 100644 --- a/src/status_im/contexts/wallet/sheets/account_options/view.cljs +++ b/src/status_im/contexts/wallet/sheets/account_options/view.cljs @@ -47,10 +47,8 @@ {:style (style/blur-container @options-height) :blur-radius (if platform/android? 20 10) :blur-amount (if platform/ios? 20 10) - :blur-type (quo.theme/theme-value (if platform/ios? :light :xlight) :dark theme) - :overlay-color (quo.theme/theme-value colors/white-70-blur - colors/neutral-95-opa-70-blur - theme)}]) + :blur-type (if (= theme :light) (if platform/ios? :light :xlight) :dark) + :overlay-color (if (= theme :light) colors/white-70-blur colors/neutral-95-opa-70-blur)}]) [quo/gradient-cover {:customization-color color :opacity 0.4}] @@ -107,11 +105,12 @@ {:section (i18n/label :t/select-another-account) :container-style style/drawer-section-label}]])])) -(defn- view-internal +(defn view [] (let [options-height (reagent/atom 0)] - (fn [{:keys [theme]}] - (let [accounts (rf/sub [:wallet/accounts-without-current-viewing-account]) + (fn [] + (let [theme (quo.theme/use-theme) + accounts (rf/sub [:wallet/accounts-without-current-viewing-account]) show-account-selector? (pos? (count accounts))] [:<> (when show-account-selector? @@ -124,5 +123,3 @@ {:show-account-selector? show-account-selector? :theme theme :options-height options-height}]])))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/sheets/account_origin/view.cljs b/src/status_im/contexts/wallet/sheets/account_origin/view.cljs index bd47b9cfb5..b0626de2ae 100644 --- a/src/status_im/contexts/wallet/sheets/account_origin/view.cljs +++ b/src/status_im/contexts/wallet/sheets/account_origin/view.cljs @@ -27,7 +27,7 @@ [header title] [description desc]]) -(defn- view-internal +(defn view [] [rn/view [quo/drawer-top {:title (i18n/label :t/account-origin-header)}] @@ -43,5 +43,3 @@ :container-style style/action-container :on-press #(rn/open-url const/create-account-link)} (i18n/label :t/read-more)]]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs index f04e051f9e..37ec3ba0cf 100644 --- a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs +++ b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs @@ -10,7 +10,7 @@ [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn- view-internal +(defn view [{:keys [selected-networks account watch-only?]}] (let [state (reagent/atom :default) {:keys [color address @@ -34,8 +34,9 @@ (if (= @state :default) initial-network-preferences-names @network-preferences-names-state))] - (fn [{:keys [on-save blur? theme button-label]}] - (let [network-details (rf/sub [:wallet/network-details]) + (fn [{:keys [on-save blur? button-label]}] + (let [theme (quo.theme/use-theme) + network-details (rf/sub [:wallet/network-details]) mainnet (first network-details) layer-2-networks (rest network-details) current-networks (filter (fn [network] @@ -105,5 +106,3 @@ (let [chain-ids (map :chain-id current-networks)] (on-save chain-ids))) :customization-color color}}]])))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/sheets/remove_account/view.cljs b/src/status_im/contexts/wallet/sheets/remove_account/view.cljs index 169f48074d..3c91f5cb55 100644 --- a/src/status_im/contexts/wallet/sheets/remove_account/view.cljs +++ b/src/status_im/contexts/wallet/sheets/remove_account/view.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.wallet.sheets.remove-account.view (:require [quo.core :as quo] - [quo.theme] [react-native.clipboard :as clipboard] [react-native.core :as rn] [reagent.core :as reagent] @@ -90,12 +89,10 @@ :address address :toast-message (i18n/label :t/watched-account-removed)}]]) -(defn- view-internal +(defn view [] (let [{:keys [type] :as account} (rf/sub [:wallet/current-viewing-account])] (case type :generated [recovery-phase-flow account] :watch [watched-address-flow account] nil))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/sheets/select_account/view.cljs b/src/status_im/contexts/wallet/sheets/select_account/view.cljs index 230195d78f..5a3df1d0f0 100644 --- a/src/status_im/contexts/wallet/sheets/select_account/view.cljs +++ b/src/status_im/contexts/wallet/sheets/select_account/view.cljs @@ -17,7 +17,7 @@ (rf/dispatch [:wallet/switch-current-viewing-account address]) (rf/dispatch [:hide-bottom-sheet]))}]) -(defn- view-internal +(defn view [] (let [selected-account-address (rf/sub [:wallet/current-viewing-account-address]) accounts (rf/sub [:wallet/accounts-without-watched-accounts])] @@ -29,5 +29,3 @@ :render-data {:selected-account-address selected-account-address} :content-container-style style/list-container :shows-vertical-scroll-indicator false}]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/db.cljs b/src/status_im/db.cljs index 98628fddb6..772ca493e1 100644 --- a/src/status_im/db.cljs +++ b/src/status_im/db.cljs @@ -45,4 +45,5 @@ :confirmation [] :current [] :puk [] - :enter-step :original}}}) + :enter-step :original}} + :theme :light}) diff --git a/src/status_im/navigation/effects.cljs b/src/status_im/navigation/effects.cljs index 369c6a4394..740133018d 100644 --- a/src/status_im/navigation/effects.cljs +++ b/src/status_im/navigation/effects.cljs @@ -16,9 +16,9 @@ [utils.re-frame :as rf])) (defn get-status-nav-color - [view-id] + [view-id theme] (let [theme (or (get-in views/screens [view-id :options :theme]) - (quo.theme/get-theme)) + theme) [rnn-status-bar rn-status-bar] (if (or (= theme :dark) @state/alert-banner-shown? @@ -40,9 +40,9 @@ [rnn-status-bar rn-status-bar nav-bar-color comp-id])) (defn reload-status-nav-color-fx - [view-id] + [[view-id theme]] (when (and (= @state/root-id :shell-stack) view-id) - (let [[rnn-status-bar rn-status-bar nav-bar-color comp-id] (get-status-nav-color view-id)] + (let [[rnn-status-bar rn-status-bar nav-bar-color comp-id] (get-status-nav-color view-id theme)] (if platform/ios? (rn/set-status-bar-style rn-status-bar true) (navigation/merge-options @@ -53,8 +53,8 @@ (rf/reg-fx :reload-status-nav-color-fx reload-status-nav-color-fx) (rf/reg-fx :set-view-id-fx - (fn [view-id] - (reload-status-nav-color-fx view-id) + (fn [[view-id theme]] + (reload-status-nav-color-fx [view-id theme]) (rf/dispatch [:screens/on-will-focus view-id]) (when-let [{:keys [on-focus]} (get views/screens view-id)] (when on-focus @@ -213,8 +213,8 @@ opts)}}))) (rf/reg-fx :show-toasts - (fn [view-id] - (let [[rnn-status-bar nav-bar-color] (get-status-nav-color view-id)] + (fn [[view-id theme]] + (let [[rnn-status-bar nav-bar-color] (get-status-nav-color view-id theme)] (show-overlay "toasts" (assoc (options/statusbar-and-navbar-options nil rnn-status-bar nav-bar-color) :overlay @@ -233,16 +233,16 @@ ;;;; Alert Banner (rf/reg-fx :show-alert-banner - (fn [view-id] + (fn [[view-id theme]] (show-overlay "alert-banner" {:overlay {:interceptTouchOutside false}}) (reset! state/alert-banner-shown? true) - (reload-status-nav-color-fx view-id))) + (reload-status-nav-color-fx [view-id theme]))) (rf/reg-fx :hide-alert-banner - (fn [view-id] + (fn [[view-id theme]] (navigation/dissmiss-overlay "alert-banner") (reset! state/alert-banner-shown? false) - (reload-status-nav-color-fx view-id))) + (reload-status-nav-color-fx [view-id theme]))) ;;;; Merge options diff --git a/src/status_im/navigation/events.cljs b/src/status_im/navigation/events.cljs index ad5b6d4e66..3313462acb 100644 --- a/src/status_im/navigation/events.cljs +++ b/src/status_im/navigation/events.cljs @@ -104,7 +104,7 @@ (merge {:db (assoc db :bottom-sheet {:sheets rest-sheets :hide? false}) :hide-bottom-sheet nil - :reload-status-nav-color-fx (:view-id db)} + :reload-status-nav-color-fx [(:view-id db) (:theme db)]} (when (seq rest-sheets) {:dispatch [:show-next-bottom-sheet]})))) @@ -138,12 +138,12 @@ [{:keys [db]} view-id] (let [view-id (if (= view-id :shell-stack) (shell.utils/calculate-view-id) view-id)] {:db (assoc db :view-id view-id) - :set-view-id-fx view-id})) + :set-view-id-fx [view-id (:theme db)]})) (rf/defn reload-status-nav-color {:events [:reload-status-nav-color]} [{:keys [db]} view-id] - {:reload-status-nav-color-fx (or view-id (:view-id db))}) + {:reload-status-nav-color-fx [(or view-id (:view-id db)) (:theme db)]}) (defn open-share [_ [config]] diff --git a/src/status_im/navigation/options.cljs b/src/status_im/navigation/options.cljs index e228c401b8..f79645ded6 100644 --- a/src/status_im/navigation/options.cljs +++ b/src/status_im/navigation/options.cljs @@ -1,7 +1,6 @@ (ns status-im.navigation.options (:require [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] [react-native.platform :as platform] [status-im.navigation.transitions :as transitions])) @@ -13,7 +12,7 @@ (defn statusbar-and-navbar-options [theme status-bar-theme nav-bar-color] (let [[status-bar-theme nav-bar-color] - (if (= :dark (or theme (quo.theme/get-theme))) + (if (= :dark theme) [(or status-bar-theme :light) (or nav-bar-color colors/neutral-100)] [(or status-bar-theme :dark) (or nav-bar-color colors/white)])] (if platform/android? @@ -26,14 +25,16 @@ (defn root-options [{:keys [background-color theme status-bar-theme nav-bar-color]}] - (merge (statusbar-and-navbar-options theme status-bar-theme nav-bar-color) - {:topBar {:visible false} - :layout {:componentBackgroundColor (or background-color - (colors/theme-colors colors/white colors/neutral-100)) - :orientation ["portrait"] - :backgroundColor (or background-color - (colors/theme-colors colors/white - colors/neutral-100))}})) + (merge + (statusbar-and-navbar-options theme status-bar-theme nav-bar-color) + {:topBar {:visible false} + :layout {:componentBackgroundColor (or background-color + (colors/theme-colors colors/white colors/neutral-100 theme)) + :orientation ["portrait"] + :backgroundColor (or background-color + (colors/theme-colors colors/white + colors/neutral-100 + theme))}})) (defn dark-root-options [] diff --git a/src/status_im/navigation/view.cljs b/src/status_im/navigation/view.cljs index e7443225a3..602e3c3521 100644 --- a/src/status_im/navigation/view.cljs +++ b/src/status_im/navigation/view.cljs @@ -3,7 +3,7 @@ [legacy.status-im.bottom-sheet.sheets :as bottom-sheets-old] [legacy.status-im.ui.screens.popover.views :as popover] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -30,23 +30,24 @@ (defn inactive [] - (when (rf/sub [:hide-screen?]) - [rn/view - {:position :absolute - :flex 1 - :top 0 - :bottom 0 - :left 0 - :right 0 - :background-color (colors/theme-colors colors/white colors/neutral-100) - :z-index 999999999999999999}])) + (let [theme (rf/sub [:theme])] + (when (rf/sub [:hide-screen?]) + [rn/view + {:position :absolute + :flex 1 + :top 0 + :bottom 0 + :left 0 + :right 0 + :background-color (colors/theme-colors colors/white colors/neutral-100 theme) + :z-index 999999999999999999}]))) (defn wrapped-screen-style - [{:keys [top? bottom? background-color alert-banners-top-margin]}] + [{:keys [top? bottom? background-color alert-banners-top-margin theme]}] (merge {:flex 1 :margin-top alert-banners-top-margin - :background-color (or background-color (colors/theme-colors colors/white colors/neutral-100))} + :background-color (or background-color (colors/theme-colors colors/white colors/neutral-100 theme))} (when bottom? {:padding-bottom (safe-area/get-bottom)}) (when top? @@ -67,15 +68,17 @@ {:keys [component options]} (or qualified-screen-details screen-details) {:keys [insets sheet? theme skip-background?]} options - user-theme (theme/get-theme) alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) background-color (or (get-in options [:layout :backgroundColor]) - (when sheet? :transparent))] + (when sheet? :transparent)) + app-theme (rf/sub [:theme]) + theme (or theme app-theme)] ^{:key (str "root" screen-key @reloader/cnt)} - [theme/provider {:theme (or theme user-theme)} + [quo.theme/provider theme [rn/view {:style (wrapped-screen-style (assoc insets + :theme theme :background-color background-color :alert-banners-top-margin alert-banners-top-margin))} [inactive] @@ -91,14 +94,14 @@ (def bottom-sheet (reagent/reactify-component (fn [] - (let [{:keys [sheets hide?]} (rf/sub [:bottom-sheet]) + (let [app-theme (rf/sub [:theme]) + {:keys [sheets hide?]} (rf/sub [:bottom-sheet]) sheet (last sheets) {:keys [theme]} sheet insets (safe-area/get-insets) - user-theme (theme/get-theme) keyboard-vertical-offset (- (max 20 (:bottom insets)))] ^{:key (str "sheet" @reloader/cnt)} - [theme/provider {:theme (or theme user-theme)} + [quo.theme/provider (or theme app-theme) [inactive] [rn/keyboard-avoiding-view {:style {:position :relative :flex 1} @@ -115,7 +118,7 @@ (reagent/reactify-component (fn [] ^{:key (str "alert-banner" @reloader/cnt)} - [theme/provider {:theme :dark} + [quo.theme/provider :dark [alert-banner/view]]) functional-compiler)) diff --git a/src/status_im/subs/contact.cljs b/src/status_im/subs/contact.cljs index 624302871f..4b1a7ee2a2 100644 --- a/src/status_im/subs/contact.cljs +++ b/src/status_im/subs/contact.cljs @@ -3,7 +3,7 @@ [clojure.string :as string] [legacy.status-im.contact.db :as contact.db] [legacy.status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils] - [quo.theme :as theme] + [quo.theme] [re-frame.core :as re-frame] [status-im.common.pixel-ratio :as pixel-ratio] [status-im.constants :as constants] @@ -33,9 +33,8 @@ (get multiaccount :profile-pictures-visibility))) (defn- replace-contact-image-uri - [contact port public-key font-file] - (let [theme (theme/get-theme) - {:keys [images ens-name customization-color]} contact + [contact port public-key font-file theme] + (let [{:keys [images ens-name customization-color]} contact images (reduce (fn [acc image] (let [image-name (:type image) @@ -75,9 +74,9 @@ (assoc contact :images images))) (defn- reduce-contacts-image-uri - [contacts port font-file] + [contacts port font-file theme] (reduce-kv (fn [acc public-key contact] - (let [contact (replace-contact-image-uri contact port public-key font-file)] + (let [contact (replace-contact-image-uri contact port public-key font-file theme)] (assoc acc public-key contact))) {} contacts)) @@ -89,9 +88,10 @@ :<- [:multiaccount/public-key] :<- [:mediaserver/port] :<- [:initials-avatar-font-file] - (fn [[contacts profile-pictures-visibility public-key port font-file]] + :<- [:theme] + (fn [[contacts profile-pictures-visibility public-key port font-file theme]] (let [contacts (contact.db/enrich-contacts contacts profile-pictures-visibility public-key)] - (reduce-contacts-image-uri contacts port font-file)))) + (reduce-contacts-image-uri contacts port font-file theme)))) (re-frame/reg-sub :contacts/active @@ -180,10 +180,10 @@ (count blocked-contacts))) (defn- enrich-contact - [_ contact-identity ens-name port font-file] + [_ contact-identity ens-name port font-file theme] (let [contact (contact.db/enrich-contact (contact.db/public-key-and-ens-name->new-contact contact-identity ens-name))] - (replace-contact-image-uri contact port contact-identity font-file))) + (replace-contact-image-uri contact port contact-identity font-file theme))) (re-frame/reg-sub :contacts/current-contact @@ -192,11 +192,12 @@ :<- [:contacts/current-contact-ens-name] :<- [:mediaserver/port] :<- [:initials-avatar-font-file] - (fn [[contacts contact-identity ens-name port font-file]] + :<- [:theme] + (fn [[contacts contact-identity ens-name port font-file theme]] (let [contact (get contacts contact-identity)] (cond-> contact (nil? contact) - (enrich-contact contact-identity ens-name port font-file))))) + (enrich-contact contact-identity ens-name port font-file theme))))) (re-frame/reg-sub :contacts/contact-by-identity diff --git a/src/status_im/subs/profile.cljs b/src/status_im/subs/profile.cljs index 441bfa02bc..fc66578d65 100644 --- a/src/status_im/subs/profile.cljs +++ b/src/status_im/subs/profile.cljs @@ -5,7 +5,7 @@ [legacy.status-im.fleet.core :as fleet] [legacy.status-im.multiaccounts.db :as multiaccounts.db] [legacy.status-im.utils.currency :as currency] - [quo.theme :as theme] + [quo.theme] [re-frame.core :as re-frame] [status-im.common.pixel-ratio :as pixel-ratio] [status-im.constants :as constants] @@ -37,7 +37,8 @@ :<- [:profile/profiles-overview] :<- [:mediaserver/port] :<- [:initials-avatar-font-file] - (fn [[profiles port font-file] [_ target-key-uid]] + :<- [:theme] + (fn [[profiles port font-file theme] [_ target-key-uid]] (let [{:keys [images ens-name? customization-color] :as profile} (get profiles target-key-uid) image-name (-> images first :type) override-ring? (when ens-name? false)] @@ -48,13 +49,13 @@ :ratio pixel-ratio/ratio :image-name image-name :key-uid target-key-uid - :theme (theme/get-theme) + :theme theme :override-ring? override-ring?}) (image-server/get-initials-avatar-uri-fn {:port port :ratio pixel-ratio/ratio :key-uid target-key-uid - :theme (theme/get-theme) + :theme theme :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) :customization-color customization-color :override-ring? override-ring? @@ -231,11 +232,10 @@ (pos? (count (get multiaccount :images))))) (defn- replace-multiaccount-image-uri - [profile ens-names port font-file avatar-opts] + [profile ens-names port font-file avatar-opts theme] (let [{:keys [key-uid ens-name? images customization-color]} profile ens-name? (or ens-name? (seq ens-names)) - theme (theme/get-theme) avatar-opts (assoc avatar-opts :override-ring? (when ens-name? false)) images-with-uri (mapv (fn [{key-uid :keyUid image-name :type :as image}] (let [uri-fn (image-server/get-account-image-uri-fn @@ -269,8 +269,9 @@ :<- [:ens/current-names] :<- [:mediaserver/port] :<- [:initials-avatar-font-file] - (fn [[profile ens-names port font-file] [_ avatar-opts]] - (replace-multiaccount-image-uri profile ens-names port font-file avatar-opts))) + :<- [:theme] + (fn [[profile ens-names port font-file theme] [_ avatar-opts]] + (replace-multiaccount-image-uri profile ens-names port font-file avatar-opts theme))) (re-frame/reg-sub :profile/image diff --git a/src/status_im/subs/root.cljs b/src/status_im/subs/root.cljs index dbaba2b4e1..f562301acc 100644 --- a/src/status_im/subs/root.cljs +++ b/src/status_im/subs/root.cljs @@ -168,3 +168,6 @@ ;;debug (when js/goog.DEBUG (reg-root-key-sub :dev/previewed-component :dev/previewed-component)) + +;;theme +(reg-root-key-sub :theme :theme) diff --git a/src/test_helpers/component.cljs b/src/test_helpers/component.cljs index abf30c565c..7e6f03c489 100644 --- a/src/test_helpers/component.cljs +++ b/src/test_helpers/component.cljs @@ -56,7 +56,7 @@ ([component] (render-with-theme-provider component :light)) ([component theme] - (rtl/render (reagent/as-element [quo.theme/provider {:theme theme} component])))) + (rtl/render (reagent/as-element [quo.theme/provider theme component])))) (def unmount "Unmount rendered component. diff --git a/src/tests/contract_test/wallet_test.cljs b/src/tests/contract_test/wallet_test.cljs index 1a52e7ee12..8f780b3bd1 100644 --- a/src/tests/contract_test/wallet_test.cljs +++ b/src/tests/contract_test/wallet_test.cljs @@ -110,24 +110,25 @@ [expected-result actual-result] (is (= expected-result actual-result))) -(deftest wallet-search-ens-test - (h/test-async :wallet/search-ens - (fn [] - (promesa/let [_ (h/enable-testnet!)] - (let [test-cases [{:description "Test on Ethereum mainnet" - :ens-name "test.eth" - :chain-id constants/ethereum-mainnet-chain-id - :expected-result "0xeefb13c7d42efcc655e528da6d6f7bbcf9a2251d"} - {:description "Test on Goerli testnet" - :ens-name "qoqobolo.stateofus.eth" - :chain-id constants/ethereum-goerli-chain-id - :expected-result "0xf8f4f6b5c73f4fb561eb2676326d81b7aba180b0"} - {:description "Test on Sepolia testnet" - :ens-name "code.eth" - :chain-id constants/ethereum-sepolia-chain-id - :expected-result "0x035ebd096afa6b98372494c7f08f3402324117d3"}]] - (promesa/all - (map (fn [{:keys [ens-name chain-id expected-result]}] - (promesa/let [ens-address (contract-utils/call-rpc "ens_addressOf" chain-id ens-name)] - (assert-search-ens expected-result ens-address))) - test-cases))))))) +#_(deftest wallet-search-ens-test + (h/test-async :wallet/search-ens + (fn [] + (promesa/let [_ (h/enable-testnet!)] + (let [test-cases [{:description "Test on Ethereum mainnet" + :ens-name "test.eth" + :chain-id constants/ethereum-mainnet-chain-id + :expected-result "0xeefb13c7d42efcc655e528da6d6f7bbcf9a2251d"} + {:description "Test on Goerli testnet" + :ens-name "qoqobolo.stateofus.eth" + :chain-id constants/ethereum-goerli-chain-id + :expected-result "0xf8f4f6b5c73f4fb561eb2676326d81b7aba180b0"} + {:description "Test on Sepolia testnet" + :ens-name "code.eth" + :chain-id constants/ethereum-sepolia-chain-id + :expected-result "0x035ebd096afa6b98372494c7f08f3402324117d3"}]] + (promesa/all + (map (fn [{:keys [ens-name chain-id expected-result]}] + (promesa/let [ens-address + (contract-utils/call-rpc "ens_addressOf" chain-id ens-name)] + (assert-search-ens expected-result ens-address))) + test-cases))))))) diff --git a/src/utils/image_server.cljs b/src/utils/image_server.cljs index d1ef8019b4..834933087a 100644 --- a/src/utils/image_server.cljs +++ b/src/utils/image_server.cljs @@ -189,8 +189,8 @@ [:=> [:cat [:map - [:color string?] [:theme :schema.common/theme] + [:color string?] [:background-color {:optional true} [:maybe string?]] [:size number?] [:ratio float?]