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

fix quo2 colors and button component (#14083)

This commit is contained in:
Parvesh Monu 2022-09-29 13:51:22 +05:30 committed by GitHub
parent 7f71c01460
commit f7fedf1338
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 234 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo/components/list/item.cljs
View File

@ -44,7 +44,7 @@
:text-color (:text-02 @colors/theme)}
:light {:icon-color quo2.colors/neutral-50
:icon-bg-color quo2.colors/white
:text-color quo2.colors/black
:text-color quo2.colors/neutral-100
:active-background quo2.colors/neutral-10
:passive-background quo2.colors/white}
:dark {:icon-color quo2.colors/neutral-40

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

@ -67,7 +67,7 @@
:border-width border-width
:border-radius dimensions
:border-color (if dark?
colors/black
colors/neutral-100
colors/white)
:position :absolute
:bottom bottom

189
src/quo2/components/buttons/button.cljs
View File

@ -6,70 +6,125 @@
[reagent.core :as reagent]
[quo2.components.icon :as quo2.icons]))
(def themes {:light {:primary {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/primary-50
:pressed colors/primary-70
(def themes
{:light {:primary {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/primary-50
:pressed colors/primary-60
:disabled colors/primary-50}}
:secondary {:icon-color colors/primary-50
:label {:style {:color colors/primary-50}}
:background-color {:default colors/primary-50-opa-20
:secondary {:icon-color colors/primary-50
:label {:style {:color colors/primary-50}}
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-40
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/black
:label {:style {:color colors/black}}
:background-color {:default colors/neutral-20
:grey {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-50
:label {:style {:color colors/neutral-100}}
:background-color {:default colors/neutral-10
:pressed colors/neutral-20
:disabled colors/neutral-10}}
:dark-grey {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-50
:label {:style {:color colors/neutral-100}}
:background-color {:default colors/neutral-20
:pressed colors/neutral-30
:disabled colors/neutral-20}}
:outline {:icon-color colors/neutral-50
:label {:style {:color colors/black}}
:border-color {:default colors/neutral-30
:pressed colors/neutral-40}}
:ghost {:icon-color colors/neutral-50
:label {:style {:color colors/black}}
:background-color {:pr:pressedess colors/neutral-10}}
:success {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/success-50
:pressed colors/success-70
:disabled colors/success-50}}
:danger {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/danger-50
:outline {:icon-color colors/neutral-50
:icon-secondary-color colors/neutral-50
:label {:style {:color colors/neutral-100}}
:border-color {:default colors/neutral-20
:pressed colors/neutral-40
:disabled colors/neutral-20}}
:ghost {:icon-color colors/neutral-50
:icon-secondary-color colors/neutral-50
:label {:style {:color colors/neutral-100}}
:background-color {:pressed colors/neutral-10}}
:danger {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/danger-50
:pressed colors/danger-60
:disabled colors/danger-50}}}
:dark {:primary {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/primary-60
:pressed colors/primary-40
:disabled colors/primary-60}}
:secondary {:icon-color colors/primary-50
:label {:style {:color colors/primary-50}}
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-30
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/neutral-80
:disabled colors/danger-50}}
:photo-bg {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label {:style {:color colors/neutral-100}}
:background-color {:default colors/white-opa-40
:pressed colors/white-opa-50
:disabled colors/white-opa-40}}
:blur-bg {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label {:style {:color colors/neutral-100}}
:background-color {:default colors/neutral-80-opa-5
:pressed colors/neutral-80-opa-10
:disabled colors/neutral-80-opa-5}}
:blur-bg-outline {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label {:style {:color colors/neutral-100}}
:border-color {:default colors/neutral-80-opa-10
:pressed colors/neutral-80-opa-20
:disabled colors/neutral-80-opa-10}}
:shell {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/neutral-95
:pressed colors/neutral-95
:disabled colors/neutral-95}}}
:dark {:primary {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/primary-60
:pressed colors/primary-50
:disabled colors/primary-60}}
:secondary {:icon-color colors/primary-50
:label {:style {:color colors/primary-50}}
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-30
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/white
:icon-secondary-color colors/neutral-40
:label {:style {:color colors/white}}
:background-color {:default colors/neutral-80
:pressed colors/neutral-60
:disabled colors/neutral-80}}
:outline {:icon-color colors/neutral-40
:label {:style {:color colors/white}}
:border-color {:default colors/neutral-70
:pressed colors/neutral-60}}
:ghost {:icon-color colors/neutral-40
:label {:style {:color colors/white}}
:background-color {:pressed colors/neutral-80}}
:success {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/success-60
:pressed colors/success-40
:disabled colors/success-60}}
:danger {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/danger-50
:pressed colors/danger-40
:disabled colors/danger-50}}}})
:dark-grey {:icon-color colors/white
:icon-secondary-color colors/neutral-40
:label {:style {:color colors/white}}
:background-color {:default colors/neutral-70
:pressed colors/neutral-60
:disabled colors/neutral-70}}
:outline {:icon-color colors/neutral-40
:icon-secondary-color colors/neutral-40
:label {:style {:color colors/white}}
:border-color {:default colors/neutral-70
:pressed colors/neutral-60
:disabled colors/neutral-70}}
:ghost {:icon-color colors/neutral-40
:icon-secondary-color colors/neutral-40
:label {:style {:color colors/white}}
:background-color {:pressed colors/neutral-80}}
:danger {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/danger-60
:pressed colors/danger-50
:disabled colors/danger-60}}
:photo-bg {:icon-color colors/white
:icon-secondary-color colors/neutral-30
:label {:style {:color colors/white}}
:background-color {:default colors/neutral-80-opa-40
:pressed colors/neutral-80-opa-50
:disabled colors/neutral-80-opa-40}}
:blur-bg {:icon-color colors/white
:icon-secondary-color colors/white-opa-40
:label {:style {:color colors/white}}
:background-color {:default colors/white-opa-5
:pressed colors/white-opa-10
:disabled colors/white-opa-5}}
:blur-bg-outline {:icon-color colors/white
:icon-secondary-color colors/white-opa-40
:label {:style {:color colors/white}}
:border-color {:default colors/white-opa-10
:pressed colors/white-opa-20
:disabled colors/white-opa-5}}
:shell {:icon-color colors/white
:label {:style {:color colors/white}}
:background-color {:default colors/neutral-95}}}})
(defn style-container [type size disabled background-color border-color icon above width before after]
(merge {:height size
@ -108,11 +163,12 @@
"with label
[button opts \"label\"]
opts
{:type :primary/:secondary/:grey/:outline/:ghost/:danger
:size 40/32/24
:icon true/false
{:type :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
:danger/:photo-bg/:blur-bg/:blur-bg-ouline/:shell
:size 40/32/24
:icon true/false
:before :icon-keyword
:after :icon-keyword}
:after :icon-keyword}
only icon
[button {:icon true} :main-icons/close-circle]"
@ -124,12 +180,13 @@
:or {type :primary
size 40}}
children]
(let [{:keys [icon-color background-color label border-color]}
(let [{:keys [icon-color icon-secondary-color background-color label border-color]}
(get-in themes [(or
override-theme
(theme/get-theme)) type])
state (cond disabled :disabled @pressed :pressed :else :default)
icon-size (when (= 24 size) 12)]
state (cond disabled :disabled @pressed :pressed :else :default)
icon-size (when (= 24 size) 12)
icon-secondary-color (or icon-secondary-color icon-color)]
[rn/touchable-without-feedback (merge {:disabled disabled
:accessibility-label accessibility-label}
(when on-press
@ -159,13 +216,13 @@
(when above
[rn/view
[quo2.icons/icon above {:container-style {:margin-bottom 2}
:color icon-color
:color icon-secondary-color
:size icon-size}]])
(when before
[rn/view
[quo2.icons/icon before {:container-style {:margin-left (if (= size 40) 12 8)
:margin-right 4}
:color icon-color
:color icon-secondary-color
:size icon-size}]])
[rn/view
(cond
@ -186,5 +243,5 @@
[rn/view
[quo2.icons/icon after {:container-style {:margin-left 4
:margin-right (if (= size 40) 12 8)}
:color icon-color
:color icon-secondary-color
:size icon-size}]])]]))))

29
src/quo2/components/counter/counter.cljs
View File

@ -6,29 +6,28 @@
(def themes
{:light {:default colors/primary-50
:secondary colors/black-opa-5
:grey colors/neutral-30}
:secondary colors/neutral-80-opa-5
:grey colors/neutral-10
:outline colors/neutral-20}
:dark {:default colors/primary-60
:secondary colors/white-opa-10
:grey colors/neutral-70}})
:secondary colors/white-opa-5
:grey colors/neutral-70
:outline colors/neutral-70}})
(defn get-color [key]
(get-in themes [(theme/get-theme) key]))
(defn counter
"type: default, secondary, grey
outline: true, false
"type: default, secondary, grey, outline
value: integer"
[{:keys [type outline override-text-color override-bg-color style]} value]
[{:keys [type override-text-color override-bg-color style]} value]
(let [type (or type :default)
text-color (or override-text-color
(if (or
(= (theme/get-theme) :dark)
(and
(= type :default)
(not outline)))
(= type :default))
colors/white
colors/black))
colors/neutral-100))
value (if (integer? value)
value
(js/parseInt value))
@ -46,14 +45,14 @@
:width width
:height 16}
style)
outline
(= type :outline)
(merge {:border-width 1
:border-color (get-color (or type :default))})
:border-color (get-color type)})
(not outline)
(not= type :outline)
(assoc :background-color
(or override-bg-color
(get-color (or type :default))))
(get-color type)))
(> value 99)
(assoc :padding-left 0.5))}

