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

fix quo2 colors (#14006)

This commit is contained in:
Parvesh Monu 2022-09-19 14:34:45 +05:30 committed by GitHub
parent 6c135e2570
commit 552c85d6c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 163 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/quo2/components/avatars/avatar_themes.cljs
View File

@ -1,51 +0,0 @@
(ns quo2.components.avatars.avatar-themes
(:require [quo2.foundations.colors :as colors]))
(def themes {:light {:primary {:icon-color colors/primary-50
:background-color colors/primary-20}
:purple {:icon-color colors/purple-50
:background-color colors/purple-20}
:indigo {:icon-color colors/indigo-50
:background-color colors/indigo-20}
:turquoise {:icon-color colors/turquoise-50
:background-color colors/turquoise-20}
:blue {:icon-color colors/blue-50
:background-color colors/blue-20}
:green {:icon-color colors/green-50
:background-color colors/green-20}
:yellow {:icon-color colors/yellow-50
:background-color colors/yellow-20}
:orange {:icon-color colors/orange-50
:background-color colors/orange-20}
:red {:icon-color colors/red-50
:background-color colors/red-20}
:pink {:icon-color colors/pink-50
:background-color colors/pink-20}
:brown {:icon-color colors/brown-50
:background-color colors/brown-20}
:beige {:icon-color colors/beige-50
:background-color colors/beige-20}}
:dark {:primary {:icon-color colors/primary-60
:background-color colors/primary-50-opa-20}
:purple {:icon-color colors/purple-60
:background-color colors/purple-20}
:indigo {:icon-color colors/indigo-60
:background-color colors/indigo-20}
:turquoise {:icon-color colors/turquoise-60
:background-color colors/turquoise-20}
:blue {:icon-color colors/blue-60
:background-color colors/blue-20}
:green {:icon-color colors/green-60
:background-color colors/green-20}
:yellow {:icon-color colors/yellow-60
:background-color colors/yellow-20}
:orange {:icon-color colors/orange-60
:background-color colors/orange-20}
:red {:icon-color colors/red-60
:background-color colors/red-20}
:pink {:icon-color colors/pink-60
:background-color colors/pink-20}
:brown {:icon-color colors/brown-60
:background-color colors/brown-20}
:beige {:icon-color colors/beige-60
:background-color colors/beige-20}}})

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

@ -1,6 +1,5 @@
(ns quo2.components.avatars.group-avatar
(:require [quo2.foundations.colors :as colors]
[quo.theme :as quo.theme]
[quo2.components.icon :as icon]
[quo.react-native :as rn]))
@ -14,14 +13,16 @@
(defn group-avatar [_]
(fn [{:keys [color size override-theme]}]
(let [theme (or override-theme (quo.theme/get-theme))
(let [theme (or override-theme (if (colors/dark?) :dark :light))
container-size (get-in sizes [:container size])
icon-size (get-in sizes [:icon size])]
[rn/view {:width container-size
:height container-size
:align-items :center
:justify-content :center
:border-radius (/ container-size 2)
:background-color (colors/custom-color color theme)}
icon-size (get-in sizes [:icon size])]
[rn/view {:width container-size
:height container-size
:align-items :center
:justify-content :center
:border-radius (/ container-size 2)
:background-color (if (= theme :light)
(colors/custom-color color 50)
(colors/custom-color color 60))}
[icon/icon :total-members {:size icon-size
:color colors/white-opa-70}]])))

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

@ -1,7 +1,6 @@
(ns quo2.components.avatars.icon-avatar
(:require [quo.react-native :as rn]
[quo.theme :as theme]
[quo2.components.avatars.avatar-themes :refer [themes]]
[quo2.foundations.colors :as colors]
[status-im.ui.components.icons.icons :as icons]))
(def sizes
@ -12,19 +11,18 @@
(defn icon-avatar
[{:keys [size icon color]}]
(let [component-size (size sizes)
theme (theme/get-theme)
circle-color (get-in themes [theme color :background-color])
icon-color (get-in themes [theme color :icon-color])
icon-size (case size
:big 20
:medium 16
:small 12)]
[rn/view {:style {:width component-size
:height component-size
:border-radius component-size
circle-color (colors/custom-color color 50 20)
icon-color (colors/custom-color-by-theme color 50 60)
icon-size (case size
:big 20
:medium 16
:small 12)]
[rn/view {:style {:width component-size
:height component-size
:border-radius component-size
:background-color circle-color
:justify-content :center
:align-items :center}}
:justify-content :center
:align-items :center}}
[icons/icon icon {:container-style {:width icon-size
:height icon-size}
:color icon-color}]]))

15
src/quo2/components/avatars/user_avatar.cljs
View File

@ -82,14 +82,11 @@
:border-radius inner-dimensions})
(defn container [inner-dimensions outer-dimensions & children]
(let [dark-kw (if dark? :dark :light)]
[rn/view {:style (merge {:background-color (colors/custom-color
:turquoise
dark-kw)
:justify-content :center
:align-items :center}
(container-styling inner-dimensions outer-dimensions))}
children]))
[rn/view {:style (merge {:background-color (colors/custom-color-by-theme :turquoise 50 60)
:justify-content :center
:align-items :center}
(container-styling inner-dimensions outer-dimensions))}
children])
(def small-sizes #{:xs :xxs :xxxs})
(def identicon-sizes #{:big :medium :small})
@ -144,4 +141,4 @@
:size font-size
:style {:color colors/white-opa-70}}
(upper-case icon-text)]])
[dot-indicator size status-indicator? online? ring? (dark?)]]))
[dot-indicator size status-indicator? online? ring? (dark?)]]))

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

