status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-23 17:29:08 +00:00
Code Issues Projects Releases Wiki Activity

chore: resolve deprecation warnings related to custom-color and touchable-without-feeback (#21874)

Browse Source 
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.
This commit is contained in:
Sean Hagstrom 2025-01-14 04:09:49 -08:00 committed by GitHub
parent c11cf22bbb
commit 457ed15e0b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
55 changed files with 312 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/legacy/status_im/ui/components/button/view.cljs
View File

@ -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

4
src/quo/components/avatars/group_avatar/style.cljs
View File

@ -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]

7
src/quo/components/avatars/wallet_user_avatar/style.cljs
View File

@ -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]

5
src/quo/components/banners/banner/style.cljs
View File

@ -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

2
src/quo/components/banners/banner/view.cljs
View File

@ -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?

4
src/quo/components/browser/browser_input/view.cljs
View File

@ -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]

133
src/quo/components/buttons/button/view.cljs
View File

@ -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}]])]]))

10
src/quo/components/buttons/dynamic_button/view.cljs
View File

@ -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))))

4
src/quo/components/buttons/slide_button/style.cljs
View File

@ -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]

14
src/quo/components/buttons/slide_button/utils.cljs
View File

@ -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]

3
src/quo/components/buttons/slide_button/view.cljs
View File

@ -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)}

4
src/quo/components/colors/color/view.cljs
View File

@ -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)

5
src/quo/components/common/notification_dot/style.cljs
View File

@ -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)))

16
src/quo/components/community/banner/view.cljs
View File

@ -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}]]))

64
src/quo/components/community/community_card_view.cljs
View File

@ -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}]

4
src/quo/components/counter/counter/style.cljs
View File

@ -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)

10
src/quo/components/counter/step/style.cljs
View File

@ -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))))

5
src/quo/components/dividers/strength_divider/view.cljs
View File

@ -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

2
src/quo/components/dropdowns/dropdown/properties.cljs
View File

@ -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})

6
src/quo/components/graph/interactive_graph/view.cljs
View File

@ -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

5
src/quo/components/graph/wallet_graph/view.cljs
View File

@ -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]}]

4
src/quo/components/inputs/address_input/view.cljs
View File

@ -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

6
src/quo/components/inputs/input/style.cljs
View File

@ -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]

2
src/quo/components/inputs/profile_input/style.cljs
View File

@ -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

4
src/quo/components/inputs/recovery_phrase/style.cljs
View File

@ -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]

3
src/quo/components/inputs/title_input/style.cljs
View File

@ -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})

4
src/quo/components/list_items/address/component_spec.cljs
View File

@ -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})])

4
src/quo/components/list_items/address/style.cljs
View File

@ -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

8
src/quo/components/list_items/dapp/style.cljs
View File

@ -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))

4
src/quo/components/list_items/saved_address/style.cljs
View File

@ -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

4
src/quo/components/list_items/saved_contact_address/component_spec.cljs
View File

@ -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

4
src/quo/components/list_items/saved_contact_address/style.cljs
View File

@ -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

4
src/quo/components/messages/gap.cljs
View File

@ -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]]

2
src/quo/components/navigation/bottom_nav_tab/styles.cljs
View File

@ -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

18
src/quo/components/navigation/top_nav/view.cljs
View File

@ -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?

2
src/quo/components/notifications/activity_log/style.cljs
View File

@ -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})

2
src/quo/components/profile/profile_card/style.cljs
View File

@ -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

2
src/quo/components/profile/select_profile/style.cljs
View File

@ -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

46
src/quo/components/selectors/disclaimer/view.cljs
View File

@ -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))}]])]))

2
src/quo/components/selectors/filter/style.cljs
View File

@ -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

14
src/quo/components/selectors/filter/view.cljs
View File

@ -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}]]]))

36
src/quo/components/settings/privacy_option/view.cljs
View File

@ -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}])]))

56
src/quo/components/tabs/tab/view.cljs
View File

@ -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}])]))

21
src/quo/components/tags/base_tag.cljs
View File

@ -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])

10
src/quo/components/tags/context_tag/style.cljs
View File

@ -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

2
src/quo/components/tags/context_tag/view.cljs
View File

@ -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))]

13
src/quo/components/tags/network_tags/style.cljs
View File

@ -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))})

19
src/quo/components/wallet/account_overview/style.cljs
View File

@ -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})

2
src/quo/components/wallet/transaction_progress/view.cljs
View File

@ -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)}

55
src/quo/foundations/colors.cljs
View File

@ -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))

2
src/status_im/contexts/preview/quo/graph/interactive_graph.cljs
View File

@ -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

2
src/status_im/contexts/preview/quo/selectors/react.cljs
View File

@ -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

5
src/status_im/contexts/preview/quo/selectors/react_selector.cljs
View File

@ -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}

3
src/status_im/contexts/preview/quo/share/qr_code.cljs
View File

@ -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:"]

2
src/status_im/contexts/preview/quo/wallet/network_routing.cljs
View File

@ -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}}]