4
src/quo2/components/dividers/divider_label.cljs
View File

@ -19,7 +19,7 @@
border-and-counter-bg-color (if dark? (if blur? colors/white-opa-5 colors/neutral-70) colors/neutral-10)
padding-top (if increase-padding-top? 16 8)
text-and-icon-color (if dark? colors/neutral-40 colors/neutral-50)
counter-text-color (if dark? colors/white colors/black)]
counter-text-color (if dark? colors/white colors/neutral-100)]
[rn/view {:style {:border-top-width 1
:border-top-color border-and-counter-bg-color
:padding-top padding-top
@ -57,4 +57,4 @@
[markdown.text/text {:size :label
:weight :medium
:style {:color counter-text-color}}
counter-value]])]))
counter-value]])]))

6
src/quo2/components/list_items/dropdown.cljs → src/quo2/components/dropdowns/dropdown.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.components.list-items.dropdown
(ns quo2.components.dropdowns.dropdown
(:require [quo.react-native :as rn]
[quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
@ -117,7 +117,7 @@
0
1)
:border-color (colors/theme-colors
colors/black
colors/neutral-100
colors/white)
:text-align :center}
:on-press #(on-select item)}
@ -144,4 +144,4 @@
{:height dd-height}
{:height dd-height})}
[items-comp {:items items
:on-select on-select}]]]))])
:on-select on-select}]]]))])