@ -4,55 +4,6 @@
[quo2.components.markdown.text :as text]
[clojure.string :as clojure-string]))
(def themes {:light {:primary {:text-color colors/primary-50
:background-color colors/primary-20}
:purple {:text-color colors/purple-50
:background-color colors/purple-20}
:indigo {:text-color colors/indigo-50
:background-color colors/indigo-20}
:turquoise {:text-color colors/turquoise-50
:background-color colors/turquoise-20}
:blue {:text-color colors/blue-50
:background-color colors/blue-20}
:green {:text-color colors/green-50
:background-color colors/green-20}
:yellow {:text-color colors/yellow-50
:background-color colors/yellow-20}
:orange {:text-color colors/orange-50
:background-color colors/orange-20}
:red {:text-color colors/red-50
:background-color colors/red-20}
:pink {:text-color colors/pink-50
:background-color colors/pink-20}
:brown {:text-color colors/brown-50
:background-color colors/brown-20}
:beige {:text-color colors/beige-50
:background-color colors/beige-20}}
:dark {:primary {:text-color colors/primary-60
:background-color colors/primary-50-opa-20}
:purple {:text-color colors/purple-60
:background-color colors/purple-20}
:indigo {:text-color colors/indigo-60
:background-color colors/indigo-20}
:turquoise {:text-color colors/turquoise-60
:background-color colors/turquoise-20}
:blue {:text-color colors/blue-60
:background-color colors/blue-20}
:green {:text-color colors/green-60
:background-color colors/green-20}
:yellow {:text-color colors/yellow-60
:background-color colors/yellow-20}
:orange {:text-color colors/orange-60
:background-color colors/orange-20}
:red {:text-color colors/red-60
:background-color colors/red-20}
:pink {:text-color colors/pink-60
:background-color colors/pink-20}
:brown {:text-color colors/brown-60
:background-color colors/brown-20}
:beige {:text-color colors/beige-60
:background-color colors/beige-20}}})
(def circle-sizes {:small 20
:medium 32
:large 48
@ -75,18 +26,16 @@
l-name "Doe"
color :red
size :x-large}}]
(let [circle-size (size circle-sizes)
dark? (colors/dark?)
small? (= size :small)
(let [circle-size (size circle-sizes)
small? (= size :small)
f-name-initial (-> f-name
clojure-string/upper-case
(subs 0 1))
l-name-initial (-> l-name
clojure-string/upper-case
(subs 0 1))
theme (if dark? :dark :light)
circle-color (get-in themes [theme color :background-color])
text-color (get-in themes [theme color :text-color])]
circle-color (colors/custom-color color 50 20)
text-color (colors/custom-color-by-theme color 50 60)]
[rn/view {:style {:width circle-size
:height circle-size
:border-radius circle-size
@ -99,4 +48,4 @@
:style {:color text-color}}
(if small?
(str f-name-initial)
(str f-name-initial l-name-initial))]]))
(str f-name-initial l-name-initial))]]))

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

