status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

remove custom-color-by-theme method, add resolve-color method (#17567)

This commit is contained in:
Jamie Caprani 2023-10-16 10:20:37 +02:00 committed by GitHub
parent 9078c3b61b
commit dd20d8896f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 363 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/quo2/components/avatars/account_avatar/component_spec.cljs
View File

@ -28,7 +28,7 @@
{:height (:size opts)
:width (:size opts)
:borderRadius (style/get-border-radius (:size opts))
:backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 60)})
:backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
(h/is-truthy (h/query-by-label-text :account-emoji))
(h/has-style (h/query-by-label-text :account-emoji)
{:fontSize (style/get-emoji-size (:size opts))})
@ -47,7 +47,7 @@
:width (:size opts)
:borderRadius (style/get-border-radius (:size opts))
:borderWidth 1
:backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 50 10 10)})
:backgroundColor (colors/resolve-color (:customization-color opts) :light 10)})
(h/is-truthy (h/query-by-label-text :account-emoji))
(h/has-style (h/query-by-label-text :account-emoji)
{:fontSize (style/get-emoji-size (:size opts))})
@ -64,7 +64,7 @@
{:height (:size opts)
:width (:size opts)
:borderRadius (style/get-border-radius (:size opts))
:backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 60)})
:backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
(h/is-truthy (h/query-by-label-text :account-emoji))
(h/has-style (h/query-by-label-text :account-emoji)
{:fontSize (style/get-emoji-size (:size opts))})
@ -83,7 +83,7 @@
:width (:size opts)
:borderRadius (style/get-border-radius (:size opts))
:borderWidth 0.8
:backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 50 10 10)})
:backgroundColor (colors/resolve-color (:customization-color opts) :light 10)})
(h/is-truthy (h/query-by-label-text :account-emoji))
(h/has-style (h/query-by-label-text :account-emoji)
{:fontSize (style/get-emoji-size (:size opts))})

6
src/quo2/components/avatars/account_avatar/style.cljs
View File

@ -63,14 +63,14 @@
(keyword? size) (container-size size))]
(cond-> {:width width
:height width
:background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
:background-color (colors/resolve-color customization-color theme)
:border-radius (get-border-radius size)
:border-color (if (= theme :light) colors/neutral-80-opa-5 colors/white-opa-5)
:border-color (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
:padding (get-padding size)
:align-items :center
:justify-content :center}
watch-only?
(assoc :border-width (get-border-width size)
:background-color (colors/custom-color-by-theme customization-color 50 50 10 10 theme)))))
:background-color (colors/resolve-color customization-color theme 10)))))

8
src/quo2/components/avatars/channel_avatar/style.cljs
View File

@ -4,7 +4,7 @@
(def lock-icon-size 12)
(defn outer-container
[{:keys [size color]}]
[{:keys [size customization-color theme]}]
(let [container-size (case size
:size-64 64
:size-32 32
@ -14,7 +14,7 @@
:border-radius container-size
:justify-content :center
:align-items :center
:background-color (colors/theme-alpha color 0.1 0.1)}))
:background-color (colors/resolve-color customization-color theme 10)}))
(defn emoji-size
[size]
@ -24,12 +24,12 @@
11)})
(defn lock-container
[size]
[size theme]
(let [distance (if (= size :size-32) 20 12)]
{:position :absolute
:left distance
:top distance
:background-color (colors/theme-colors colors/white colors/neutral-95)
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:border-radius (* 2 lock-icon-size)
:padding 2}))

31
src/quo2/components/avatars/channel_avatar/view.cljs
View File

@ -5,15 +5,16 @@
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[utils.string]))
[utils.string]
[quo2.theme :as quo.theme]))
(defn- initials
[full-name size color]
[{:keys [full-name size customization-color theme]}]
(let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
channel-name (string/replace full-name "#" "")]
[text/text
(cond-> {:accessibility-label :initials
:style {:color color}
:style {:color (colors/resolve-color customization-color theme)}
:size :paragraph-2
:weight :semi-bold}
(= size :size-64) (assoc :size :heading-1
@ -21,18 +22,18 @@
(utils.string/get-initials channel-name amount-initials)]))
(defn- lock
[locked? size]
[locked? size theme]
;; When `locked?` is nil, we must not display the unlocked icon.
(when (boolean? locked?)
[rn/view
{:accessibility-label :lock
:style (style/lock-container size)}
:style (style/lock-container size theme)}
[icons/icon (if locked? :i/locked :i/unlocked)
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:container-style style/lock-icon
:size 12}]]))
(defn view
(defn- view-internal
"Options:
:size - keyword (default nil) - Container size, for the moment,
@ -50,14 +51,22 @@
:full-name - string (default nil) - When :emoji is blank, this value will be
used to extract the initials.
"
[{:keys [size emoji customization-color locked? full-name]}]
[{:keys [size emoji customization-color locked? full-name theme]}]
[rn/view
{:accessibility-label :channel-avatar
:style (style/outer-container {:size size :color customization-color})}
:style (style/outer-container {:theme theme
:size size
:customization-color customization-color})}
(if (string/blank? emoji)
[initials full-name size customization-color]
[initials
{:full-name full-name
:size size
:customization-color customization-color
:theme theme}]
[rn/text
{:style (style/emoji-size size)
:accessibility-label :emoji}
(string/trim emoji)])
[lock locked? size]])
[lock locked? size theme]])
(def view (quo.theme/with-theme view-internal))

4
src/quo2/components/avatars/icon_avatar.cljs
View File