6
src/quo2/components/info/information_box.cljs
View File

@ -11,16 +11,16 @@
{:light {:default {:bg colors/white
:border colors/neutral-20
:icon colors/neutral-50
:text colors/black}
:text colors/neutral-100}
:informative {:bg colors/primary-50-opa-5
:border colors/primary-50-opa-10
:icon colors/primary-50
:text colors/black}
:text colors/neutral-100}
:error {:bg colors/danger-50-opa-5
:border colors/danger-50-opa-10
:icon colors/danger-50
:text colors/danger-50}
:close-button colors/black}
:close-button colors/neutral-100}
:dark {:default {:bg colors/neutral-90
:border colors/neutral-70
:icon colors/neutral-40

2
src/quo2/components/list_items/menu_item.cljs
View File

@ -8,7 +8,7 @@
(case type
:main {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
:background (theme-colors colors/white colors/neutral-90)
:text-color (theme-colors colors/black colors/white)}
:text-color (theme-colors colors/neutral-100 colors/white)}
:danger {:icon-color (theme-colors colors/danger-50 colors/danger-60)
:background (theme-colors colors/white colors/neutral-90)
:text-color (theme-colors colors/danger-50 colors/danger-60)}))

2
src/quo2/components/markdown/text.cljs
View File

@ -23,7 +23,7 @@
{:text-align (or align :auto)}
(if (:color style)
style
(assoc style :color (if (= (theme/get-theme) :dark) colors/white colors/black)))))
(assoc style :color (if (= (theme/get-theme) :dark) colors/white colors/neutral-100)))))
(defn text []
(let [this (reagent/current-component)

4
src/quo2/components/reactions/reaction.cljs
View File

@ -29,14 +29,14 @@
:height 20
:color (if dark?
colors/white
colors/black)}]]))
colors/neutral-100)}]]))
(defn reaction
"Add your emoji as a param here"
[{:keys [emoji clicks neutral? on-press]}]
(let [dark? (theme/dark?)
text-color (if dark? colors/white
colors/black)
colors/neutral-100)
numeric-value (int clicks)
clicks-positive? (pos? numeric-value)]
[rn/touchable-opacity {:on-press on-press

4
src/quo2/components/tabs/account_selector.cljs
View File

@ -7,10 +7,10 @@
(def themes
{:light {:default {:bg colors/neutral-10
:account-text colors/black
:account-text colors/neutral-100
:label-text colors/neutral-50}
:transparent {:bg colors/neutral-80-opa-5
:account-text colors/black
:account-text colors/neutral-100
:label-text colors/neutral-80-opa-40}}
:dark {:default {:bg colors/neutral-80-opa-80

6
src/quo2/components/tabs/tab.cljs
View File

@ -7,13 +7,13 @@
(def themes {:light {:default {:background-color colors/neutral-20
:icon-color colors/neutral-50
:label {:style {:color colors/black}}}
:label {:style {:color colors/neutral-100}}}
:active {:background-color colors/neutral-50
:icon-color colors/white
:label {:style {:color colors/white}}}
:disabled {:background-color colors/neutral-20
:icon-color colors/neutral-50
:label {:style {:color colors/black}}}}
:label {:style {:color colors/neutral-100}}}}
:dark {:default {:background-color colors/neutral-80
:icon-color colors/neutral-40
:label {:style {:color colors/white}}}
@ -72,4 +72,4 @@
label)
children]
(vector? children)
children)]]])))
children)]]])))