@ -5,70 +5,19 @@
[status-im.i18n.i18n :as i18n]
[status-im.ui.components.react :as react]))
(def themes
{:light {:primary {:text-color colors/primary-50
:background-color colors/primary-50-opa-5}
:purple {:text-color colors/purple-50
:background-color colors/purple-50-opa-5}
:indigo {:text-color colors/indigo-50
:background-color colors/indigo-50-opa-5}
:turquoise {:text-color colors/turquoise-50
:background-color colors/turquoise-50-opa-5}
:blue {:text-color colors/blue-50
:background-color colors/blue-50-opa-5}
:green {:text-color colors/green-50
:background-color colors/green-50-opa-5}
:yellow {:text-color colors/yellow-50
:background-color colors/yellow-50-opa-5}
:orange {:text-color colors/orange-50
:background-color colors/orange-50-opa-5}
:red {:text-color colors/red-50
:background-color colors/red-50-opa-5}
:pink {:text-color colors/pink-50
:background-color colors/pink-50-opa-5}
:brown {:text-color colors/brown-50
:background-color colors/brown-50-opa-5}
:beige {:text-color colors/beige-50
:background-color colors/beige-50-opa-5}}
:dark {:primary {:text-color colors/primary-60
:background-color colors/primary-60-opa-5}
:purple {:text-color colors/purple-60
:background-color colors/purple-60-opa-5}
:indigo {:text-color colors/indigo-60
:background-color colors/indigo-60-opa-5}
:turquoise {:text-color colors/turquoise-60
:background-color colors/turquoise-60-opa-5}
:blue {:text-color colors/blue-60
:background-color colors/blue-60-opa-5}
:green {:text-color colors/green-60
:background-color colors/green-60-opa-5}
:yellow {:text-color colors/yellow-60
:background-color colors/yellow-60-opa-5}
:orange {:text-color colors/orange-60
:background-color colors/orange-60-opa-5}
:red {:text-color colors/red-60
:background-color colors/red-60-opa-5}
:pink {:text-color colors/pink-60
:background-color colors/pink-60-opa-5}
:brown {:text-color colors/brown-60
:background-color colors/brown-60-opa-5}
:beige {:text-color colors/beige-60
:background-color colors/beige-60-opa-5}}})
(defn new-messages
"new-messages params - label, color"
[{:keys [label color] :or {label (i18n/label :new-messages-header)
color :primary}}]
(let [colors (colors/theme-colors (themes :light) (themes :dark))
bg-color (get-in colors [color :background-color])
text-color (get-in colors [color :text-color])]
(let [bg-color (colors/custom-color-by-theme color 50 60 5 5)
text-color (colors/custom-color-by-theme color 50 60)]
[react/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
:start {:x 0 :y 0} :end {:x 0 :y 1}}
[rn/view {:style {:padding-left 60
[rn/view {:style {:padding-left 60
:padding-vertical 12
:padding-right 24}}
:padding-right 24}}
[text/text
{:size :paragraph-2
{:size :paragraph-2
:weight :medium
:style {:color text-color}}
label]]]))
:style {:color text-color}}
label]]]))

2
src/quo2/components/tags/token_tag.cljs
View File