@ -19,8 +19,8 @@
:or {opacity 20
size :size-32}}]
(let [{component-size :component icon-size :icon} (get sizes size)
circle-color (colors/custom-color color 50 opacity)
icon-color (colors/custom-color-by-theme color 50 60)]
circle-color (colors/resolve-color color theme opacity)
icon-color (colors/resolve-color color theme)]
[rn/view
{:style {:width component-size
:height component-size

4
src/quo2/components/avatars/user_avatar/style.cljs
View File

@ -62,7 +62,7 @@
:border-radius dimensions
:justify-content :center
:align-items :center
:background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)}))
:background-color (colors/resolve-color customization-color theme)}))
(def indicator-color
{:online colors/success-50
@ -80,7 +80,7 @@
(defn customization-color
[color-id theme]
(colors/custom-color-by-theme color-id 50 60 nil nil theme))
(colors/resolve-color color-id theme))
(def initials-avatar-text
{:color colors/white-opa-70})

19
src/quo2/components/avatars/wallet_user_avatar.cljs
View File

@ -2,7 +2,8 @@
(:require [clojure.string :as string]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]))
[react-native.core :as rn]
[quo2.theme :as quo.theme]))
(def circle-sizes
{:small 20
@ -25,10 +26,10 @@
:size-64 :medium
:x-large :medium})
(defn wallet-user-avatar
"params, first name, last name, color, size
(defn- view-internal
"params, first name, last name, customization-color, size
and if it's dark or not!"
[{:keys [f-name l-name customization-color size monospace? uppercase?]
[{:keys [f-name l-name customization-color size theme monospace? uppercase?]
:or {f-name "John"
l-name "Doe"
size :x-large
@ -42,11 +43,11 @@
(#(if uppercase? (string/upper-case %) %))
(subs 0 1))
circle-color (if customization-color
(colors/custom-color customization-color 50 20)
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
(colors/resolve-color customization-color theme 20)
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))
text-color (if customization-color
(colors/custom-color-by-theme customization-color 50 60)
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70))]
(colors/resolve-color customization-color theme)
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
[rn/view
{:style {:width circle-size
:height circle-size
@ -62,3 +63,5 @@
(if small?
(str f-name-initial)
(str f-name-initial l-name-initial))]]))
(def wallet-user-avatar (quo.theme/with-theme view-internal))

4
src/quo2/components/calendar/calendar_day/style.cljs
View File

@ -50,7 +50,7 @@
(assoc :opacity 0.3)
(= state :selected)
(assoc :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme))))
(assoc :background-color (colors/resolve-color customization-color theme))))
(defn text
[{:keys [state theme]}]
@ -65,5 +65,5 @@
:height 2
:border-radius 8
:background-color (if (= state :today)
(colors/custom-color-by-theme customization-color 50 60 nil nil theme)
(colors/resolve-color customization-color theme)
colors/neutral-100-opa-0)})

40
src/quo2/components/code/common/style.cljs
View File

@ -4,25 +4,25 @@
;; Example themes:
;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
(defn highlight-theme
[theme-key]
(case theme-key
:hljs-comment (colors/theme-colors colors/neutral-40 colors/neutral-60)
:hljs-title (colors/custom-color-by-theme :sky 50 60)
:hljs-keyword (colors/custom-color-by-theme :green 50 60)
:hljs-string (colors/custom-color-by-theme :turquoise 50 60)
:hljs-literal (colors/custom-color-by-theme :turquoise 50 60)
:hljs-number (colors/custom-color-by-theme :turquoise 50 60)
:hljs-symbol (colors/custom-color-by-theme :orange 50 50)
:hljs-builtin-name (colors/custom-color-by-theme :pink 50 50)
[class-name theme]
(case class-name
:hljs-comment (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
:hljs-title (colors/resolve-color :sky theme)
:hljs-keyword (colors/resolve-color :green theme)
:hljs-string (colors/resolve-color :turquoise theme)
:hljs-literal (colors/resolve-color :turquoise theme)
:hljs-number (colors/resolve-color :turquoise theme)
:hljs-symbol (colors/resolve-color :orange theme)
:hljs-builtin-name (colors/resolve-color :pink theme)
:line-number colors/neutral-40
nil))
(defn text-style
[class-names preview?]
[class-names preview? theme]
(let [text-color (->> class-names
(map keyword)
(some (fn [class-name]
(when-let [text-color (highlight-theme class-name)]
(when-let [text-color (highlight-theme class-name theme)]
text-color))))]
(cond-> {:flex-shrink 1
:line-height 18}
@ -30,8 +30,8 @@
text-color (assoc :color text-color))))
(defn border-color
[]
(colors/theme-colors colors/neutral-20 colors/neutral-80))
[theme]
(colors/theme-colors colors/neutral-20 colors/neutral-80 theme))
(defn container
[preview? theme]
@ -43,7 +43,7 @@
{:overflow :hidden
:padding 8
:background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
:border-color (border-color)
:border-color (border-color theme)
:border-width 1
:border-radius 16}))
@ -68,14 +68,14 @@
:background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
(defn divider
[line-number-width]
[line-number-width theme]
{:position :absolute
:bottom 0
:top 0
:left (+ line-number-width 7 7)
:width 1
:z-index 2
:background-color (border-color)})
:background-color (border-color theme)})
(def line {:flex-direction :row})
@ -100,8 +100,4 @@
:right 8
:z-index 1})
(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
(defn button-background-color
[]
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
(defn gradient-color [theme] (colors/theme-colors colors/white colors/neutral-80 theme))

48
src/quo2/components/code/common/view.cljs
View File

@ -10,25 +10,26 @@
[reagent.core :as reagent]))
(defn- render-nodes
[nodes preview?]
[nodes theme preview?]
(map (fn [{:keys [children value last-line?] :as node}]
(if children
(into [text/text
(cond-> {:weight :code
:size :paragraph-2
:style (style/text-style (get-in node [:properties :className]) preview?)}
last-line? (assoc :number-of-lines 1))]
(render-nodes children preview?))
;; Remove newlines as we already render each line separately.
(string/trim-newline value)))
(let [classname (get-in node [:properties :className])]
(if children
(into [text/text
(cond-> {:weight :code
:size :paragraph-2
:style (style/text-style classname preview? theme)}
last-line? (assoc :number-of-lines 1))]
(render-nodes children theme preview?))
;; Remove newlines as we already render each line separately.
(string/trim-newline value))))
nodes))
(defn- line
[{:keys [line-number line-number-width preview?]} children]
[{:keys [line-number line-number-width preview? theme]} children]
[rn/view {:style style/line}
[rn/view {:style (style/line-number line-number-width preview?)}
[text/text
{:style (style/text-style ["line-number"] preview?)
{:style (style/text-style ["line-number"] preview? theme)
:weight :code
:size :paragraph-2}
line-number]]
@ -36,26 +37,27 @@
preview? (conj [rn/view {:style style/line-content}]))])
(defn- code-block
[{:keys [rows line-number-width preview?]}]
[{:keys [rows line-number-width preview? theme]}]
[rn/view
(->> preview?
(render-nodes rows)
(render-nodes rows theme)
(map-indexed (fn [idx row-content]
[line
{:line-number (inc idx)
:line-number-width line-number-width
:preview? preview?}
:preview? preview?
:theme theme}
row-content]))
(into [:<>]))])
(defn- mask-view
[{:keys [apply-mask?]} child]
[{:keys [apply-mask? theme]} child]
(if apply-mask?
[:<>
[rn/view {:style style/gradient-container}
[linear-gradient/linear-gradient
{:style style/gradient
:colors [:transparent (style/gradient-color)]}
:colors [:transparent (style/gradient-color theme)]}
[rn/view {:style style/gradient}]]]
child]
child))
@ -88,13 +90,17 @@
[code-block
{:rows rows-to-show-coll
:line-number-width line-number-width
:preview? preview?}]
:preview? preview?
:theme theme}]
[:<>
[rn/view {:style (style/divider line-number-width)}]
[mask-view {:apply-mask? truncated?}
[rn/view {:style (style/divider line-number-width theme)}]
[mask-view
{:apply-mask? truncated?
:theme theme}
[code-block
{:rows rows-to-show-coll
:line-number-width line-number-width}]]
:line-number-width line-number-width
:theme theme}]]
[rn/view {:style style/copy-button}
[button/button
{:icon-only? true

15
src/quo2/components/dividers/new_messages.cljs
View File

@ -2,13 +2,14 @@
(:require [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.linear-gradient :as linear-gradient]))
[react-native.linear-gradient :as linear-gradient]
[quo2.theme :as quo.theme]))
(defn new-messages
"new-messages params - label, color"
[{:keys [label color] :or {color :primary}}]
(let [bg-color (colors/custom-color-by-theme color 50 60 5 5)
text-color (colors/custom-color-by-theme color 50 60)]
(defn- view-internal
"new-messages params - label, customization-color, theme"
[{:keys [label customization-color theme] :or {customization-color :blue}}]
(let [bg-color (colors/resolve-color customization-color theme 5)
text-color (colors/resolve-color customization-color theme)]
[linear-gradient/linear-gradient
{:colors [bg-color "rgba(0,0,0,0)"]
:start {:x 0 :y 0}
@ -22,3 +23,5 @@
:weight :medium
:style {:color text-color}}
label]]]))
(def view (quo.theme/with-theme view-internal))