6
src/quo2/components/tags/filter_tag.cljs
View File

@ -8,13 +8,13 @@
(def themes {:light {:default {:border-color colors/neutral-20
:blurred-border-color colors/neutral-80-opa-5
:text-color {:style {:color colors/black}}}
:text-color {:style {:color colors/neutral-100}}}
:active {:border-color colors/neutral-30
:blurred-border-color colors/neutral-80-opa-10
:text-color {:style {:color colors/black}}}
:text-color {:style {:color colors/neutral-100}}}
:disabled {:border-color colors/neutral-20
:blurred-border-color colors/neutral-80-opa-5
:text-color {:style {:color colors/black}}}}
:text-color {:style {:color colors/neutral-100}}}}
:dark {:default {:border-color colors/neutral-70
:blurred-border-color colors/white-opa-10
:text-color {:style {:color colors/white}}}

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

@ -43,7 +43,7 @@
{:width 15.5
:height 15.5
:background-color border-color
:border-color (if (= (theme/get-theme) :dark) colors/black colors/white)
:border-color (if (= (theme/get-theme) :dark) colors/neutral-100 colors/white)
:border-width 1
:right (get-value-from-size size -3.75 -5.75)
:bottom (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2)) ; (- height (icon-height/2) spacing)

4
src/quo2/components/info/lowest_price.cljs → src/quo2/components/wallet/lowest_price.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.components.info.lowest-price
(ns quo2.components.wallet.lowest-price
(:require [quo.react-native :as rn]
[clojure.string :as string]))
@ -69,4 +69,4 @@
[rn/view centrify
[dots-comp false]
[lowest-price-value-comp bottom-value bottom-value-bg-color bottom-value-text-color]
[dots-comp true]]])
[dots-comp true]]])

6
src/quo2/components/info/network_amount.cljs → src/quo2/components/wallet/network_amount.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.components.info.network-amount
(ns quo2.components.wallet.network-amount
(:require [clojure.string :as string]
[quo.react-native :as rn]
[quo2.components.icon :as icon]
@ -34,7 +34,7 @@
:align-items :center}}
[text/text {:weight :medium
:size :paragraph-2
:style {:color (colors/theme-colors colors/black colors/white)}}
:style {:color (colors/theme-colors colors/neutral-100 colors/white)}}
eth-value \space (i18n/label :t/eth)]
[rn/view {:style {:border-right-width (when show-right-border? 1)
:border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
@ -44,4 +44,4 @@
[text/text {:weight :medium
:size :label
:style {:color colors/neutral-50}}
(string/lower-case (i18n/label :t/on)) \space network-name]]]])
(string/lower-case (i18n/label :t/on)) \space network-name]]]])

8
src/quo2/components/info/network_breakdown.cljs → src/quo2/components/wallet/network_breakdown.cljs
View File

@ -1,8 +1,8 @@
(ns quo2.components.info.network-breakdown
(ns quo2.components.wallet.network-breakdown
(:require [quo.react-native :as rn]
[quo2.foundations.colors :as colors]
[quo2.components.markdown.text :as text]
[quo2.components.info.network-amount :refer [network-amount]]))
[quo2.components.wallet.network-amount :refer [network-amount]]))
(defn network-breakdown
[{:keys [top-value network-conversions]}]
@ -22,7 +22,7 @@
:padding-vertical 6}}
[text/text {:weight :medium
:style {:color (colors/theme-colors
colors/black
colors/neutral-100
colors/white)
:font-size 19}}
(str top-value)]]
@ -42,4 +42,4 @@
:icon icon
:network-name network
:eth-value conversion}]])
network-conversions))]])
network-conversions))]])

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

