From 457ed15e0bd9260a7e2b9e0df0ae717030081ab0 Mon Sep 17 00:00:00 2001 From: Sean Hagstrom Date: Tue, 14 Jan 2025 04:09:49 -0800 Subject: [PATCH] chore: resolve deprecation warnings related to `custom-color` and `touchable-without-feeback` (#21874) This change refactors the codebase to avoid using deprecated functions and components related to the `custom-color` function (now removed) and the touchable-without-feedback component. --- .../status_im/ui/components/button/view.cljs | 2 +- .../avatars/group_avatar/style.cljs | 4 +- .../avatars/wallet_user_avatar/style.cljs | 7 +- src/quo/components/banners/banner/style.cljs | 5 +- src/quo/components/banners/banner/view.cljs | 2 +- .../browser/browser_input/view.cljs | 4 +- src/quo/components/buttons/button/view.cljs | 133 +++++++++--------- .../buttons/dynamic_button/view.cljs | 10 +- .../buttons/slide_button/style.cljs | 4 +- .../buttons/slide_button/utils.cljs | 14 +- .../components/buttons/slide_button/view.cljs | 3 +- src/quo/components/colors/color/view.cljs | 4 +- .../common/notification_dot/style.cljs | 5 +- src/quo/components/community/banner/view.cljs | 16 +-- .../community/community_card_view.cljs | 64 ++++----- src/quo/components/counter/counter/style.cljs | 4 +- src/quo/components/counter/step/style.cljs | 10 +- .../dividers/strength_divider/view.cljs | 5 +- .../dropdowns/dropdown/properties.cljs | 2 +- .../graph/interactive_graph/view.cljs | 6 +- .../components/graph/wallet_graph/view.cljs | 5 +- .../components/inputs/address_input/view.cljs | 4 +- src/quo/components/inputs/input/style.cljs | 6 +- .../inputs/profile_input/style.cljs | 2 +- .../inputs/recovery_phrase/style.cljs | 4 +- .../components/inputs/title_input/style.cljs | 3 +- .../list_items/address/component_spec.cljs | 4 +- .../components/list_items/address/style.cljs | 4 +- src/quo/components/list_items/dapp/style.cljs | 8 +- .../list_items/saved_address/style.cljs | 4 +- .../saved_contact_address/component_spec.cljs | 4 +- .../saved_contact_address/style.cljs | 4 +- src/quo/components/messages/gap.cljs | 4 +- .../navigation/bottom_nav_tab/styles.cljs | 2 +- .../components/navigation/top_nav/view.cljs | 18 +-- .../notifications/activity_log/style.cljs | 2 +- .../profile/profile_card/style.cljs | 2 +- .../profile/select_profile/style.cljs | 2 +- .../components/selectors/disclaimer/view.cljs | 46 +++--- .../components/selectors/filter/style.cljs | 2 +- src/quo/components/selectors/filter/view.cljs | 14 +- .../settings/privacy_option/view.cljs | 36 ++--- src/quo/components/tabs/tab/view.cljs | 56 ++++---- src/quo/components/tags/base_tag.cljs | 21 ++- .../components/tags/context_tag/style.cljs | 10 +- src/quo/components/tags/context_tag/view.cljs | 2 +- .../components/tags/network_tags/style.cljs | 13 +- .../wallet/account_overview/style.cljs | 19 +-- .../wallet/transaction_progress/view.cljs | 2 +- src/quo/foundations/colors.cljs | 55 ++++---- .../preview/quo/graph/interactive_graph.cljs | 2 +- .../contexts/preview/quo/selectors/react.cljs | 2 +- .../preview/quo/selectors/react_selector.cljs | 5 +- .../contexts/preview/quo/share/qr_code.cljs | 3 +- .../preview/quo/wallet/network_routing.cljs | 2 +- 55 files changed, 312 insertions(+), 364 deletions(-) diff --git a/src/legacy/status_im/ui/components/button/view.cljs b/src/legacy/status_im/ui/components/button/view.cljs index 5eebe9f146..477277bd26 100644 --- a/src/legacy/status_im/ui/components/button/view.cljs +++ b/src/legacy/status_im/ui/components/button/view.cljs @@ -67,7 +67,7 @@ :else theme) {:keys [icon-color background-color text-color border-color]} (themes theme')] - [rn/touchable-without-feedback + [rn/pressable (merge {:disabled disabled :accessibility-label accessibility-label} (when on-press diff --git a/src/quo/components/avatars/group_avatar/style.cljs b/src/quo/components/avatars/group_avatar/style.cljs index cb7f7f1e82..357bf27fbc 100644 --- a/src/quo/components/avatars/group_avatar/style.cljs +++ b/src/quo/components/avatars/group_avatar/style.cljs @@ -10,9 +10,7 @@ :justify-content :center :border-radius (/ container-size 2) :overflow :hidden - :background-color (colors/theme-colors (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme)}) + :background-color (colors/resolve-color customization-color theme)}) (defn avatar-identifier [theme] diff --git a/src/quo/components/avatars/wallet_user_avatar/style.cljs b/src/quo/components/avatars/wallet_user_avatar/style.cljs index cea3b73e8c..1d05d0fbf8 100644 --- a/src/quo/components/avatars/wallet_user_avatar/style.cljs +++ b/src/quo/components/avatars/wallet_user_avatar/style.cljs @@ -5,16 +5,13 @@ [customization-color neutral? theme] (if neutral? (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) - (colors/custom-color customization-color 50 20))) + (colors/resolve-color customization-color theme 20))) (defn- text-color [customization-color neutral? theme] (if neutral? (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme) - (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme))) + (colors/resolve-color customization-color theme))) (defn container [circle-size customization-color neutral? theme] diff --git a/src/quo/components/banners/banner/style.cljs b/src/quo/components/banners/banner/style.cljs index de19d9f064..1d8f71e540 100644 --- a/src/quo/components/banners/banner/style.cljs +++ b/src/quo/components/banners/banner/style.cljs @@ -2,9 +2,10 @@ (:require [quo.foundations.colors :as colors])) -(def container +(defn container + [theme] {:height 40 - :background-color (colors/custom-color :blue 50 20) + :background-color (colors/resolve-color :blue theme 20) :flex-direction :row :align-items :center :padding-right 22 diff --git a/src/quo/components/banners/banner/view.cljs b/src/quo/components/banners/banner/view.cljs index 9f873956bc..ebd73cb698 100644 --- a/src/quo/components/banners/banner/view.cljs +++ b/src/quo/components/banners/banner/view.cljs @@ -14,7 +14,7 @@ (when (pos? pins-count) [rn/touchable-opacity {:accessibility-label :pinned-banner - :style style/container + :style (style/container theme) :active-opacity 1 :on-press on-press} (when-not hide-pin? diff --git a/src/quo/components/browser/browser_input/view.cljs b/src/quo/components/browser/browser_input/view.cljs index 63f7cf9ecb..b1119ed941 100644 --- a/src/quo/components/browser/browser_input/view.cljs +++ b/src/quo/components/browser/browser_input/view.cljs @@ -44,9 +44,7 @@ (defn cursor-color [customization-color theme] - (colors/theme-colors (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme)) + (colors/resolve-color customization-color theme)) (defn placeholder-color [state blur? theme] diff --git a/src/quo/components/buttons/button/view.cljs b/src/quo/components/buttons/button/view.cljs index 3d2c83b7ba..73cd893fe4 100644 --- a/src/quo/components/buttons/button/view.cljs +++ b/src/quo/components/buttons/button/view.cljs @@ -54,81 +54,80 @@ (fn [] (set-pressed-state nil) (when on-press-out (on-press-out))))] - [rn/touchable-without-feedback + [rn/pressable {:disabled (boolean disabled?) :accessibility-label accessibility-label :on-press-in on-press-in-cb :on-press-out on-press-out-cb :on-press on-press :allow-multiple-presses? allow-multiple-presses? - :on-long-press on-long-press} + :on-long-press on-long-press + :style (merge + (style/shape-style-container size border-radius) + container-style)} [rn/view {:style (merge - (style/shape-style-container size border-radius) - container-style)} + (style/style-container {:size size + :disabled? disabled? + :border-radius border-radius + :background-color background-color + :border-color border-color + :icon-only? icon-only? + :icon-top icon-top + :icon-left icon-left + :icon-right icon-right}) + inner-style)} + (when overlay-customization-color + [customization-colors/overlay + {:customization-color overlay-customization-color + :theme theme + :pressed? (if pressed? pressed? pressed-state?)}]) + (when (= background :photo) + [blur/view + {:blur-radius 20 + :blur-type blur-type + :overlay-color blur-overlay-color + :style style/blur-view}]) + (when icon-top + [rn/view + [quo.icons/icon icon-top + {:container-style {:margin-bottom 2 + :opacity (when disabled? 0.3)} + :color (or icon-top-color icon-color) + :size icon-size}]]) + (when icon-left + [rn/view + {:style (style/icon-left-icon-style + {:size size + :icon-size icon-size + :disabled? disabled?})} + [quo.icons/icon icon-left + {:color (or icon-left-color icon-color) + :size icon-size}]]) [rn/view - {:style (merge - (style/style-container {:size size - :disabled? disabled? - :border-radius border-radius - :background-color background-color - :border-color border-color - :icon-only? icon-only? - :icon-top icon-top - :icon-left icon-left - :icon-right icon-right}) - inner-style)} - (when overlay-customization-color - [customization-colors/overlay - {:customization-color overlay-customization-color - :theme theme - :pressed? (if pressed? pressed? pressed-state?)}]) - (when (= background :photo) - [blur/view - {:blur-radius 20 - :blur-type blur-type - :overlay-color blur-overlay-color - :style style/blur-view}]) - (when icon-top - [rn/view - [quo.icons/icon icon-top - {:container-style {:margin-bottom 2 - :opacity (when disabled? 0.3)} - :color (or icon-top-color icon-color) - :size icon-size}]]) - (when icon-left - [rn/view - {:style (style/icon-left-icon-style - {:size size - :icon-size icon-size - :disabled? disabled?})} - [quo.icons/icon icon-left - {:color (or icon-left-color icon-color) - :size icon-size}]]) - [rn/view - (cond - icon-only? - [quo.icons/icon children - {:color label-color - :size icon-size}] + (cond + icon-only? + [quo.icons/icon children + {:color label-color + :size icon-size}] - (string? children) - [text/text - {:size (when (#{56 24} size) :paragraph-2) - :weight :medium - :number-of-lines 1 - :style {:color label-color - :opacity (when (and disabled? (= theme :dark)) 0.3)}} - children] + (string? children) + [text/text + {:size (when (#{56 24} size) :paragraph-2) + :weight :medium + :number-of-lines 1 + :style {:color label-color + :opacity (when (and disabled? (= theme :dark)) 0.3)}} + children] - (vector? children) - children)] - (when icon-right - [rn/view - {:style (style/icon-right-icon-style - {:size size - :icon-size icon-size - :disabled? disabled?})} - [quo.icons/icon icon-right - {:color (or icon-right-color icon-color) - :size icon-size}]])]]])) + (vector? children) + children)] + (when icon-right + [rn/view + {:style (style/icon-right-icon-style + {:size size + :icon-size icon-size + :disabled? disabled?})} + [quo.icons/icon icon-right + {:color (or icon-right-color icon-color) + :size icon-size}]])]])) diff --git a/src/quo/components/buttons/dynamic_button/view.cljs b/src/quo/components/buttons/dynamic_button/view.cljs index d16fadcbcf..1678285200 100644 --- a/src/quo/components/buttons/dynamic_button/view.cljs +++ b/src/quo/components/buttons/dynamic_button/view.cljs @@ -11,14 +11,8 @@ [{:keys [type pressed? customization-color theme]}] (if (= type :mention) (if pressed? - (colors/theme-colors - (colors/custom-color customization-color 60) - (colors/custom-color customization-color 50) - theme) - (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme)) + (colors/resolve-color customization-color (colors/invert-theme theme)) + (colors/resolve-color customization-color theme)) (if pressed? (colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80 theme) (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)))) diff --git a/src/quo/components/buttons/slide_button/style.cljs b/src/quo/components/buttons/slide_button/style.cljs index a069c59ebb..ef82a905bc 100644 --- a/src/quo/components/buttons/slide_button/style.cljs +++ b/src/quo/components/buttons/slide_button/style.cljs @@ -41,7 +41,7 @@ :justify-content :space-around}]) (defn track - [{:keys [disabled? customization-color height blur?]}] + [{:keys [disabled? customization-color height blur? theme]}] {:align-items :flex-start :justify-content :center :border-radius 14 @@ -49,7 +49,7 @@ :align-self :stretch :padding constants/track-padding :opacity (if disabled? 0.3 1) - :background-color (utils/track-color customization-color blur?)}) + :background-color (utils/track-color customization-color theme blur?)}) (defn track-cover [interpolate-track] diff --git a/src/quo/components/buttons/slide_button/utils.cljs b/src/quo/components/buttons/slide_button/utils.cljs index fb53aedee3..bbdaff92e0 100644 --- a/src/quo/components/buttons/slide_button/utils.cljs +++ b/src/quo/components/buttons/slide_button/utils.cljs @@ -6,27 +6,21 @@ (defn main-color "`customization-color` Customization color" [customization-color theme] - (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme)) + (colors/resolve-color customization-color theme)) (defn track-color "`customization-color` Customization color" - ([customization-color blur?] + ([customization-color theme blur?] (if blur? colors/white-opa-5 - (colors/custom-color customization-color 50 10)))) + (colors/resolve-color customization-color theme 10)))) (defn text-color "`customization-color` Customization color" [customization-color theme blur?] (if blur? colors/white-opa-40 - (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme))) + (colors/resolve-color customization-color theme))) (defn clamp-value [value min-value max-value] diff --git a/src/quo/components/buttons/slide_button/view.cljs b/src/quo/components/buttons/slide_button/view.cljs index 3ca145299c..73ddbcae1e 100644 --- a/src/quo/components/buttons/slide_button/view.cljs +++ b/src/quo/components/buttons/slide_button/view.cljs @@ -88,7 +88,8 @@ :style (merge (style/track {:disabled? disabled? :customization-color custom-color :height (dimensions :track-height) - :blur? blur?}) + :blur? blur? + :theme theme}) container-style) :on-layout on-track-layout} [reanimated/view {:style (style/track-cover interpolate-track)} diff --git a/src/quo/components/colors/color/view.cljs b/src/quo/components/colors/color/view.cljs index cce2022a66..85eaccab6d 100644 --- a/src/quo/components/colors/color/view.cljs +++ b/src/quo/components/colors/color/view.cljs @@ -22,9 +22,7 @@ hex-color (if (= :feng-shui color) (colors/theme-colors colors/neutral-100 colors/white theme) - (colors/theme-colors (colors/custom-color color 50) - (colors/custom-color color 60) - theme))] + (colors/resolve-color color theme))] [rn/pressable {:style (style/color-button hex-color selected? idx window-width) diff --git a/src/quo/components/common/notification_dot/style.cljs b/src/quo/components/common/notification_dot/style.cljs index 08c857da15..9aa92939a2 100644 --- a/src/quo/components/common/notification_dot/style.cljs +++ b/src/quo/components/common/notification_dot/style.cljs @@ -7,10 +7,7 @@ (defn dot-background-color [customization-color theme blur?] (cond - customization-color (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme) + customization-color (colors/resolve-color customization-color theme) blur? (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme) :else (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))) diff --git a/src/quo/components/community/banner/view.cljs b/src/quo/components/community/banner/view.cljs index c56de8fb6c..554a037c88 100644 --- a/src/quo/components/community/banner/view.cljs +++ b/src/quo/components/community/banner/view.cljs @@ -29,12 +29,12 @@ (defn view [{:keys [title description on-press accessibility-label banner style]}] (let [theme (quo.theme/use-theme)] - [rn/touchable-without-feedback + [rn/pressable {: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}]]])) + :accessibility-label accessibility-label + :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/community_card_view.cljs b/src/quo/components/community/community_card_view.cljs index 542cfdfb53..ba0aafb3c5 100644 --- a/src/quo/components/community/community_card_view.cljs +++ b/src/quo/components/community/community_card_view.cljs @@ -35,39 +35,39 @@ [{: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 + [rn/pressable {:accessibility-label :community-card-item - :on-press on-press} - [rn/view {:style (style/community-card 20 theme)} - [rn/view - {:style {:width width - :height 230 - :border-radius 20} - :on-press on-press} - [rn/view {:style style/detail-container} - [rn/view (style/community-cover-container 60) - [rn/image - {:source cover - :style {:flex 1 - :border-top-right-radius 20 - :border-top-left-radius 20}}]] - [rn/view (style/card-view-content-container 12 theme) - [rn/view (style/card-view-chat-icon 48 theme) - [icon/community-icon {:images images} 48]] - (when (= status :gated) - [rn/view (style/permission-tag-styles) - [community-view/permission-tag-container - {:locked? locked? - :status status - :tokens tokens}]]) - [community-view/community-title - {:title name - :description description}] - [rn/view {:style (style/card-stats-position)} - [community-view/community-stats-column - {:type :card-view}]] - [rn/view {:style (style/community-tags-position)} - [community-view/community-tags {:tags tags}]]]]]]])) + :on-press on-press + :style (style/community-card 20 theme)} + [rn/view + {:style {:width width + :height 230 + :border-radius 20} + :on-press on-press} + [rn/view {:style style/detail-container} + [rn/view (style/community-cover-container 60) + [rn/image + {:source cover + :style {:flex 1 + :border-top-right-radius 20 + :border-top-left-radius 20}}]] + [rn/view (style/card-view-content-container 12 theme) + [rn/view (style/card-view-chat-icon 48 theme) + [icon/community-icon {:images images} 48]] + (when (= status :gated) + [rn/view (style/permission-tag-styles) + [community-view/permission-tag-container + {:locked? locked? + :status status + :tokens tokens}]]) + [community-view/community-title + {:title name + :description description}] + [rn/view {:style (style/card-stats-position)} + [community-view/community-stats-column + {:type :card-view}]] + [rn/view {:style (style/community-tags-position)} + [community-view/community-tags {:tags tags}]]]]]])) (defn view [{:keys [loading?] :as props}] diff --git a/src/quo/components/counter/counter/style.cljs b/src/quo/components/counter/counter/style.cljs index b5b8ad8292..2aa7e1124e 100644 --- a/src/quo/components/counter/counter/style.cljs +++ b/src/quo/components/counter/counter/style.cljs @@ -5,9 +5,7 @@ (defn get-color [type customization-color theme] (case type - :default (colors/theme-colors (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme) + :default (colors/resolve-color customization-color theme) :secondary (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) :grey (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :outline (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) diff --git a/src/quo/components/counter/step/style.cljs b/src/quo/components/counter/step/style.cljs index 53661a19b8..e7c2ad7f27 100644 --- a/src/quo/components/counter/step/style.cljs +++ b/src/quo/components/counter/step/style.cljs @@ -14,9 +14,13 @@ (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 theme) (colors/theme-colors colors/neutral-20 colors/neutral-80 theme))) -(defn active-background-color [customization-color] (colors/custom-color customization-color 50 10)) +(defn active-background-color + [customization-color theme] + (colors/resolve-color customization-color theme 10)) -(defn complete-background-color [customization-color] (colors/custom-color customization-color 50)) +(defn complete-background-color + [customization-color] + (colors/resolve-color customization-color :light)) (defn container [{:keys [size type in-blur-view? theme customization-color]}] @@ -29,7 +33,7 @@ :border-color (neutral-border-color in-blur-view? theme)) (= type :active) - (assoc :background-color (active-background-color customization-color)) + (assoc :background-color (active-background-color customization-color theme)) (= type :complete) (assoc :background-color (complete-background-color customization-color)))) diff --git a/src/quo/components/dividers/strength_divider/view.cljs b/src/quo/components/dividers/strength_divider/view.cljs index d50404d50b..36389f2586 100644 --- a/src/quo/components/dividers/strength_divider/view.cljs +++ b/src/quo/components/dividers/strength_divider/view.cljs @@ -9,16 +9,15 @@ [react-native.svg :as svg] [utils.i18n :as i18n])) - (def strength-divider-types {:very-weak {:default-text (i18n/label :t/strength-divider-very-weak-label) :color colors/danger-60 :percentage 20} :weak {:default-text (i18n/label :t/strength-divider-weak-label) - :color (colors/custom-color :orange 60) + :color (colors/resolve-color :orange nil) :percentage 40} :okay {:default-text (i18n/label :t/strength-divider-okay-label) - :color (colors/custom-color :yellow 60) + :color (colors/resolve-color :yellow nil) :percentage 60} :strong {:default-text (i18n/label :t/strength-divider-strong-label) :color colors/success-60 diff --git a/src/quo/components/dropdowns/dropdown/properties.cljs b/src/quo/components/dropdowns/dropdown/properties.cljs index 8cd447bd40..abe08edd6c 100644 --- a/src/quo/components/dropdowns/dropdown/properties.cljs +++ b/src/quo/components/dropdowns/dropdown/properties.cljs @@ -39,7 +39,7 @@ :right-icon-color colors/white-opa-20 :right-icon-color-2 colors/white :label-color colors/white - :background-color (colors/custom-color customization-color 50)}) + :background-color (colors/resolve-color customization-color :light)}) (def sizes-to-exclude-blur-in-photo-bg #{:size-40}) diff --git a/src/quo/components/graph/interactive_graph/view.cljs b/src/quo/components/graph/interactive_graph/view.cljs index dbed59abec..29f3a074ad 100644 --- a/src/quo/components/graph/interactive_graph/view.cljs +++ b/src/quo/components/graph/interactive_graph/view.cljs @@ -76,10 +76,8 @@ y-axis-label-background-color (colors/theme-colors colors/white-70-blur-opaque colors/neutral-95 theme) - customization-color (colors/theme-colors - (colors/custom-color customization-color 60) - (colors/custom-color customization-color 50) - theme) + customization-color (colors/resolve-color customization-color + (colors/invert-theme theme)) y-axis-label-texts (utils/calculate-y-axis-labels min-value step-value 4) x-axis-label-texts (utils/calculate-x-axis-labels data 5) reference-label-background-color (colors/theme-colors colors/neutral-80-opa-5-opaque diff --git a/src/quo/components/graph/wallet_graph/view.cljs b/src/quo/components/graph/wallet_graph/view.cljs index 197c06a882..4271f8c125 100644 --- a/src/quo/components/graph/wallet_graph/view.cljs +++ b/src/quo/components/graph/wallet_graph/view.cljs @@ -26,10 +26,7 @@ customization-color customization-color (= state :positive) :success :else :danger)] - (colors/theme-colors - (colors/custom-color color-keyword 50) - (colors/custom-color color-keyword 60) - theme))) + (colors/resolve-color color-keyword theme))) (defn view [{:keys [data state time-frame customization-color]}] diff --git a/src/quo/components/inputs/address_input/view.cljs b/src/quo/components/inputs/address_input/view.cljs index a727fd24c4..a636e8ffdf 100644 --- a/src/quo/components/inputs/address_input/view.cljs +++ b/src/quo/components/inputs/address_input/view.cljs @@ -37,9 +37,7 @@ [theme] [rn/view {:style style/clear-icon-container} [icon/icon :i/positive-state - {:color (colors/theme-colors (colors/custom-color :success 50) - (colors/custom-color :success 60) - theme) + {:color (colors/resolve-color :success theme) :size 20}]]) (defn- get-placeholder-text-color diff --git a/src/quo/components/inputs/input/style.cljs b/src/quo/components/inputs/input/style.cljs index ece7c7267b..3245a76a42 100644 --- a/src/quo/components/inputs/input/style.cljs +++ b/src/quo/components/inputs/input/style.cljs @@ -12,7 +12,7 @@ :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme) :password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 theme) :clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme) - :cursor (colors/theme-colors (colors/custom-color :blue 50) + :cursor (colors/theme-colors (colors/resolve-color :blue :light) colors/white theme)} {:label (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) @@ -20,9 +20,7 @@ :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 theme) :clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 theme) :password-icon (colors/theme-colors colors/neutral-50 colors/white theme) - :cursor (colors/theme-colors (colors/custom-color :blue 50) - (colors/custom-color :blue 60) - theme)})) + :cursor (colors/resolve-color :blue theme)})) (defn status-colors [status blur? theme] diff --git a/src/quo/components/inputs/profile_input/style.cljs b/src/quo/components/inputs/profile_input/style.cljs index 2f5c3c12b8..4834da0b5e 100644 --- a/src/quo/components/inputs/profile_input/style.cljs +++ b/src/quo/components/inputs/profile_input/style.cljs @@ -4,7 +4,7 @@ (defn container [customization-color] - {:background-color (colors/custom-color customization-color 50 40) + {:background-color (colors/resolve-color customization-color :light 40) :padding-horizontal 12 :padding-top 12 :padding-bottom 10 diff --git a/src/quo/components/inputs/recovery_phrase/style.cljs b/src/quo/components/inputs/recovery_phrase/style.cljs index 0e1ff1e5fa..9c3292ebab 100644 --- a/src/quo/components/inputs/recovery_phrase/style.cljs +++ b/src/quo/components/inputs/recovery_phrase/style.cljs @@ -36,9 +36,7 @@ (defn cursor-color [customization-color theme] - (colors/theme-colors (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme)) + (colors/resolve-color customization-color theme)) (defn error-word [theme] diff --git a/src/quo/components/inputs/title_input/style.cljs b/src/quo/components/inputs/title_input/style.cljs index 896034acfe..2e79ab3b99 100644 --- a/src/quo/components/inputs/title_input/style.cljs +++ b/src/quo/components/inputs/title_input/style.cljs @@ -25,8 +25,7 @@ [customization-color blur? theme] (colors/alpha (if blur? (colors/theme-colors colors/neutral-100 colors/white theme) - (colors/custom-color customization-color - (if (= :dark theme) 60 50))) + (colors/resolve-color customization-color theme)) (if platform/ios? 1 0.2))) (def text-input-container {:flex 1}) diff --git a/src/quo/components/list_items/address/component_spec.cljs b/src/quo/components/list_items/address/component_spec.cljs index c55b203daa..df86e5505b 100644 --- a/src/quo/components/list_items/address/component_spec.cljs +++ b/src/quo/components/list_items/address/component_spec.cljs @@ -17,7 +17,7 @@ (h/render-with-theme-provider [address/view (with-defaults)]) (h/fire-event :on-press-in (h/get-by-label-text :container)) (h/wait-for #(h/has-style (h/query-by-label-text :container) - {:backgroundColor (colors/custom-color :blue 50 5)}))) + {:backgroundColor (colors/resolve-color :blue :light 5)}))) (h/test "on-press-in changes state to :pressed with blur? enabled" (h/render-with-theme-provider [address/view (with-defaults {:blur? true})]) @@ -30,7 +30,7 @@ (h/fire-event :on-press-in (h/get-by-label-text :container)) (h/fire-event :on-press-out (h/get-by-label-text :container)) (h/wait-for #(h/has-style (h/query-by-label-text :container) - {:backgroundColor (colors/custom-color :blue 50 10)}))) + {:backgroundColor (colors/resolve-color :blue :light 10)}))) (h/test "on-press-out changes state to :active with blur? enabled" (h/render-with-theme-provider [address/view (with-defaults {:active-state? true :blur? true})]) diff --git a/src/quo/components/list_items/address/style.cljs b/src/quo/components/list_items/address/style.cljs index f99ce86b24..ff62ba8c4f 100644 --- a/src/quo/components/list_items/address/style.cljs +++ b/src/quo/components/list_items/address/style.cljs @@ -5,11 +5,11 @@ (defn- background-color [state customization-color blur?] (cond (and (or (= state :pressed) (= state :selected)) (not blur?)) - (colors/custom-color customization-color 50 5) + (colors/resolve-color customization-color :light 5) (and (or (= state :pressed) (= state :selected)) blur?) colors/white-opa-5 (and (= state :active) (not blur?)) - (colors/custom-color customization-color 50 10) + (colors/resolve-color customization-color :light 10) (and (= state :active) blur?) colors/white-opa-10 (and (= state :pressed) blur?) colors/white-opa-10 diff --git a/src/quo/components/list_items/dapp/style.cljs b/src/quo/components/list_items/dapp/style.cljs index d0592bf14b..0853a33b50 100644 --- a/src/quo/components/list_items/dapp/style.cljs +++ b/src/quo/components/list_items/dapp/style.cljs @@ -8,15 +8,15 @@ (and pressed? (= theme :dark) blur?) colors/white-opa-5 pressed? (colors/theme-colors - (colors/custom-color customization-color 50 5) - (colors/custom-color customization-color 60 5) + (colors/override-color customization-color 5 50) + (colors/override-color customization-color 5 60) theme) (and (= state :active) (= theme :dark) blur?) colors/white-opa-10 (= state :active) (colors/theme-colors - (colors/custom-color customization-color 50 10) - (colors/custom-color customization-color 60 10) + (colors/override-color customization-color 10 50) + (colors/override-color customization-color 10 60) theme) :else :transparent)) diff --git a/src/quo/components/list_items/saved_address/style.cljs b/src/quo/components/list_items/saved_address/style.cljs index 2bc0364976..7b86491aec 100644 --- a/src/quo/components/list_items/saved_address/style.cljs +++ b/src/quo/components/list_items/saved_address/style.cljs @@ -5,11 +5,11 @@ (defn- background-color [{:keys [state blur? customization-color]}] (cond (and (or (= state :pressed) (= state :selected)) (not blur?)) - (colors/custom-color customization-color 50 5) + (colors/resolve-color customization-color :light 5) (and (or (= state :pressed) (= state :selected)) blur?) colors/white-opa-5 (and (= state :active) (not blur?)) - (colors/custom-color customization-color 50 10) + (colors/resolve-color customization-color :light 10) (and (= state :active) blur?) colors/white-opa-10 (and (= state :pressed) blur?) colors/white-opa-10 diff --git a/src/quo/components/list_items/saved_contact_address/component_spec.cljs b/src/quo/components/list_items/saved_contact_address/component_spec.cljs index d743d5ffc6..145cfd3a7c 100644 --- a/src/quo/components/list_items/saved_contact_address/component_spec.cljs +++ b/src/quo/components/list_items/saved_contact_address/component_spec.cljs @@ -37,7 +37,7 @@ {:accounts (repeat 1 account)})]) (h/fire-event :on-press-in (h/get-by-label-text :container)) (h/wait-for #(h/has-style (h/query-by-label-text :container) - {:backgroundColor (colors/custom-color :blue 50 5)}))) + {:backgroundColor (colors/resolve-color :blue :light 5)}))) (h/test "on-press-out changes state to :active if active-state? is true (default value)" (h/render-with-theme-provider [saved-contact-address/view @@ -46,7 +46,7 @@ (h/fire-event :on-press-in (h/get-by-label-text :container)) (h/fire-event :on-press-out (h/get-by-label-text :container)) (h/wait-for #(h/has-style (h/query-by-label-text :container) - {:backgroundColor (colors/custom-color :blue 50 10)}))) + {:backgroundColor (colors/resolve-color :blue :light 10)}))) (h/test "on-press-out changes state to :default if active-state? is false" (h/render-with-theme-provider [saved-contact-address/view diff --git a/src/quo/components/list_items/saved_contact_address/style.cljs b/src/quo/components/list_items/saved_contact_address/style.cljs index 29a544ac12..387f7317b7 100644 --- a/src/quo/components/list_items/saved_contact_address/style.cljs +++ b/src/quo/components/list_items/saved_contact_address/style.cljs @@ -5,9 +5,9 @@ (defn- background-color [{:keys [state customization-color]}] (cond (or (= state :pressed) (= state :selected)) - (colors/custom-color customization-color 50 5) + (colors/resolve-color customization-color :light 5) (= state :active) - (colors/custom-color customization-color 50 10) + (colors/resolve-color customization-color :light 10) :else :transparent)) (defn container diff --git a/src/quo/components/messages/gap.cljs b/src/quo/components/messages/gap.cljs index 80139c05b9..9229b680ec 100644 --- a/src/quo/components/messages/gap.cljs +++ b/src/quo/components/messages/gap.cljs @@ -95,7 +95,7 @@ (defn info-button [on-press] - [rn/touchable-without-feedback + [rn/pressable {:on-press on-press} [icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]]) @@ -123,7 +123,7 @@ :margin-right 2} [timestamp timestamp-far] (when on-info-button-pressed [info-button on-info-button-pressed])] - [rn/touchable-without-feedback + [rn/pressable {:style {:flex 1 :margin-top 16 :margin-bottom 20} :on-press #(when on-press (on-press))} [text/text warning-label]] diff --git a/src/quo/components/navigation/bottom_nav_tab/styles.cljs b/src/quo/components/navigation/bottom_nav_tab/styles.cljs index 776c694dd0..c5f9ac53f7 100644 --- a/src/quo/components/navigation/bottom_nav_tab/styles.cljs +++ b/src/quo/components/navigation/bottom_nav_tab/styles.cljs @@ -10,7 +10,7 @@ :top 6 :left 51 :position :absolute - :background-color (colors/custom-color customization-color 60)}) + :background-color (colors/resolve-color customization-color nil)}) (def notification-counter {:position :absolute diff --git a/src/quo/components/navigation/top_nav/view.cljs b/src/quo/components/navigation/top_nav/view.cljs index ecc3ecc096..b5242a0064 100644 --- a/src/quo/components/navigation/top_nav/view.cljs +++ b/src/quo/components/navigation/top_nav/view.cljs @@ -76,15 +76,15 @@ (defn- left-section [{:keys [avatar-props on-press customization-color]}] - [rn/touchable-without-feedback {:on-press on-press} - [rn/view - {:accessibility-label :open-profile} - [user-avatar/user-avatar - (merge {:status-indicator? true - :ring? true - :customization-color customization-color - :size :small} - avatar-props)]]]) + [rn/pressable + {:on-press on-press + :accessibility-label :open-profile} + [user-avatar/user-avatar + (merge {:status-indicator? true + :ring? true + :customization-color customization-color + :size :small} + avatar-props)]]) (defn- right-section [{:keys [blur? diff --git a/src/quo/components/notifications/activity_log/style.cljs b/src/quo/components/notifications/activity_log/style.cljs index d87896b3b4..d75c1a064e 100644 --- a/src/quo/components/notifications/activity_log/style.cljs +++ b/src/quo/components/notifications/activity_log/style.cljs @@ -56,7 +56,7 @@ (defn unread-dot [customization-color] - {:background-color (colors/custom-color (or customization-color :blue) 60) + {:background-color (colors/resolve-color (or customization-color :blue) nil) :border-radius 4 :width 8 :height 8}) diff --git a/src/quo/components/profile/profile_card/style.cljs b/src/quo/components/profile/profile_card/style.cljs index f73f73836a..a84b01ac00 100644 --- a/src/quo/components/profile/profile_card/style.cljs +++ b/src/quo/components/profile/profile_card/style.cljs @@ -12,7 +12,7 @@ :border-top-right-radius 16 :border-bottom-left-radius border-bottom-radius :border-bottom-right-radius border-bottom-radius - :background-color (colors/custom-color customization-color 50 40)}) + :background-color (colors/resolve-color customization-color :light 40)}) (def card-header {:flex-direction :row diff --git a/src/quo/components/profile/select_profile/style.cljs b/src/quo/components/profile/select_profile/style.cljs index 957a74623e..d7af80d9b2 100644 --- a/src/quo/components/profile/select_profile/style.cljs +++ b/src/quo/components/profile/select_profile/style.cljs @@ -5,7 +5,7 @@ (defn container [customization-color selected?] {:padding 12 - :background-color (colors/custom-color customization-color 50 40) + :background-color (colors/resolve-color customization-color :light 40) :border-width 1 :border-radius 16 :flex 1 diff --git a/src/quo/components/selectors/disclaimer/view.cljs b/src/quo/components/selectors/disclaimer/view.cljs index da2024cee6..c2f0f95e66 100644 --- a/src/quo/components/selectors/disclaimer/view.cljs +++ b/src/quo/components/selectors/disclaimer/view.cljs @@ -11,28 +11,28 @@ (defn view [{:keys [checked? blur? accessibility-label container-style on-change icon customization-color]} label] (let [theme (quo.theme/use-theme)] - [rn/touchable-without-feedback + [rn/pressable {:on-press (when on-change #(on-change (not checked?))) - :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 - :customization-color customization-color}] - [text/text - {:size :paragraph-2 - :style style/text} - label] - (when icon - [rn/view {:style style/icon-container} - [icons/icon icon - {:accessibility-label :disclaimer-icon - :color (if blur? - (colors/white-opa-70) - (colors/theme-colors colors/neutral-50 - colors/neutral-40 - theme))}]])]])) + :accessibility-label :disclaimer-touchable-opacity + :style (merge container-style (style/container blur? theme))} + [selectors/view + {:type :checkbox + :accessibility-label accessibility-label + :blur? blur? + :checked? checked? + :on-change on-change + :customization-color customization-color}] + [text/text + {:size :paragraph-2 + :style style/text} + label] + (when icon + [rn/view {:style style/icon-container} + [icons/icon icon + {:accessibility-label :disclaimer-icon + :color (if blur? + (colors/white-opa-70) + (colors/theme-colors colors/neutral-50 + colors/neutral-40 + theme))}]])])) diff --git a/src/quo/components/selectors/filter/style.cljs b/src/quo/components/selectors/filter/style.cljs index 94d7abb9c8..27fb26a2a4 100644 --- a/src/quo/components/selectors/filter/style.cljs +++ b/src/quo/components/selectors/filter/style.cljs @@ -39,7 +39,7 @@ [customization-color pressed? theme] (when pressed? (if customization-color - (colors/custom-color (or customization-color :blue) 60) + (colors/resolve-color (or customization-color :blue) nil) (colors/theme-colors colors/primary-50 colors/primary-60 theme)))) (defn container-outer diff --git a/src/quo/components/selectors/filter/view.cljs b/src/quo/components/selectors/filter/view.cljs index dd5e75e492..35a5ee3bae 100644 --- a/src/quo/components/selectors/filter/view.cljs +++ b/src/quo/components/selectors/filter/view.cljs @@ -12,11 +12,11 @@ on-press-out (fn [] (set-pressed (not pressed?)) (when on-press-out (on-press-out pressed?)))] - [rn/touchable-without-feedback + [rn/pressable {:accessibility-label :selector-filter - :on-press-out on-press-out} - [rn/view {:style (style/container-outer customization-color pressed? theme)} - [rn/view {:style (style/container-inner pressed? blur? theme)} - [icon/icon :i/unread - {:color (style/icon-color pressed? theme) - :size 20}]]]])) + :on-press-out on-press-out + :style (style/container-outer customization-color pressed? theme)} + [rn/view {:style (style/container-inner pressed? blur? theme)} + [icon/icon :i/unread + {:color (style/icon-color pressed? theme) + :size 20}]]])) diff --git a/src/quo/components/settings/privacy_option/view.cljs b/src/quo/components/settings/privacy_option/view.cljs index f3f9499de2..495690072e 100644 --- a/src/quo/components/settings/privacy_option/view.cljs +++ b/src/quo/components/settings/privacy_option/view.cljs @@ -24,7 +24,7 @@ (defn- card-footer [{:keys [active? label on-toggle theme]}] - [rn/touchable-without-feedback + [rn/pressable [rn/view {:style (style/card-footer theme)} [rn/view {:style style/card-footer-label-container} [text/text {:size :paragraph-2} label]] @@ -54,22 +54,22 @@ :or {icon :i/world active? false}}] (let [theme (quo.theme/use-theme)] - [rn/touchable-without-feedback + [rn/pressable {: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}])]])) + :testID :privacy-option-card + :style (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/tabs/tab/view.cljs b/src/quo/components/tabs/tab/view.cljs index b068716f45..2d0e5a8a5d 100644 --- a/src/quo/components/tabs/tab/view.cljs +++ b/src/quo/components/tabs/tab/view.cljs @@ -61,35 +61,35 @@ :blur? blur? :disabled disabled :active active})] - [rn/touchable-without-feedback + [rn/pressable (merge {:disabled disabled - :accessibility-label accessibility-label} + :accessibility-label accessibility-label + :style style/container} (when on-press {:on-press (fn [] (on-press id))})) - [rn/view {:style style/container} - (when show-notification-dot? - [notification-dot/view - {:style style/notification-dot - :customization-color customization-color}]) - [rn/view - {:style (merge - (style/tab - {:size size - :background-color (if (and segmented? (not active)) - :transparent - background-color) - :disabled disabled - :segmented? segmented? - :show-notification-dot? show-notification-dot?}) - (if active active-item-container-style item-container-style))} - (when before - [rn/view - [icons/icon before {:color icon-color}]]) - [content {:size size :label label} children]] - (when show-notification-dot? - [right-side-with-cutout - {:width (style/size->padding-left size) - :height size - :disabled disabled - :background-color background-color}])]])) + (when show-notification-dot? + [notification-dot/view + {:style style/notification-dot + :customization-color customization-color}]) + [rn/view + {:style (merge + (style/tab + {:size size + :background-color (if (and segmented? (not active)) + :transparent + background-color) + :disabled disabled + :segmented? segmented? + :show-notification-dot? show-notification-dot?}) + (if active active-item-container-style item-container-style))} + (when before + [rn/view + [icons/icon before {:color icon-color}]]) + [content {:size size :label label} children]] + (when show-notification-dot? + [right-side-with-cutout + {:width (style/size->padding-left size) + :height size + :disabled disabled + :background-color background-color}])])) diff --git a/src/quo/components/tags/base_tag.cljs b/src/quo/components/tags/base_tag.cljs index 92a578460a..80649af30f 100644 --- a/src/quo/components/tags/base_tag.cljs +++ b/src/quo/components/tags/base_tag.cljs @@ -21,17 +21,16 @@ accessibility-label type labelled?] :or {size 32}} children] - [rn/touchable-without-feedback + [rn/pressable (merge {:disabled disabled? - :accessibility-label accessibility-label} + :accessibility-label accessibility-label + :style (style-container size + disabled? + border-color + border-width + background-color + labelled? + type)} (when on-press {:on-press #(on-press id)})) - [rn/view - {:style (merge (style-container size - disabled? - border-color - border-width - background-color - labelled? - type))} - children]]) + children]) diff --git a/src/quo/components/tags/context_tag/style.cljs b/src/quo/components/tags/context_tag/style.cljs index 8ee8e73de9..0e3ba67f3c 100644 --- a/src/quo/components/tags/context_tag/style.cljs +++ b/src/quo/components/tags/context_tag/style.cljs @@ -15,10 +15,7 @@ :border-radius 10 :align-items :center :justify-content :center - :background-color (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme)}) + :background-color (colors/resolve-color customization-color theme)}) (def audio-tag-icon-color colors/white) @@ -31,10 +28,7 @@ (not (#{:account :collectible} type)) 16 (= size 24) 8 :else 10) - border-color (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme)] + border-color (colors/resolve-color customization-color theme)] (cond-> {:padding 2 :padding-right 8 :flex-direction :row diff --git a/src/quo/components/tags/context_tag/view.cljs b/src/quo/components/tags/context_tag/view.cljs index cd7171600c..c48977548b 100644 --- a/src/quo/components/tags/context_tag/view.cljs +++ b/src/quo/components/tags/context_tag/view.cljs @@ -135,7 +135,7 @@ [group-avatar/view {:icon-name :i/members :size (if (= size 24) :size-20 :size-28) - :customization-color (colors/custom-color customization-color 50)}]] + :customization-color (colors/resolve-color customization-color :light)}]] (:channel :community) [communities-tag (assoc props :channel? (= type :channel))] diff --git a/src/quo/components/tags/network_tags/style.cljs b/src/quo/components/tags/network_tags/style.cljs index 09acc1f682..a0ebfc9dba 100644 --- a/src/quo/components/tags/network_tags/style.cljs +++ b/src/quo/components/tags/network_tags/style.cljs @@ -8,14 +8,14 @@ :align-self :flex-start :background-color (when (= status :error) (colors/theme-colors - (colors/custom-color :danger 50 10) - (colors/custom-color :danger 60 10) + (colors/override-color :danger 10 50) + (colors/override-color :danger 10 60) theme)) :border-width 1 :border-color (cond (= status :error) (colors/theme-colors - (colors/custom-color :danger 50 20) - (colors/custom-color :danger 60 20) + (colors/override-color :danger 20 50) + (colors/override-color :danger 20 60) theme) (and blur? (= status :default)) (colors/theme-colors colors/neutral-80-opa-5 @@ -36,7 +36,4 @@ {:padding-left 4 :margin-top -1 :color (when (= status :error) - (colors/theme-colors - (colors/custom-color :danger 50) - (colors/custom-color :danger 60) - theme))}) + (colors/resolve-color :danger theme))}) diff --git a/src/quo/components/wallet/account_overview/style.cljs b/src/quo/components/wallet/account_overview/style.cljs index 8759e25b72..b736578dbe 100644 --- a/src/quo/components/wallet/account_overview/style.cljs +++ b/src/quo/components/wallet/account_overview/style.cljs @@ -38,17 +38,14 @@ (defn percentage-change [customization-color theme] - {:color (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme) + {:color (colors/resolve-color customization-color theme) :margin-right 4}) (defn dot-separator [customization-color theme] {:background-color (colors/theme-colors - (colors/custom-color customization-color 60 40) - (colors/custom-color customization-color 50 40) + (colors/override-color customization-color 40 60) + (colors/override-color customization-color 40 50) theme) :margin-right 4 :margin-top 8 @@ -57,10 +54,7 @@ (defn currency-change [customization-color theme] - {:color (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme) + {:color (colors/resolve-color customization-color theme) :margin-right 4}) (defn loading-bar-margin-bottom @@ -97,8 +91,5 @@ (defn icon-props [customization-color theme] - {:color (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme) + {:color (colors/resolve-color customization-color theme) :size 16}) diff --git a/src/quo/components/wallet/transaction_progress/view.cljs b/src/quo/components/wallet/transaction_progress/view.cljs index 5501e2ff07..79a6d27304 100644 --- a/src/quo/components/wallet/transaction_progress/view.cljs +++ b/src/quo/components/wallet/transaction_progress/view.cljs @@ -173,7 +173,7 @@ [{:keys [title on-press accessibility-label tag-photo tag-name tag-number networks] :or {accessibility-label :transaction-progress}}] (let [theme (quo.theme/use-theme)] - [rn/touchable-without-feedback + [rn/pressable {:on-press on-press :accessibility-label accessibility-label} [rn/view {:style (style/box-style theme)} diff --git a/src/quo/foundations/colors.cljs b/src/quo/foundations/colors.cljs index d2831b0c9c..4650f79b2e 100644 --- a/src/quo/foundations/colors.cljs +++ b/src/quo/foundations/colors.cljs @@ -345,6 +345,28 @@ suffix (get-from-colors-map suffix) opacity (alpha (/ opacity 100)))))) +(defn- override-color* + ([color] + (resolve-color* color nil nil)) + ([color opacity] + (resolve-color* color opacity nil)) + ([color opacity color-suffix] + (let [suffix (cond + (not (keyword? color)) nil + color-suffix color-suffix + opacity 50 + :else 60)] + (cond-> color + suffix (get-from-colors-map suffix) + opacity (alpha (/ opacity 100)))))) + +(def override-color + "(override-color color opacity suffix) + color hex string or keyword - (resolves from custom, network and semantic colors) + opacity 0-100 (optional) + suffix optionally override the color suffix to use when retrieving the color" + (memoize override-color*)) + (def resolve-color "(resolve-color color theme opacity) color hex string or keyword (resolves from custom, network and semantic colors) @@ -352,35 +374,16 @@ opacity 0-100 (optional) - if set theme is ignored and goes to 50 suffix internally" (memoize resolve-color*)) -(def ^{:deprecated true :superseded-by "resolve-color"} - custom-color - "(custom-color color suffix opacity) - color :primary/:purple/... - suffix 50/60 - opacity 0-100 (optional)" - (memoize - (fn - ([color] - (custom-color color nil nil)) - ([color suffix] - (custom-color color suffix nil)) - ([color suffix opacity] - (let [resolved-color (cond - (not (keyword? color)) - color - - (hex-string? (get colors-map color)) - (get colors-map color fallback-color) - - :else - (get-in colors-map [color suffix] (get fallback-color suffix)))] - (if opacity - (alpha resolved-color (/ opacity 100)) - resolved-color)))))) - (def shadow "rgba(9,16,28,0.08)") (defn theme-colors "(theme-colors light dark override-theme)" [light dark theme] (if (= theme :light) light dark)) + +(defn invert-theme + [theme] + (case theme + :light :dark + :dark :light + nil)) 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 9f21326322..b19cf1a854 100644 --- a/src/status_im/contexts/preview/quo/graph/interactive_graph.cljs +++ b/src/status_im/contexts/preview/quo/graph/interactive_graph.cljs @@ -122,7 +122,7 @@ 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/pressable {:on-press rn/dismiss-keyboard!} [rn/view {:padding-bottom 150} [preview/customizer state descriptor theme] [quo/interactive-graph diff --git a/src/status_im/contexts/preview/quo/selectors/react.cljs b/src/status_im/contexts/preview/quo/selectors/react.cljs index 1996f5bf33..fa6e38b1be 100644 --- a/src/status_im/contexts/preview/quo/selectors/react.cljs +++ b/src/status_im/contexts/preview/quo/selectors/react.cljs @@ -68,7 +68,7 @@ :padding-horizontal 20 :border-radius 16 :background-color (when (= :pinned (:use-case state)) - (colors/custom-color :blue 50 10)) + (colors/resolve-color :blue :light 10)) :align-items :flex-start} [quo/react {:reactions reactions diff --git a/src/status_im/contexts/preview/quo/selectors/react_selector.cljs b/src/status_im/contexts/preview/quo/selectors/react_selector.cljs index 5d4941eee0..b26c56bfbb 100644 --- a/src/status_im/contexts/preview/quo/selectors/react_selector.cljs +++ b/src/status_im/contexts/preview/quo/selectors/react_selector.cljs @@ -49,10 +49,7 @@ :padding-vertical 60 :border-radius 16 :background-color (when (= :pinned (:use-case @state)) - (colors/custom-color - :blue - 50 - 10)) + (colors/resolve-color :blue :light 10)) :justify-content :space-evenly :flex-direction :row :align-items :center} diff --git a/src/status_im/contexts/preview/quo/share/qr_code.cljs b/src/status_im/contexts/preview/quo/share/qr_code.cljs index 9ce6286b47..0bb3820d4c 100644 --- a/src/status_im/contexts/preview/quo/share/qr_code.cljs +++ b/src/status_im/contexts/preview/quo/share/qr_code.cljs @@ -98,7 +98,8 @@ ;; `:channel` variant receives colors as hex strings instead of keywords (= (:avatar @state) :channel) - (update :customization-color colors/custom-color 60))] + (assoc :customization-color + (colors/resolve-color (:customization-color @state) nil)))] [rn/view {:style {:margin 12}} [quo/text "URL:"] diff --git a/src/status_im/contexts/preview/quo/wallet/network_routing.cljs b/src/status_im/contexts/preview/quo/wallet/network_routing.cljs index 26d531ade2..35440bd66f 100644 --- a/src/status_im/contexts/preview/quo/wallet/network_routing.cljs +++ b/src/status_im/contexts/preview/quo/wallet/network_routing.cljs @@ -67,7 +67,7 @@ {:style {:flex-direction :row :margin-vertical 12}} [rn/view - {:style {:background-color (colors/custom-color network-name) + {:style {:background-color (colors/resolve-color network-name nil) :width 24 :height 24 :margin-right 12}}]