3
src/quo2/components/list_items/account_list_card/view.cljs
View File

@ -31,7 +31,8 @@
^{:key (str network)}
[text/text
{:size :paragraph-2
:style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
:style {:color (colors/resolve-color network theme)}}
(str (subs (name network) 0 3) ":")])
networks)
[text/text
{:size :paragraph-2

2
src/quo2/components/list_items/address/view.cljs
View File

@ -24,7 +24,7 @@
[text/text
{:size :paragraph-1
:weight :semi-bold
:style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
:style {:color (colors/resolve-color network)}} (str (subs (name network) 0 3) ":")])
networks)
[text/text
{:size :paragraph-1

5
src/quo2/components/list_items/channel/style.cljs
View File

@ -32,10 +32,7 @@
:align-items :center
:overflow :hidden
:background-color (if pressed?
(colors/theme-colors
(colors/custom-color customization-color 50 5)
(colors/custom-color customization-color 60 5)
theme)
(colors/resolve-color customization-color theme 5)
:transparent)
:flex-direction :row})

2
src/quo2/components/list_items/community/style.cljs
View File

@ -51,7 +51,7 @@
colors/white-opa-5
(and pressed? (#{:engage :share} type))
(colors/theme-alpha customization-color 0.05 0.05)
(colors/resolve-color customization-color theme 5)
(and (not pressed?) (= type :discover) (not blur?))
(colors/theme-colors colors/white colors/neutral-90 theme)

14
src/quo2/components/list_items/token_value/style.cljs
View File

@ -9,7 +9,7 @@
:border-radius 12
:flex-direction :row
:justify-content :space-between
:background-color (colors/custom-color-by-theme color 50 50 bg-opacity bg-opacity theme)})
:background-color (colors/resolve-color color theme bg-opacity)})
(defn metric-text
[status theme]
@ -25,17 +25,13 @@
:border-radius 2
:margin-horizontal 4
:background-color (case status
:positive (colors/theme-colors colors/success-50-opa-40
colors/success-60-opa-40
theme)
:negative (colors/theme-colors colors/danger-50-opa-40
colors/danger-50-opa-40
theme)
:positive (colors/resolve-color :success theme 40)
:negative (colors/resolve-color :danger theme 40)
(colors/theme-colors colors/neutral-80-opa-40 colors/neutral-50-opa-40 theme))})
(defn arrow-icon
[status theme]
{:size 16
:color (if (= status :positive)
(colors/theme-colors colors/success-50 colors/success-60 theme)
(colors/theme-colors colors/danger-50 colors/danger-60 theme))})
(colors/resolve-color :success theme)
(colors/resolve-color :danger theme))})

8
src/quo2/components/record_audio/record_audio/buttons/lock_button.cljs
View File