@ -36,59 +36,36 @@
(def neutral-40 "#A1ABBD")
(def neutral-50 "#647084")
(def neutral-60 "#303D55")
(def neutral-70 "#1C2940")
(def neutral-80 "#192438")
(def neutral-70 "#202C42")
(def neutral-80 "#1B273D")
(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))
(def neutral-50-opa-10 (alpha neutral-50 0.1))
(def neutral-50-opa-20 (alpha neutral-50 0.2))
(def neutral-50-opa-30 (alpha neutral-50 0.3))
(def neutral-50-opa-40 (alpha neutral-50 0.4))
;;70 with transparency
(def neutral-70-opa-60 (alpha neutral-70 0.6))
(def neutral-70-opa-70 (alpha neutral-70 0.7))
(def neutral-70-opa-80 (alpha neutral-70 0.8))
(def neutral-70-opa-90 (alpha neutral-70 0.9))
(def neutral-70-opa-95 (alpha neutral-70 0.95))
;;Blur
(def neutral-5-opa-70 (alpha neutral-5 0.7))
(def neutral-90-opa-70 (alpha neutral-90 0.7))
(def neutral-95-opa-70 (alpha neutral-95 0.7))
;;80 with transparency
(def neutral-80-opa-5 (alpha neutral-80 0.05))
(def neutral-80-opa-10 (alpha neutral-80 0.1))
(def neutral-80-opa-20 (alpha neutral-80 0.2))
(def neutral-80-opa-30 (alpha neutral-80 0.3))
(def neutral-80-opa-40 (alpha neutral-80 0.4))
(def neutral-80-opa-50 (alpha neutral-80 0.4))
(def neutral-80-opa-60 (alpha neutral-80 0.6))
(def neutral-80-opa-70 (alpha neutral-80 0.7))
(def neutral-80-opa-80 (alpha neutral-80 0.8))
(def neutral-80-opa-90 (alpha neutral-80 0.9))
(def neutral-80-opa-95 (alpha neutral-80 0.95))
;;95 with transparency
(def neutral-95-opa-60 (alpha neutral-95 0.6))
(def neutral-95-opa-70 (alpha neutral-95 0.7))
(def neutral-95-opa-80 (alpha neutral-95 0.8))
(def neutral-95-opa-90 (alpha neutral-95 0.9))
(def neutral-95-opa-95 (alpha neutral-95 0.95))
;;;;Black
(def black "#000000")
(def black-opa-5 (alpha black 0.05))
(def black-opa-10 (alpha black 0.1))
(def black-opa-20 (alpha black 0.2))
(def black-opa-30 (alpha black 0.3))
(def black-opa-40 (alpha black 0.4))
(def black-opa-50 (alpha black 0.5))
(def black-opa-60 (alpha black 0.6))
(def black-opa-70 (alpha black 0.7))
(def black-opa-80 (alpha black 0.8))
(def black-opa-90 (alpha black 0.9))
(def black-opa-95 (alpha black 0.95))
;;;;White
;;Solid
(def white "#ffffff")
;; with transparency
(def white-opa-5 (alpha white 0.05))
(def white-opa-10 (alpha white 0.1))
(def white-opa-20 (alpha white 0.2))
@ -104,15 +81,8 @@
;;;;Primary
;;Solid
(def primary-10 "#F8F9FE")
(def primary-20 "#D9DFF9")
(def primary-30 "#ACB9F1")
(def primary-40 "#7F93E9")
(def primary-50 "#4360DF")
(def primary-60 "#3851BB")
(def primary-70 "#2E4198")
(def primary-80 "#233274")
(def primary-90 "#182350")
(def primary-60 "#354DB2")
;;50 with transparency
(def primary-50-opa-5 (alpha primary-50 0.05))
@ -121,21 +91,11 @@
(def primary-50-opa-30 (alpha primary-50 0.3))
(def primary-50-opa-40 (alpha primary-50 0.4))
;;60 with transparency
(def primary-60-opa-5 (alpha primary-60 0.05))
;;;;Success
;;Solid
(def success-10 "#F6FBFB")
(def success-20 "#D4EDEB")
(def success-30 "#9FD8D3")
(def success-40 "#6BC2BA")
(def success-50 "#26A69A")
(def success-60 "#208B81")
(def success-70 "#1A7169")
(def success-80 "#145650")
(def success-90 "#08211F")
;;50 with transparency
(def success-50-opa-5 (alpha success-50 0.05))
@ -144,38 +104,11 @@
(def success-50-opa-30 (alpha success-50 0.3))
(def success-50-opa-40 (alpha success-50 0.4))
;;;;Warning
;;Solid
(def warning-10 "#FFFBF9")
(def warning-20 "#FEE9DF")
(def warning-30 "#FDCEBA")
(def warning-40 "#FCB394")
(def warning-50 "#FB8F61")
(def warning-60 "#D37851")
(def warning-70 "#AB6142")
(def warning-80 "#824A32")
(def warning-90 "#5A3323")
;;50 with transparency
(def warning-50-opa-5 (alpha warning-50 0.05))
(def warning-50-opa-10 (alpha warning-50 0.1))
(def warning-50-opa-20 (alpha warning-50 0.2))
(def warning-50-opa-30 (alpha warning-50 0.3))
(def warning-50-opa-40 (alpha warning-50 0.4))
;;;;Danger
;;Solid
(def danger-10 "#FEF9F9")
(def danger-20 "#FADFDE")
(def danger-30 "#F4B9B7")
(def danger-40 "#EE9290")
(def danger-50 "#E65F5C")
(def danger-60 "#C1504D")
(def danger-70 "#9C413F")
(def danger-80 "#783130")
(def danger-90 "#532221")
;;50 with transparency
(def danger-50-opa-5 (alpha danger-50 0.05))
@ -184,26 +117,6 @@
(def danger-50-opa-30 (alpha danger-50 0.3))
(def danger-50-opa-40 (alpha danger-50 0.4))
;;;;Info
;;Solid
(def info-10 "#F6FCFD")
(def info-20 "#D2EEF4")
(def info-30 "#9DD9E6")
(def info-40 "#67C4D8")
(def info-50 "#20A8C6")
(def info-60 "#1B8DA6")
(def info-70 "#167287")
(def info-80 "#115767")
(def info-90 "#0C3C47")
;;50 with transparency
(def info-50-opa-5 (alpha info-50 0.05))
(def info-50-opa-10 (alpha info-50 0.1))
(def info-50-opa-20 (alpha info-50 0.2))
(def info-50-opa-30 (alpha info-50 0.3))
(def info-50-opa-40 (alpha info-50 0.4))
;;;; Customization
(def customization

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

@ -14,6 +14,8 @@
:value "Secondary"}
{:key :grey
:value "Grey"}
{:key :dark-grey
:value "Dark Grey"}
{:key :outline
:value "Outline"}
{:key :ghost

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

@ -13,10 +13,9 @@
{:key :secondary
:value "Secondary"}
{:key :grey
:value "Gray"}]}
{:label "Outline?:"
:key :outline
:type :boolean}
:value "Gray"}
{:key :outline
:value "Outline"}]}
{:label "Value"
:key :value
:type :text}])