@ -31,7 +31,7 @@
[_ _]
(fn [{:keys [token value size token-img-src border-color is-required is-purchasable]
:or
{size :small border-color (if (= (theme/get-theme) :dark) colors/purple-60 colors/purple-50)}}]
{size :small border-color (colors/custom-color-by-theme :purple 50 60)}}]
[tag/tag {:size size
:token-img-src token-img-src

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

@ -3,29 +3,31 @@
[quo.theme :as theme]))
(defn alpha [value opacity]
(if (string/starts-with? value "#")
(let [hex (string/replace value #"#" "")
r (js/parseInt (subs hex 0 2) 16)
g (js/parseInt (subs hex 2 4) 16)
b (js/parseInt (subs hex 4 6) 16)]
(str "rgba(" r "," g "," b "," opacity ")"))
(let [rgb (string/split value #",")]
(str (string/join "," (butlast rgb)) "," opacity ")"))))
(when value
(if (string/starts-with? value "#")
(let [hex (string/replace value #"#" "")
r (js/parseInt (subs hex 0 2) 16)
g (js/parseInt (subs hex 2 4) 16)
b (js/parseInt (subs hex 4 6) 16)]
(str "rgba(" r "," g "," b "," opacity ")"))
(let [rgb (string/split value #",")]
(str (string/join "," (butlast rgb)) "," opacity ")")))))
;;;;Neutral
;;Solid
(def neutral-5 "#F5F6F8")
(def neutral-10 "#F0F2F5")
(def neutral-20 "#ECEEF1")
(def neutral-30 "#E7EAEE")
(def neutral-20 "#E7EAEE")
(def neutral-30 "#DCE0E5")
(def neutral-40 "#A1ABBD")
(def neutral-50 "#647084")
(def neutral-60 "#303D55")
(def neutral-70 "#192438")
(def neutral-80 "#131D2F")
(def neutral-90 "#0D1625")
(def neutral-95 "#09101C")
(def neutral-70 "#1C2940")
(def neutral-80 "#192438")
(def neutral-90 "#131D2F")
(def neutral-95 "#0D1625")
(def neutral-100 "#09101C")
;;50 with transparency
(def neutral-50-opa-5 (alpha neutral-50 0.05))
@ -188,162 +190,76 @@
(def info-50-opa-30 (alpha info-50 0.3))
(def info-50-opa-40 (alpha info-50 0.4))
;; Customization
;;;;Purple
(def purple-20 (alpha "#8661C1" 0.2))
(def purple-50 "#8661C1")
(def purple-60 "#5E478C")
;;;; Customization
;;with transparency
(def purple-50-opa-5 (alpha purple-50 0.05))
(def purple-60-opa-5 (alpha purple-60 0.05))
(def customization
{:primary {50 primary-50 ;; User can also use primary color as customisation color
60 primary-60}
:purple {50 "#8661C1"
60 "#5E478C"}
:indigo {50 "#496289"
60 "#3D5273"}
:turquoise {50 "#448EA2"
60 "#397788"}
:blue {50 "#4CB4EF"
60 "#4097C9"}
:green {50 "#5BCC95"
60 "#4CAB7D"}
:yellow {50 "#FFCB53"
60 "#D6AA46"}
:orange {50 "#FB8F61"
60 "#D37851"}
:red {50 "#F46666"
60 "#CD5656"}
:pink {50 "#FC7BAB"
60 "#D46790"}
:brown {50 "#99604D"
60 "#805141"}
:beige {50 "#CAAE93"
60 "#AA927C"}})
;;;;Indigo
(def indigo-20 (alpha "#496289" 0.2))
(def indigo-50 "#496289")
(def indigo-60 "#3D5273")
(def custom-color
"(custom-color color suffix opacity)
color :primary/:purple/...
suffix 50/60
opacity 0-100 (optional)"
(memoize
(fn
([color suffix]
(custom-color color suffix nil))
([color suffix opacity]
(let [base-color (get-in customization [(keyword color) suffix])]
(if opacity (alpha base-color (/ opacity 100)) base-color))))))
;;with transparency
(def indigo-50-opa-5 (alpha indigo-50 0.05))
(def indigo-60-opa-5 (alpha indigo-60 0.05))
;;;;Turquoise
(def turquoise-20 (alpha "#448EA2" 0.2))
(def turquoise-50 "#448EA2")
(def turquoise-60 "#397788")
;;with transparency
(def turquoise-50-opa-5 (alpha turquoise-50 0.05))
(def turquoise-60-opa-5 (alpha turquoise-60 0.05))
;;;;Blue
(def blue-20 (alpha "#4CB4EF" 0.2))
(def blue-50 "#4CB4EF")
(def blue-60 "#4097C9")
;;with transparency
(def blue-50-opa-5 (alpha blue-50 0.05))
(def blue-60-opa-5 (alpha blue-60 0.05))
;;;;Green
(def green-20 (alpha "#5BCC95" 0.2))
(def green-50 "#5BCC95")
(def green-60 "#4CAB7D")
;;with transparency
(def green-50-opa-5 (alpha green-50 0.05))
(def green-60-opa-5 (alpha green-60 0.05))
;;;;Yellow
(def yellow-20 (alpha "#FFCB53" 0.2))
(def yellow-50 "#FFCB53")
(def yellow-60 "#D6AA46")
;;with transparency
(def yellow-50-opa-5 (alpha yellow-50 0.05))
(def yellow-60-opa-5 (alpha yellow-60 0.05))
;;;;Orange
(def orange-20 (alpha "#FB8F61" 0.2))
(def orange-50 "#FB8F61")
(def orange-60 "#D37851")
;;with transparency
(def orange-50-opa-5 (alpha orange-50 0.05))
(def orange-60-opa-5 (alpha orange-60 0.05))
;;;;Red
(def red-20 (alpha "#F46666" 0.2))
(def red-50 "#F46666")
(def red-60 "#CD5656")
;;with transparency
(def red-50-opa-5 (alpha red-50 0.05))
(def red-60-opa-5 (alpha red-60 0.05))
;;;;Pink
(def pink-20 (alpha "#FC7BAB" 0.2))
(def pink-50 "#FC7BAB")
(def pink-60 "#D46790")
;;with transparency
(def pink-50-opa-5 (alpha pink-50 0.05))
(def pink-60-opa-5 (alpha pink-60 0.05))
;;;;Brown
(def brown-20 (alpha "#99604D" 0.2))
(def brown-50 "#99604D")
(def brown-60 "#805141")
;;with transparency
(def brown-50-opa-5 (alpha brown-50 0.05))
(def brown-60-opa-5 (alpha brown-60 0.05))
;;;;Beige
(def beige-20 (alpha "#CAAE93" 0.2))
(def beige-50 "#CAAE93")
(def beige-60 "#AA927C")
;;with transparency
(def beige-50-opa-5 (alpha beige-50 0.05))
(def beige-60-opa-5 (alpha beige-60 0.05))
(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)"
([color suffix-light suffix-dark]
(custom-color-by-theme color suffix-light suffix-dark nil nil))
([color suffix-light suffix-dark opacity-light opacity-dark]
(if (theme/dark?)
(custom-color color suffix-dark opacity-dark)
(custom-color color suffix-light opacity-light))))
(def shadow "rgba(9,16,28,0.04)")
(def customization
{:dark {:purple purple-60
:indigo indigo-60
:turquoise turquoise-60
:blue blue-60
:green green-60
:yellow yellow-60
:orange orange-60
:red red-60
:pink pink-60
:brown brown-60
:beige beige-60}
:light {:purple purple-50
:indigo indigo-50
:turquoise turquoise-50
:blue blue-50
:green green-50
:yellow yellow-50
:orange orange-50
:red red-50
:pink pink-50
:brown brown-50
:beige beige-50}})
(defn custom-color [color theme]
(get-in customization [theme color]))
;;;;Switcher
(def switcher-background "#040B14")
;;switcher-screen with transparency
(def switcher-background-opa-60 (alpha switcher-background 0.6))
(def switcher-background-opa-70 (alpha switcher-background 0.7))
(def switcher-background-opa-80 (alpha switcher-background 0.8))
(def switcher-background-opa-90 (alpha switcher-background 0.9))
(def switcher-background-opa-95 (alpha switcher-background 0.95))
;;General
;; background
(def ui-background-02-light "#F5F9FA")
;; divider
(def divider-light "#EDF2f4")
(def divider-dark "#0E1620")
;; Visibility status
(def color-online "#26A69A")
(defn theme-colors [light dark]
(if (theme/dark?) dark light))
(defn theme-colors
"(theme-colors light dark override-theme)"
([light dark]
(theme-colors light dark nil))
([light dark override-theme]
(let [theme (or override-theme (theme/get-theme))]
(if (= theme :light) light dark))))
(defn dark?
[]

6
src/quo2/screens/avatars/group_avatar.cljs
View File

@ -20,11 +20,9 @@
:options
(map
(fn [c]
{:key c
{:key c
:value c})
(-> colors/customization
:light
keys))}])
(keys colors/customization))}])
(defn cool-preview []
(let [state (reagent/atom {:theme :light

35
src/quo2/screens/avatars/icon_avatar.cljs
View File

@ -2,7 +2,7 @@
(:require [reagent.core :as reagent]
[quo.react-native :as rn]
[quo.previews.preview :as preview]
[quo.design-system.colors :as colors]
[quo2.foundations.colors :as colors]
[quo2.components.avatars.icon-avatar :as quo2]))
(def descriptor [{:label "Size"
@ -26,30 +26,11 @@
{:label "Color"
:key :color
:type :select
:options [{:key :primary
:value "Primary"}
{:key :purple
:value "Purple"}
{:key :indigo
:value "Indigo"}
{:key :turquoise
:value "Turquoise"}
{:key :blue
:value "Blue"}
{:key :green
:value "Green"}
{:key :yellow
:value "yellow"}
{:key :orange
:value "Orange"}
{:key :red
:value "Red"}
{:key :pink
:value "Pink"}
{:key :brown
:value "Brown"}
{:key :beige
:value "Beige"}]}])
:options (map
(fn [c]
{:key c
:value c})
(keys colors/customization))}])
(defn cool-preview []
(let [state (reagent/atom {:size :big
@ -64,9 +45,9 @@
[quo2/icon-avatar @state]]])))
(defn preview-icon-avatar []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

6
src/quo2/screens/avatars/user_avatar.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.avatars.user-avatar
(:require [quo.react-native :as rn]
[quo.design-system.colors :as colors]
[quo2.foundations.colors :as colors]
[quo.previews.preview :as preview]
[quo2.components.avatars.user-avatar :as quo2]
[reagent.core :as reagent]))
@ -53,9 +53,9 @@
[quo2/user-avatar @state]]])))
(defn preview-user-avatar []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

35
src/quo2/screens/avatars/wallet_user_avatar.cljs
View File

@ -3,7 +3,7 @@
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.avatars.wallet-user-avatar :as quo2]
[quo.design-system.colors :as colors]))
[quo2.foundations.colors :as colors]))
(def descriptor [{:label "First name"
:key :f-name
@ -25,30 +25,11 @@
{:label "Color"
:key :color
:type :select
:options [{:key :primary
:value "Primary"}
{:key :purple
:value "Purple"}
{:key :indigo
:value "Indigo"}
{:key :turquoise
:value "Turquoise"}
{:key :blue
:value "Blue"}
{:key :green
:value "Green"}
{:key :yellow
:value "yellow"}
{:key :orange
:value "Orange"}
{:key :red
:value "Red"}
{:key :pink
:value "Pink"}
{:key :brown
:value "Brown"}
{:key :beige
:value "Beige"}]}])
:options (map
(fn [c]
{:key c
:value c})
(keys colors/customization))}])
(defn cool-preview []
(let [state (reagent/atom {:first-name "empty"
@ -63,9 +44,9 @@
[quo2/wallet-user-avatar @state]]])))
(defn preview-wallet-user-avatar []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

6
src/quo2/screens/buttons/button.cljs
View File

@ -2,7 +2,7 @@
(:require [reagent.core :as reagent]
[quo.react-native :as rn]
[quo.previews.preview :as preview]
[quo.design-system.colors :as colors]
[quo2.foundations.colors :as colors]
[quo2.components.buttons.button :as quo2]))
(def descriptor [{:label "Type:"
@ -78,9 +78,9 @@
(if @icon :main-icons2/placeholder @label)]]])))
(defn preview-button []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

4
src/quo2/screens/counter/counter.cljs
View File

@ -3,7 +3,7 @@
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.counter.counter :as quo2]
[quo.design-system.colors :as colors]))
[quo2.foundations.colors :as colors]))
(def descriptor [{:label "Type:"
:key :type
@ -32,7 +32,7 @@
[quo2/counter @state (:value @state)]]])))
(defn preview-counter []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always

12
src/quo2/screens/main.cljs
View File

@ -1,7 +1,8 @@
(ns quo2.screens.main
(:require [quo.components.safe-area :as safe-area]
[quo.core :as quo]
[quo.design-system.colors :as colors]
[quo.design-system.colors :as quo.colors]
[quo2.foundations.colors :as colors]
[quo.react-native :as rn]
[quo.theme :as theme]
[quo2.components.markdown.text :as quo2-text]
@ -120,9 +121,9 @@
[rn/view {:style {:flex-direction :row
:margin-vertical 8
:border-radius 4
:background-color (:ui-01 @colors/theme)
:background-color (:ui-01 @quo.colors/theme)
:border-width 1
:border-color (:ui-02 @colors/theme)}}
:border-color (:ui-02 @quo.colors/theme)}}
[rn/touchable-opacity {:style {:padding 8
:flex 1
:justify-content :center
@ -131,7 +132,7 @@
[quo/text "Set light theme"]]
[rn/view {:width 1
:margin-vertical 4
:background-color (:ui-02 @colors/theme)}]
:background-color (:ui-02 @quo.colors/theme)}]
[rn/touchable-opacity {:style {:padding 8
:flex 1
:justify-content :center
@ -147,11 +148,12 @@
:padding-top (:top insets)
:padding-bottom 8
:padding-horizontal 16
:background-color (:ui-background @colors/theme)}
:background-color (colors/theme-colors colors/white colors/neutral-90)}
[theme-switcher]
[quo2-text/text {:size :heading-1} "Preview Quo2 Components"]
[rn/view
(map (fn [category]
^{:key (get category 0)}
[rn/view {:style {:margin-vertical 8}}
[quo2-text/text
{:weight :semi-bold

4
src/quo2/screens/markdown/text.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.screens.markdown.text
(:require [quo.design-system.colors :as colors]
(:require [quo2.foundations.colors :as colors]
[quo.previews.preview :as preview]
[quo.react-native :as rn]
[quo2.components.markdown.text :as quo2]
@ -41,7 +41,7 @@
"The quick brown fox jumped over the lazy dog."]]])))
(defn preview-text []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always

4
src/quo2/screens/reactions/react.cljs
View File

@ -3,7 +3,7 @@
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.reactions.react :as quo2]
[quo.design-system.colors :as colors]))
[quo2.foundations.colors :as colors]))
(def descriptor [{:label "Count"
:key :clicks
@ -37,7 +37,7 @@
[quo2/open-reactions-menu @state]]])))
(defn preview-react []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always

4
src/quo2/screens/tabs/segmented_tab.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.tabs.segmented-tab
(:require [quo.react-native :as rn]
[quo.design-system.colors :as colors]
[quo2.foundations.colors :as colors]
[quo.previews.preview :as preview]
[quo2.components.tabs.segmented-tab :as quo2]
[reagent.core :as reagent]))
@ -36,7 +36,7 @@
:on-change #(println "Active tab" %)})]]])))
(defn preview-segmented []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always

4
src/quo2/screens/tabs/tabs.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.tabs.tabs
(:require [quo.react-native :as rn]
[quo.design-system.colors :as colors]
[quo2.foundations.colors :as colors]
[quo.previews.preview :as preview]
[quo2.components.tabs.tabs :as quo2]
[reagent.core :as reagent]))
@ -32,7 +32,7 @@
:on-change #(println "Active tab" %)})]]])))
(defn preview-tabs []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always

4
src/quo2/screens/tags/token_tag.cljs
View File

@ -3,7 +3,7 @@
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.tags.token-tag :as quo2]
[quo.design-system.colors :as colors]))
[quo2.foundations.colors :as colors]))
(def descriptor [{:label "Size:"
:key :size
@ -61,7 +61,7 @@
[quo2/token-tag (merge @state {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]])))
(defn preview-token-tag []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always

4
src/quo2/screens/wallet/token_overview.cljs
View File

@ -3,7 +3,7 @@
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.wallet.token-overview :as quo2]
[quo.design-system.colors :as colors]))
[quo2.foundations.colors :as colors]))
(def descriptor [{:label "Token:"
:key :token
@ -47,7 +47,7 @@
[quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]])))
(defn preview-token-overview []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always

6
src/status_im/ui/screens/profile/visibility_status/utils.cljs
View File

@ -25,7 +25,7 @@
{:color colors/red
:title (i18n/label :t/error)}
constants/visibility-status-automatic
{:color quo2.colors/color-online
{:color quo2.colors/success-50
:title (i18n/label :t/status-automatic)
:subtitle (i18n/label :t/status-automatic-subtitle)}
constants/visibility-status-dnd
@ -33,7 +33,7 @@
:title (i18n/label :t/status-dnd)
:subtitle (i18n/label :t/status-dnd-subtitle)}
constants/visibility-status-always-online
{:color quo2.colors/color-online
{:color quo2.colors/success-50
:title (i18n/label :t/status-always-online)}
constants/visibility-status-inactive
{:color colors/color-inactive
@ -92,7 +92,7 @@
(defn icon-dot-accessibility-label
[dot-color]
(if @config/new-ui-enabled?
(if (= dot-color quo2.colors/color-online)
(if (= dot-color quo2.colors/success-50)
:online-profile-photo-dot
:offline-profile-photo-dot)
(if (= dot-color colors/color-online)