@ -4,11 +4,13 @@
[quo2.foundations.colors :as colors]
[react-native.reanimated :as reanimated]
[react-native.core :refer [use-effect]]
[quo2.components.record-audio.record-audio.helpers :as helpers]))
[quo2.components.record-audio.record-audio.helpers :as helpers]
[quo2.theme :as quo.theme]))
(defn f-lock-button
[recording? ready-to-lock? locked?]
(let [translate-x-y (reanimated/use-shared-value 20)
(let [theme (quo.theme/use-theme-value)
translate-x-y (reanimated/use-shared-value 20)
opacity (reanimated/use-shared-value 0)
connector-opacity (reanimated/use-shared-value 0)
width (reanimated/use-shared-value 24)
@ -75,5 +77,5 @@
{:style (style/lock-button translate-x-y opacity)
:pointer-events :none}
[icons/icon (if @ready-to-lock? :i/locked :i/unlocked)
{:color (colors/theme-colors colors/black colors/white)
{:color (colors/theme-colors colors/black colors/white theme)
:size 20}]]]))

95
src/quo2/components/selectors/selectors/style.cljs
View File

@ -1,43 +1,46 @@
(ns quo2.components.selectors.selectors.style
(:require [quo2.foundations.colors :as colors]))
(defn toggle-background-color
[custom-color]
{:normal {:checked (colors/custom-color-by-theme custom-color 50 60)
:unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80)}
:blur {:checked (colors/theme-colors (colors/custom-color custom-color 50) colors/white-opa-70)
:unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10)}})
(defn radio-border-color
[customization-color]
{:normal {:checked (colors/custom-color-by-theme customization-color 50 60)
:unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70)}
(defn- toggle-background-color
[customization-color theme]
{:normal {:checked (colors/resolve-color customization-color theme)
:unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)}
:blur {:checked (colors/theme-colors (colors/custom-color customization-color 50)
colors/white)
:unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40)}})
colors/white-opa-70
theme)
:unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}})
(defn radio-background-unchecked-color
[]
{:normal (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)
(defn- radio-border-color
[customization-color theme]
{:normal {:checked (colors/resolve-color customization-color theme)
:unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)}
:blur {:checked (colors/theme-colors (colors/custom-color customization-color 50)
colors/white
theme)
:unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}})
(defn- radio-background-unchecked-color
[theme]
{:normal (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)
:blur colors/white-opa-5})
(defn checkbox-background-color
[customization-color]
{:normal {:checked (colors/custom-color-by-theme customization-color 50 60)
:unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
(defn- checkbox-background-color
[customization-color theme]
{:normal {:checked (colors/resolve-color customization-color theme)
:unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)}
:blur {:checked (colors/theme-colors (colors/custom-color customization-color 50)
colors/white)
:unchecked colors/white-opa-5}})
(defn checkbox-border-unchecked-color
[]
{:normal (colors/theme-colors colors/neutral-30 colors/neutral-70)
:blur (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40)})
(defn- checkbox-border-unchecked-color
[theme]
{:normal (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
:blur (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)})
(defn checkbox-prefill-background-color
[]
{:normal (colors/theme-colors colors/neutral-30 colors/neutral-80)
:blur (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10)})
(defn- checkbox-prefill-background-color
[theme]
{:normal (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)
:blur (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)})
(defn- get-color
[color-map & [blur? checked?]]
@ -47,13 +50,15 @@
(get color-map blur-type))))
(defn toggle
[{:keys [checked? disabled? blur? container-style customization-color]}]
[{:keys [checked? disabled? blur? container-style customization-color theme]}]
(assoc container-style
:height 20
:width 30
:border-radius 20
:opacity (if disabled? 0.3 1)
:background-color (get-color (toggle-background-color customization-color) blur? checked?)))
:background-color (get-color (toggle-background-color customization-color theme)
blur?
checked?)))
(defn toggle-inner
[{:keys [checked?]}]
@ -67,7 +72,7 @@
:margin-bottom :auto})
(defn radio
[{:keys [checked? disabled? blur? container-style customization-color]}]
[{:keys [checked? disabled? blur? container-style customization-color theme]}]
(assoc container-style
:height 20
:width 20
@ -75,29 +80,31 @@
:border-width 1.2
:opacity (if disabled? 0.3 1)
:background-color (when-not checked?
(get-color (radio-background-unchecked-color) blur?))
:border-color (get-color (radio-border-color customization-color) blur? checked?)))
(get-color (radio-background-unchecked-color theme) blur?))
:border-color (get-color (radio-border-color customization-color theme) blur? checked?)))
(defn radio-inner
[{:keys [checked? blur? customization-color]}]
[{:keys [checked? blur? customization-color theme]}]
{:height 14
:width 14
:margin 1.8
:border-radius 7
:background-color (when checked?
(get-color (radio-border-color customization-color) blur? checked?))})
(get-color (radio-border-color customization-color theme) blur? checked?))})
(defn checkbox
[{:keys [checked? disabled? blur? container-style customization-color]}]
[{:keys [checked? disabled? blur? container-style customization-color theme]}]
(assoc container-style
:height 20
:width 20
:border-radius 6
:opacity (if disabled? 0.3 1)
:border-width (if checked? 0 1.2)
:background-color (get-color (checkbox-background-color customization-color) blur? checked?)
:background-color (get-color (checkbox-background-color customization-color theme)
blur?
checked?)
:border-color (when-not checked?
(get-color (checkbox-border-unchecked-color) blur?))))
(get-color (checkbox-border-unchecked-color theme) blur?))))
(defn common-checkbox-inner
[{:keys [checked?]}]
@ -105,23 +112,23 @@
{:height size :width size}))
(defn checkbox-check
[_checked? blur?]
[_checked? blur? theme]
{:size 20
:color (if blur?
(colors/theme-colors colors/white colors/neutral-100)
(colors/theme-colors colors/white colors/neutral-100 theme)
colors/white)})
(defn checkbox-prefill
[{:keys [disabled? blur? container-style]}]
[{:keys [disabled? blur? container-style theme]}]
(assoc container-style
:height 21
:width 21
:border-radius 6
:opacity (if disabled? 0.3 1)
:background-color (get-color (checkbox-prefill-background-color) blur?)))
:background-color (get-color (checkbox-prefill-background-color theme) blur?)))
(defn checkbox-prefill-check
[checked? _blur?]
[checked? _blur? theme]
{:size 20
:color (when checked? (colors/theme-colors colors/neutral-100 colors/white))})
:color (when checked? (colors/theme-colors colors/neutral-100 colors/white theme))})

18
src/quo2/components/selectors/selectors/view.cljs
View File