4
src/quo2/screens/list_items/dropdown.cljs → src/quo2/screens/dropdowns/dropdown.cljs
View File

@ -1,8 +1,8 @@
(ns quo2.screens.list-items.dropdown
(ns quo2.screens.dropdowns.dropdown
(:require [quo.components.text :as text]
[quo.previews.preview :as preview]
[quo.react-native :as rn]
[quo2.components.list-items.dropdown :as quo2]
[quo2.components.dropdowns.dropdown :as quo2]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]))

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

@ -17,10 +17,10 @@
[quo2.screens.community.community-card-view :as community-card]
[quo2.screens.dividers.divider-label :as divider-label]
[quo2.screens.dividers.new-messages :as new-messages]
[quo2.screens.list-items.dropdown :as dropdown]
[quo2.screens.dropdowns.dropdown :as dropdown]
[quo2.screens.info.info-message :as info-message]
[quo2.screens.info.information-box :as information-box]
[quo2.screens.info.lowest-price :as lowest-price]
[quo2.screens.wallet.lowest-price :as lowest-price]
[quo2.screens.list-items.preview-lists :as preview-lists]
[quo2.screens.list-items.channel :as channel]
[quo2.screens.markdown.text :as text]
@ -39,8 +39,8 @@
[quo2.screens.tags.status-tags :as status-tags]
[quo2.screens.tags.token-tag :as token-tag]
[quo2.screens.wallet.token-overview :as token-overview]
[quo2.screens.info.network-breakdown :as network-breakdown]
[quo2.screens.info.network-amount :as network-amount]
[quo2.screens.wallet.network-breakdown :as network-breakdown]
[quo2.screens.wallet.network-amount :as network-amount]
[re-frame.core :as re-frame]))
(def screens-categories
@ -82,16 +82,7 @@
:component info-message/preview-info-message}
{:name :information-box
:insets {:top false}
:component information-box/preview-information-box}
{:name :lowest-price
:insets {:top false}
:component lowest-price/preview-lowest-price}
{:name :network-breakdown
:insets {:top false}
:component network-breakdown/preview-network-breakdown}
{:name :network-amount
:insets {:top false}
:component network-amount/preview}]
:component information-box/preview-information-box}]
:list-items [{:name :channel
:insets {:top false}
:component channel/preview-channel}
@ -143,9 +134,18 @@
{:name :token-tag
:insets {:top false}
:component token-tag/preview-token-tag}]
:wallet [{:name :token-overview
:wallet [{:name :lowest-price
:insets {:top false}
:component token-overview/preview-token-overview}]})
:component lowest-price/preview-lowest-price}
{:name :token-overview
:insets {:top false}
:component token-overview/preview-token-overview}
{:name :network-breakdown
:insets {:top false}
:component network-breakdown/preview-network-breakdown}
{:name :network-amount
:insets {:top false}
:component network-amount/preview}]})
(def screens (flatten (map val screens-categories)))

2
src/quo2/screens/notifications/activity_logs.cljs
View File

@ -150,7 +150,7 @@
[rn/view {:flex 1
:padding 16}
[preview/customizer state descriptor]]
[rn/view {:background-color colors/neutral-95-opa-80
[rn/view {:background-color colors/neutral-90
:flex-direction :row
:justify-content :center
:padding-vertical 60}

8
src/quo2/screens/info/lowest_price.cljs → src/quo2/screens/wallet/lowest_price.cljs
View File

@ -1,8 +1,8 @@
(ns quo2.screens.info.lowest-price
(ns quo2.screens.wallet.lowest-price
(:require [quo2.foundations.colors :as colors]
[quo.react-native :as rn]
[quo.previews.preview :as preview]
[quo2.components.info.lowest-price :as quo2]
[quo2.components.wallet.lowest-price :as quo2]
[reagent.core :as reagent]))
(def descriptor [{:label "Top value"
@ -30,9 +30,9 @@
(defn cool-preview []
(let [state (reagent/atom {:top-value 20
:bottom-value 20
:top-value-bg-color colors/black
:top-value-bg-color colors/neutral-100
:top-value-text-color colors/white
:bottom-value-bg-color colors/black
:bottom-value-bg-color colors/neutral-100
:bottom-value-text-color colors/white})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}

6
src/quo2/screens/info/network_amount.cljs → src/quo2/screens/wallet/network_amount.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.info.network-amount
(ns quo2.screens.wallet.network-amount
(:require [quo.previews.preview :as preview]
[quo.react-native :as rn]
[quo2.components.info.network-amount :refer [network-amount]]
[quo2.components.wallet.network-amount :refer [network-amount]]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]))
@ -53,4 +53,4 @@
[rn/flat-list {:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

8
src/quo2/screens/info/network_breakdown.cljs → src/quo2/screens/wallet/network_breakdown.cljs
View File

@ -1,9 +1,9 @@
(ns quo2.screens.info.network-breakdown
(ns quo2.screens.wallet.network-breakdown
(:require [reagent.core :as reagent]
[quo.react-native :as rn]
[quo.previews.preview :as preview]
[quo2.foundations.colors :as colors]
[quo2.components.info.network-breakdown :as quo2]))
[quo2.components.wallet.network-breakdown :as quo2]))
(def descriptor [{:label "Ethereum Value"
:key :top-value
@ -42,7 +42,7 @@
:flex-direction :row
:justify-content :center}
[quo2/network-breakdown @state]]
[rn/touchable-opacity {:style {:background-color colors/black
[rn/touchable-opacity {:style {:background-color colors/neutral-100
:width 100}
:on-press (fn []
(swap! state update-in [:network-conversions] conj {:conversion (:conversion @state)
@ -57,4 +57,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

6
src/status_im/switcher/cards/styles.cljs
View File

@ -5,11 +5,11 @@
(def themes
{:light {:messaging-card-container-background-color "#26A69A"
:messaging-card-secondary-container-background-color colors/white
:messaging-card-title-color colors/black
:messaging-card-title-color colors/neutral-100
:messaging-card-subtitle-color colors/neutral-50
:messaging-card-last-message-text-color colors/black
:messaging-card-last-message-text-color colors/neutral-100
:messaging-card-close-button-bg-color colors/white-opa-50
:messaging-card-close-button-icon-color colors/black}
:messaging-card-close-button-icon-color colors/neutral-100}
:dark {:messaging-card-container-background-color "#26A69A"
:messaging-card-secondary-container-background-color colors/neutral-90
:messaging-card-title-color colors/white

2
src/status_im/switcher/switcher.cljs
View File

@ -32,7 +32,7 @@
:on-press-out toggle-switcher-screen-fn
:style touchable-animated-style}
[reanimated/view {:style close-button-animated-style}
[icons/icon :main-icons/close {:color colors/black}]]
[icons/icon :main-icons/close {:color colors/neutral-100}]]
[reanimated/image {:source (resources/get-image :switcher)
:style switcher-button-animated-style}]]))])

2
src/status_im/ui/screens/chat/components/edit.cljs
View File

@ -45,7 +45,7 @@
:on-press #(re-frame/dispatch [:chat.ui/cancel-message-edit])}
[icons/icon :main-icons/close {:width 16
:height 16
:color (theme-colors quo2.colors/black quo2.colors/neutral-40)}]]])
:color (theme-colors quo2.colors/neutral-100 quo2.colors/neutral-40)}]]])
(defn focus-input-on-edit [edit had-edit text-input-ref]
;;when we show edit we focus input

2
src/status_im/ui/screens/chat/components/reply.cljs
View File

@ -120,7 +120,7 @@
:on-press #(re-frame/dispatch [:chat.ui/cancel-message-reply])}
[icons/icon :main-icons/close {:width 16
:height 16
:color (theme-colors quo2.colors/black quo2.colors/neutral-40)}]])]))
:color (theme-colors quo2.colors/neutral-100 quo2.colors/neutral-40)}]])]))
(defn send-image [images]
[rn/view {:style (styles/reply-container-image)}

4
src/status_im/ui/screens/chat/components/style.cljs
View File

@ -166,7 +166,7 @@
(defn new-bottom-sheet-handle []
{:width 32
:height 4
:background-color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)
:background-color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)
:opacity 0.05
:border-radius 100
:align-self :center
@ -192,4 +192,4 @@
:bottom 0
:height window-height
:background-color quo2.colors/neutral-95-opa-70
:z-index 500})
:z-index 500})