@ -2,20 +2,21 @@
(:require [quo2.components.icon :as icons]
[quo2.components.selectors.selectors.style :as style]
[react-native.core :as rn]
[reagent.core :as reagent]))
[reagent.core :as reagent]
[quo2.theme :as quo.theme]))
(defn- handle-press
[on-change checked-atom checked?]
(when checked-atom (swap! checked-atom not))
(when on-change (on-change (not checked?))))
(defn- selector
(defn- selector-internal
[{:keys [default-checked? checked?]}]
(let [controlled-component? (some? checked?)
internal-checked? (when-not controlled-component?
(reagent/atom (or default-checked? false)))]
(fn [{:keys [checked? disabled? blur? customization-color on-change container-style
label-prefix outer-style-fn inner-style-fn icon-style-fn]
label-prefix outer-style-fn inner-style-fn icon-style-fn theme]
:or {customization-color :blue}}]
(let [actual-checked? (if controlled-component? checked? @internal-checked?)
accessibility-label (str label-prefix "-" (if actual-checked? "on" "off"))
@ -24,7 +25,8 @@
:disabled? disabled?
:blur? blur?
:container-style container-style
:customization-color customization-color})]
:customization-color customization-color
:theme theme})]
[rn/touchable-without-feedback
(when-not disabled?
{:on-press #(handle-press on-change internal-checked? actual-checked?)})
@ -35,11 +37,14 @@
:accessibility-role :checkbox
:testID test-id}
[rn/view
{:style (inner-style-fn {:checked? actual-checked?
{:style (inner-style-fn {:theme theme
:checked? actual-checked?
:blur? blur?
:customization-color customization-color})}
(when (and icon-style-fn actual-checked?)
[icons/icon :i/check-small (icon-style-fn actual-checked? blur?)])]]]))))
[icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]]))))
(def ^:private selector (quo.theme/with-theme selector-internal))
(defn toggle
[props]
@ -74,3 +79,4 @@
:outer-style-fn style/checkbox-prefill
:inner-style-fn style/common-checkbox-inner
:icon-style-fn style/checkbox-prefill-check)])

27
src/quo2/components/settings/accounts/style.cljs
View File

@ -9,19 +9,17 @@
:width 160})
(defn background-top
[custom-color]
[custom-color theme]
{:position :absolute
:top 0
:border-top-left-radius 16
:border-top-right-radius 16
:width 160
:height 64
:background-color (-> colors/customization
(get-in [custom-color 50])
(colors/alpha 0.2))})
:background-color (colors/resolve-color custom-color theme 20)})
(defn background-bottom
[]
[theme]
{:position :absolute
:top 40
:border-radius 16
@ -29,10 +27,11 @@
:height 120
:background-color (colors/theme-colors
colors/white
colors/neutral-90)})
colors/neutral-90
theme)})
(defn avatar-border
[]
[theme]
{:margin 2
:justify-content :center
:align-items :center
@ -42,23 +41,27 @@
:border-width 2
:border-color (colors/theme-colors
colors/white
colors/neutral-90)})
colors/neutral-90
theme)})
(def menu-button-container
{:justify-content :center
:align-items :center
:align-self :flex-start})
(defn menu-button-color
[]
[theme]
{:background-color (colors/theme-colors
colors/white-opa-40
colors/neutral-80-opa-40)})
colors/neutral-80-opa-40
theme)})
(defn address-text
[]
[theme]
{:color (colors/theme-colors
colors/neutral-50
colors/neutral-40)})
colors/neutral-40
theme)})
(def card-top
{:flex-direction :row

41
src/quo2/components/settings/accounts/view.cljs
View File

@ -3,44 +3,55 @@
[quo2.components.buttons.button.view :as button]
[quo2.components.markdown.text :as text]
[quo2.components.settings.accounts.style :as style]
[react-native.core :as rn]))
[react-native.core :as rn]
[quo2.theme :as quo.theme]))
(defn card-background
[{:keys [customization-color]}]
[{:keys [customization-color theme]}]
[:<>
[rn/view {:style (style/background-top customization-color)}]
[rn/view {:style (style/background-bottom)}]])
[rn/view {:style (style/background-top customization-color theme)}]
[rn/view {:style (style/background-bottom theme)}]])
(defn avatar
[avatar-props]
[rn/view {:style (style/avatar-border)}
[avatar-props theme]
[rn/view {:style (style/avatar-border theme)}
[account-avatar/view (assoc avatar-props :size 48)]])
(defn menu-button
[{:keys [on-press]}]
[{:keys [on-press theme]}]
[rn/view {:style style/menu-button-container}
[button/button
{:container-style (style/menu-button-color)
{:container-style (style/menu-button-color theme)
:type :grey
:icon-only? true
:size 24
:on-press on-press}
:i/more]])
(defn account
[{:keys [account-name account-address avatar-icon customization-color on-press-menu]}]
(defn- account-internal
[{:keys [account-name account-address avatar-icon
customization-color on-press-menu theme]}]
[rn/view {:style style/card}
[card-background {:customization-color customization-color}]
[card-background
{:customization-color customization-color
:theme theme}]
[rn/view {:style style/card-top}
[avatar
{:color customization-color
:icon avatar-icon}]
[menu-button {:on-press on-press-menu}]]
:icon avatar-icon}
theme]
[menu-button
{:on-press on-press-menu
:theme theme}]]
[rn/view {:style style/card-bottom}
[text/text {:size :paragraph-1 :weight :semi-bold}
[text/text
{:size :paragraph-1
:weight :semi-bold}
account-name]
[text/text
{:style (style/address-text)
{:style (style/address-text theme)
:size :paragraph-2
:weight :medium}
account-address]]])
(def account (quo.theme/with-theme account-internal))

2
src/quo2/components/wallet/keypair/view.cljs
View File

@ -78,7 +78,7 @@
{:size 16
:color (if blur?
colors/white-opa-40
(colors/theme-colors colors/neutral-50 colors/neutral-40))}]])]))
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]))
(defn- view-internal
[]

4
src/quo2/components/wallet/network_bridge/style.cljs
View File

@ -2,14 +2,14 @@
(:require [quo2.foundations.colors :as colors]))
(defn container
[network state]
[network state theme]
{:width 136
:height 44
:border-width 1
:border-radius 12
:padding-vertical 5
:padding-horizontal 8
:border-color (get colors/networks network)
:border-color (colors/resolve-color network theme)
:opacity (when (= state :disabled) 0.3)})
(defn add-container

4
src/quo2/components/wallet/network_bridge/view.cljs
View File

@ -12,7 +12,7 @@
(defn network-bridge-add
[{:keys [network state theme]}]
[rn/view {:style (merge (style/container network state) (style/add-container theme))}
[rn/view {:style (merge (style/container network state theme) (style/add-container theme))}
[icon/icon :i/add-circle {:size 12 :no-color true}]])
(defn view-internal
@ -21,7 +21,7 @@
(if (= status :add)
[network-bridge-add args]
[rn/view
{:style (style/container network status)
{:style (style/container network status theme)
:accessible true
:accessibility-label :container}
(if (= status :loading)

22
src/quo2/components/wallet/network_link/view.cljs
View File

@ -7,19 +7,19 @@
(defn link-linear
[{:keys [source theme]}]
[svg/svg {:xmlns "http://www.w3.org/2000/svg" :width "73" :height "10" :fill :none}
[svg/path {:stroke (get colors/networks source) :d "M68 5H5"}]
[svg/path {:stroke (colors/resolve-color source theme) :d "M68 5H5"}]
[svg/circle
{:cx "68"
:cy "5"
:r "4"
:fill (colors/theme-colors colors/white colors/neutral-90 theme)
:stroke (get colors/networks source)}]
:stroke (colors/resolve-color source theme)}]
[svg/circle
{:cx "5"
:cy "5"
:r "4"
:fill (colors/theme-colors colors/white colors/neutral-90 theme)
:stroke (get colors/networks source)}]])
:stroke (colors/resolve-color source theme)}]])
(defn link-1x
[{:keys [source destination theme]}]
@ -31,18 +31,18 @@
:cy "5"
:r "4"
:fill (colors/theme-colors colors/white colors/neutral-90 theme)
:stroke (get colors/networks destination)}]
:stroke (colors/resolve-color destination theme)}]
[svg/circle
{:cx "5"
:cy "61"
:r "4"
:fill (colors/theme-colors colors/white colors/neutral-90 theme)
:stroke (get colors/networks source)}]
:stroke (colors/resolve-color source theme)}]
[svg/defs
[svg/linear-gradient
{:id "gradient" :x1 "72.271" :x2 "82.385" :y1 "5" :y2 "34.155" :gradientUnits "userSpaceOnUse"}
[svg/stop {:stopColor (get colors/networks destination)}]
[svg/stop {:offset "1" :stopColor (get colors/networks source)}]]]])
[svg/stop {:stopColor (colors/resolve-color destination theme)}]
[svg/stop {:offset "1" :stopColor (colors/resolve-color source theme)}]]]])
(defn link-2x
[{:keys [source destination theme]}]
@ -57,13 +57,13 @@
:cy "5"
:r "4"
:fill (colors/theme-colors colors/white colors/neutral-90 theme)
:stroke (get colors/networks destination)}]
:stroke (colors/resolve-color destination theme)}]
[svg/circle
{:cx "5"
:cy "117"
:r "4"
:fill (colors/theme-colors colors/white colors/neutral-90 theme)
:stroke (get colors/networks source)}]
:stroke (colors/resolve-color source theme)}]
[svg/defs
[svg/linear-gradient
{:id "gradient"
@ -72,8 +72,8 @@
:x2 "102.867"
:y2 "49.0993"
:gradientUnits "userSpaceOnUse"}
[svg/stop {:stop-color (get colors/networks destination)}]
[svg/stop {:offset "1" :stop-color (get colors/networks source)}]]]])
[svg/stop {:stop-color (colors/resolve-color destination theme)}]
[svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]])
(defn- view-internal
[{:keys [shape] :as props}]

2
src/quo2/core.cljs
View File

@ -210,7 +210,7 @@
;;;; Dividers
(def divider-label quo2.components.dividers.divider-label.view/view)
(def divider-line quo2.components.dividers.divider-line.view/view)
(def new-messages quo2.components.dividers.new-messages/new-messages)
(def new-messages quo2.components.dividers.new-messages/view)
(def divider-date quo2.components.dividers.date/date)
(def strength-divider quo2.components.dividers.strength-divider.view/view)

57
src/quo2/foundations/colors.cljs
View File

@ -223,8 +223,7 @@
60 "#BD1E56"}})
;;;; Networks
(def networks
(def ^:private networks
{:ethereum "#758EEB"
:optimism "#E76E6E"
:arbitrum "#6BD5F0"
@ -234,8 +233,8 @@
:polygon "#AD71F3"
:unknown "#EEF2F5"})
(def colors-map
(merge {:primary {50 primary-50 ;; User can also use primary color as customisation color
(def ^:private colors-map
(merge {:primary {50 primary-50
60 primary-60}
:beige {50 "#CAAE93"
60 "#AA927C"}
@ -245,8 +244,6 @@
60 "#805141"}
:red {50 "#F46666"
60 "#CD5656"}
:magenta {50 "#EC266C"
60 "#BD1E56"}
:indigo {50 "#496289"
60 "#3D5273"}
:danger {50 danger-50
@ -260,7 +257,34 @@
[s]
(and (string? s) (string/starts-with? s "#")))
(def custom-color
(defn- get-from-colors-map
[color suffix]
(let [color-without-suffix (get colors-map color)
resolved-color? (hex-string? color-without-suffix)]
(if resolved-color?
color-without-suffix
(get-in colors-map [color suffix]))))
(defn- resolve-color*
"(resolve-color color theme opacity)
color hex string or keyword (resolves from custom, network and semantic colors)
theme :light/:dark
opacity 0-100 (optional) - if set theme is ignored and goes to 50 suffix internally"
([color theme]
(resolve-color* color theme nil))
([color theme opacity]
(let [suffix (cond
(not (keyword? color)) nil
(or opacity (= theme :light)) 50
:else 60)]
(cond-> color
suffix (get-from-colors-map suffix)
opacity (alpha (/ opacity 100))))))
(def resolve-color (memoize resolve-color*))
(def ^{:deprecated true :superseded-by "resolve-color"}
custom-color
"(custom-color color suffix opacity)
color :primary/:purple/...
suffix 50/60
@ -281,25 +305,6 @@
(alpha resolved-color (/ opacity 100))
resolved-color))))))
(defn custom-color-by-theme
"(custom-color-by-theme color suffix-light suffix-dark opacity-light opacity-dark)
color :primary/:purple/...
suffix-light 50/60
suffix-dark 50/60
opacity-light 0-100 (optional)
opacity-dark 0-100 (optional)
theme :light/:dark (optional)"
{:deprecated true :superseded-by "theme/colors"}
([color suffix-light suffix-dark]
(custom-color-by-theme color suffix-light suffix-dark nil nil (theme/get-theme)))
([color suffix-light suffix-dark opacity-light opacity-dark]
(custom-color-by-theme color suffix-light suffix-dark opacity-light opacity-dark (theme/get-theme)))
([color suffix-light suffix-dark opacity-light opacity-dark theme]
(if (= theme :dark)
(custom-color color suffix-dark opacity-dark)
(custom-color color suffix-light opacity-light))))
(def shadow "rgba(9,16,28,0.08)")
;;General

43
src/quo2/foundations/colors_test.cljs
View File

@ -2,26 +2,29 @@
(:require [cljs.test :refer-macros [deftest testing is]]
[quo2.foundations.colors :as colors]))
(deftest custom-color-resolver-test
(testing "community color - resolves a hex string and ignores suffix of 50"
(is (= "#fff" (colors/custom-color "#fff" 50))))
(testing "community color - resolves a hex string and ignores suffix of 60"
(is (= "#fff" (colors/custom-color "#fff" 60))))
(testing "user/wallet/chat colors - resolves a keyword from the customization map with suffix 50"
(is (= (get-in colors/customization [:blue 50]) (colors/custom-color :blue 50))))
(testing "user/wallet/chat colors - resolves a keyword from the colors map with suffix 60"
(is (= (get-in colors/customization [:blue 60]) (colors/custom-color :blue 60))))
(testing "network colors - resolves a keyword with from the networks map which has no suffix"
(is (= (:ethereum colors/networks) (colors/custom-color :ethereum nil)))))
(deftest resolve-color-test
(testing "community color - resolves a hex string and ignores theme"
(is (= "#fff" (colors/resolve-color "#fff" :light))))
(testing "community color - resolves a hex string and ignores theme"
(is (= "#fff" (colors/resolve-color "#fff" :dark))))
(testing "user/wallet/chat colors - resolves a keyword from the customization map with light theme"
(is (= "#2A4AF5" (colors/resolve-color :blue :light))))
(testing "user/wallet/chat colors - resolves a keyword from the colors map with dark theme"
(is (= "#223BC4" (colors/resolve-color :blue :dark))))
(testing "network colors - resolves a keyword with from the networks map"
(is (= "#758EEB" (colors/resolve-color :ethereum :light)))))
(deftest custom-color-resolver-with-opacity-test
(testing "community color with 10% opacity- resolves a hex string and ignores suffix of 50"
(is (= "rgba(255,15,NaN,0.1)" (colors/custom-color "#fff" 50 10))))
(testing "community color with 10% opacity- resolves a hex string and ignores suffix of 50"
(is (= "rgba(255,15,NaN,0.9)" (colors/custom-color "#fff" 50 90))))
(deftest resolve-color-with-opacity-test
(testing "community color with 10% opacity- resolves a hex string and ignores theme"
(is (= "rgba(255,15,NaN,0.1)" (colors/resolve-color "#fff" :light 10))))
(testing "community color with 10% opacity- resolves a hex string and ignores theme"
(is (= "rgba(255,15,NaN,0.9)" (colors/resolve-color "#fff" :light 90))))
(testing
"user/wallet/chat colors with 10% opacity - resolves a keyword from the colors map with suffix 50"
(is (= "rgba(42,74,245,0.1)" (colors/custom-color :blue 50 10))))
"user/wallet/chat colors with 10% opacity - resolves a keyword from the colors map with light theme"
(is (= "rgba(42,74,245,0.1)" (colors/resolve-color :blue :light 10))))
(testing
"network colors with 10% opacity - resolves a keyword with from the networks map which has no suffix"
(is (= "rgba(117,142,235,0.1)" (colors/custom-color :ethereum nil 10)))))
"user/wallet/chat colors with 10% opacity - resolves a keyword from the colors map with dark theme"
(is (= "rgba(42,74,245,0.1)" (colors/resolve-color :blue :dark 10))))
(testing
"when using opacity theme is ignored and uses the light suffix resolver"
(is (colors/resolve-color :blue :light 10) (colors/resolve-color :blue :dark 10))))