2
src/status_im/ui/screens/chat/styles/message/message.cljs
View File

@ -233,7 +233,7 @@
(defn message-default-style []
{:font-family "Inter-Regular"
:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)
:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)
:font-size 15
:line-height 21.75
:letter-spacing -0.135})

4
src/status_im/ui/screens/chat/views.cljs
View File

@ -478,14 +478,14 @@
:width 32
:accessibility-label "back-button"
:on-press #(re-frame/dispatch [:navigate-back])}
[icons/icon :main-icons/arrow-left {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]])
[icons/icon :main-icons/arrow-left {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]])
(defn search-button []
[quo2.button/button {:type :grey
:size 32
:width 32
:accessibility-label "search-button"}
[icons/icon :main-icons/search {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]])
[icons/icon :main-icons/search {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]])
(defn topbar-content []
(let [window-width @(re-frame/subscribe [:dimensions/window-width])

4
src/status_im/ui/screens/communities/communities_list_redesign.cljs
View File

@ -194,7 +194,7 @@
:labelled false
:type :icon
:icon-color (quo2.colors/theme-colors
quo2.colors/black
quo2.colors/neutral-100
quo2.colors/white)}]]
[filter-tags/tags {:data filters
:labelled true
@ -237,4 +237,4 @@
:padding-horizontal 20}
[separator/separator]]
[community-segments]])
[community-segments-view communities]]])]))
[community-segments-view communities]]])]))

6
src/status_im/ui/screens/home/views.cljs
View File

@ -277,7 +277,7 @@
(if (and @config/new-ui-enabled? @config/new-activity-center-enabled?)
(re-frame/dispatch [:navigate-to :activity-center])
(re-frame/dispatch [:navigate-to :notifications-center])))}
[icons/icon :main-icons/notification2 {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]]
[icons/icon :main-icons/notification2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]]
(when (pos? notif-count)
[react/view {:style (merge (styles/counter-public-container) {:top 5 :right 5})
:pointer-events :none}
@ -310,7 +310,7 @@
:on-press #(do
(re-frame/dispatch [::qr-scanner/scan-code
{:handler ::qr-scanner/on-scan-success}]))}
[icons/icon :main-icons/qr2 {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]])
[icons/icon :main-icons/qr2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]])
(defn scan-button []
[quo2.button/button {:type :grey
@ -320,7 +320,7 @@
:on-press #(do
(re-frame/dispatch [::qr-scanner/scan-code
{:handler ::qr-scanner/on-scan-success}]))}
[icons/icon :main-icons/scan2 {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]])
[icons/icon :main-icons/scan2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]])
(views/defview profile-button []
(views/letsubs [{:keys [public-key preferred-name emoji]} [:multiaccount]]