16
src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.avatars.channel-avatar
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -29,14 +28,13 @@
:full-name "Some channel"
:customization-color :blue})]
(fn []
(let [customization-color (colors/custom-color-by-theme (:customization-color @state) 50 60)
locked? (case (:locked-state @state)
:not-set nil
:unlocked false
:locked true
nil)]
(let [locked? (case (:locked-state @state)
:not-set nil
:unlocked false
:locked true
nil)]
[preview/preview-container {:state state :descriptor descriptor}
[quo/channel-avatar
(assoc @state
:locked? locked?
:customization-color customization-color)]]))))
:locked?
locked?)]]))))

14
src/status_im2/contexts/quo_preview/common.cljs
View File

@ -1,25 +1,27 @@
(ns status-im2.contexts.quo-preview.common
(:require
[quo2.core :as quo]
[quo2.theme :as theme]
[quo2.theme :as quo.theme]
[utils.re-frame :as rf]))
(defn navigation-bar
[]
(defn- view-internal
[{:keys [theme]}]
(let [logged-in? (rf/sub [:multiaccount/logged-in?])
has-profiles? (boolean (rf/sub [:profile/profiles-overview]))
root (if has-profiles? :profiles :intro)
light? (= (theme/get-theme) :light)]
light? (= theme :light)]
[quo/page-nav
{:type :title
:title "Quo2 components preview"
:text-align :left
:icon-name :i/close
:right-side [{:icon-name (if light? :i/dark :i/light)
:on-press #(if light? (theme/set-theme :dark) (theme/set-theme :light))}]
:on-press #(if light? (quo.theme/set-theme :dark) (quo.theme/set-theme :light))}]
:on-press #(if (or logged-in? (not= (rf/sub [:view-id]) :quo2-preview))
(rf/dispatch [:navigate-back])
(do
(theme/set-theme :dark)
(quo.theme/set-theme :dark)
(rf/dispatch [:init-root root])))}]))
(def navigation-bar (quo.theme/with-theme view-internal))

15
src/status_im2/contexts/quo_preview/dividers/new_messages.cljs
View File

@ -6,20 +6,7 @@
(def descriptor
[{:key :label
:type :text}
{:key :color
:type :select
:options [{:key :primary}
{:key :purple}
{:key :indigo}
{:key :turquoise}
{:key :blue}
{:key :green}
{:key :yellow}
{:key :orange}
{:key :red}
{:key :pink}
{:key :brown}
{:key :beige}]}])
(preview/customization-color-option)])
(defn view
[]

12
src/status_im2/contexts/quo_preview/list_items/channel.cljs
View File

@ -1,8 +1,7 @@
(ns status-im2.contexts.quo-preview.list-items.channel
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[quo2.foundations.colors :as colors]))
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:key :name
@ -40,8 +39,7 @@
:customization-color :blue
:locked? nil})]
(fn []
(let [customization-color (colors/custom-color-by-theme (:customization-color @state) 50 60)]
[preview/preview-container
{:state state
:descriptor descriptor}
[quo/channel (assoc @state :customization-color customization-color)]]))))
[preview/preview-container
{:state state
:descriptor descriptor}
[quo/channel @state]])))

27
src/status_im2/contexts/quo_preview/list_items/community_list.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.list-items.community-list
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
@ -94,17 +93,15 @@
:active-count 112100
:unread-count 5})]
(fn []
(let [customization-color (colors/custom-color-by-theme (:customization-color @state) 50 60)]
[preview/preview-container {:state state :descriptor (descriptors @state)}
[quo/community-list-item
(merge @state
{:container-style {:width 335}
:logo (resources/get-mock-image :status-logo)
:tokens (:tokens data/community)
:customization-color customization-color
:on-press #(js/alert "List item pressed")
:on-long-press #(js/alert "Long pressed item")
:on-press-info #(js/alert "Info pressed")
:members (when (:members? @state)
{:members-count (:members-count @state)
:active-count (:active-count @state)})})]]))))
[preview/preview-container {:state state :descriptor (descriptors @state)}
[quo/community-list-item
(merge @state
{:container-style {:width 335}
:logo (resources/get-mock-image :status-logo)
:tokens (:tokens data/community)
:on-press #(js/alert "List item pressed")
:on-long-press #(js/alert "Long pressed item")
:on-press-info #(js/alert "Info pressed")
:members (when (:members? @state)
{:members-count (:members-count @state)
:active-count (:active-count @state)})})]])))

72
src/status_im2/contexts/quo_preview/preview.cljs
View File

@ -282,7 +282,7 @@
opts)))
(defn blur-view
[{:keys [show-blur-background? image height blur-view-props style]} & children]
[{:keys [show-blur-background? image height blur-view-props style theme]} & children]
[rn/view
{:style {:flex 1
:padding-vertical 16}}
@ -301,7 +301,7 @@
:left 0
:right 0}
:blur-amount 10
:overlay-color (colors/theme-colors colors/white-opa-70 colors/neutral-80-opa-80)}
:overlay-color (colors/theme-colors colors/white-opa-70 colors/neutral-80-opa-80 theme)}
blur-view-props)]])
(into [rn/view
{:style (merge {:position :absolute
@ -316,39 +316,41 @@
blur-container-style blur-view-props blur-height show-blur-background?]
:or {blur-height 200}}
& children]
(rn/use-effect (fn []
(when blur-dark-only?
(if blur?
(quo.theme/set-theme :dark)
(quo.theme/set-theme :light))))
[blur? blur-dark-only?])
[rn/view
{:style {:top (safe-area/get-top)
:flex 1}}
[common/navigation-bar]
[rn/scroll-view
{:style (style/panel-basic)
:shows-vertical-scroll-indicator false}
[rn/pressable {:on-press rn/dismiss-keyboard!}
(when descriptor
[rn/view {:style style/customizer-container}
[customizer state descriptor]])
(if blur?
[rn/view {:style (merge style/component-container component-container-style)}
(into [blur-view
{:show-blur-background? show-blur-background?
:height blur-height
:style (merge {:width "100%"
:flex-grow 1}
(when-not show-blur-background?
{:padding-horizontal 0
:top 0})
blur-container-style)
:blur-view-props (merge {:blur-type (quo.theme/get-theme)}
blur-view-props)}]
children)]
(into [rn/view {:style (merge style/component-container component-container-style)}]
children))]]])
(let [theme (quo2.theme/use-theme-value)]
(rn/use-effect (fn []
(when blur-dark-only?
(if blur?
(quo.theme/set-theme :dark)
(quo.theme/set-theme :light))))
[blur? blur-dark-only?])
[rn/view
{:style {:top (safe-area/get-top)
:flex 1}}
[common/navigation-bar]
[rn/scroll-view
{:style (style/panel-basic)
:shows-vertical-scroll-indicator false}
[rn/pressable {:on-press rn/dismiss-keyboard!}
(when descriptor
[rn/view {:style style/customizer-container}
[customizer state descriptor]])
(if blur?
[rn/view {:style (merge style/component-container component-container-style)}
(into [blur-view
{:theme theme
:show-blur-background? show-blur-background?
:height blur-height
:style (merge {:width "100%"
:flex-grow 1}
(when-not show-blur-background?
{:padding-horizontal 0
:top 0})
blur-container-style)
:blur-view-props (merge {:blur-type theme}
blur-view-props)}]
children)]
(into [rn/view {:style (merge style/component-container component-container-style)}]
children))]]]))
(defn preview-container
[& args]

3
src/status_im2/contexts/wallet/common/temp.cljs
View File

@ -4,7 +4,6 @@
[quo2.core :as quo]
[quo2.foundations.resources :as quo.resources]
[react-native.core :as rn]
[status-im2.common.resources :as resources]
[status-im2.constants :as constants]
[status-im2.contexts.wallet.common.utils :as utils]
[utils.i18n :as i18n]
@ -160,7 +159,7 @@
(def account-origin-state
{:type :default-keypair
:stored :on-keycard
:profile-picture (resources/get-mock-image :user-picture-male5)
:profile-picture (status.resources/get-mock-image :user-picture-male5)
:derivation-path (string/replace constants/path-default-wallet #"/" " / ")
:user-name "Alisher Yakupov"
:on-press #(js/alert "pressed")})