Skip to content

Commit da24629

Browse files
J-Son89J-Son89
committed
chore: update token tag styles
1 parent 4d53845 commit da24629

20 files changed

+81
-56
lines changed

‎resources/images/icons/purchasable12@2x.png

629 Bytes
Loading

‎resources/images/icons/purchasable12@3x.png

806 Bytes
Loading

‎resources/images/icons/purchasable@2x.png

-825 Bytes
Binary file not shown.

‎resources/images/icons/purchasable@3x.png

-1.08 KB
Binary file not shown.

‎resources/images/icons/purchasable_dark@2x.png

-968 Bytes
Binary file not shown.

‎resources/images/icons/purchasable_dark@3x.png

-1.32 KB
Binary file not shown.

‎resources/images/icons/required_checkmark12@2x.png

229 Bytes
Loading

‎resources/images/icons/required_checkmark12@3x.png

278 Bytes
Loading

‎resources/images/icons/required_checkmark@2x.png

-863 Bytes
Binary file not shown.

‎resources/images/icons/required_checkmark@3x.png

-1.17 KB
Binary file not shown.

‎resources/images/icons/required_checkmark_dark@2x.png

-1.05 KB
Binary file not shown.

‎resources/images/icons/required_checkmark_dark@3x.png

-1.49 KB
Binary file not shown.

‎resources/images/icons/token_logo_eth@2x.png

-1.07 KB
Binary file not shown.

‎resources/images/icons/token_logo_eth@3x.png

-1.07 KB
Binary file not shown.

‎resources/images/icons/token_logo_snt@2x.png

-1.88 KB
Binary file not shown.

‎resources/images/icons/token_logo_snt@3x.png

-2.7 KB
Binary file not shown.

‎src/quo2/components/tag.cljs

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
(ns quo2.components.tag
2+
(:require [quo.react-native :as rn]
3+
[quo2.foundations.colors :as colors]
4+
[quo.theme :as theme]
5+
[quo2.components.text :as text]))
6+
7+
(def themes {:light {:background-color colors/neutral-20}
8+
:dark {:background-color colors/neutral-80}})
9+
10+
(defn get-value-from-size [size big-option small-option]
11+
(if (= size :big) big-option small-option))
12+
13+
(defn tag-container [size border-color]
14+
(merge {:height (if border-color (get-value-from-size size 33 25) (get-value-from-size size 32 24))
15+
:align-items :center
16+
:flex-direction :row
17+
:left 0
18+
:border-radius 100
19+
:padding-right 12}
20+
(when border-color {:border-color border-color
21+
:border-width 1})))
22+
23+
(defn tag "[tag opts \"label\"]
24+
opts
25+
{
26+
:size :small/:big
27+
:token-img-src :token-img-src
28+
:token-img-style {}
29+
:border-color :color
30+
:text-value string
31+
:overlay child-elements
32+
}"
33+
[_ _]
34+
(fn [{:keys [size token-img-src token-img-style border-color text-value overlay]
35+
:or {size :small}}]
36+
[rn/view {:style (merge (tag-container size border-color) (get themes (theme/get-theme)))}
37+
[rn/image {:source token-img-src
38+
:style (merge {:height (get-value-from-size size 28 20)
39+
:width (get-value-from-size size 28 20)
40+
:margin-left 2
41+
:margin-right (get-value-from-size size 8 6)} token-img-style)}]
42+
[text/text {:weight :medium
43+
:number-of-lines 1
44+
:size (get-value-from-size size :paragraph-2 :label)} text-value]
45+
overlay]))

‎src/quo2/components/token_tag.cljs

+27-43
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,17 @@
33
[quo.react-native :as rn]
44
[quo.theme :as theme]
55
[status-im.ui.components.icons.icons :as icons]
6-
[quo2.components.text :as text]))
7-
8-
(def themes {:light {:background-color colors/neutral-20}
9-
:dark {:background-color colors/neutral-80}})
6+
[quo2.components.tag :as tag]))
107

118
(defn get-value-from-size [size big-option small-option]
129
(if (= size :big) big-option small-option))
1310

14-
(defn style-container [size border-color is-required]
15-
(merge {:height 32
16-
:min-width (get-value-from-size size 94 76)
17-
:align-items :center
18-
:flex-direction :row
19-
:left 0
20-
:border-radius 100
21-
:padding-right 10}
22-
(when is-required {:border-color border-color
23-
:border-width 1})))
11+
(def icon-container-styles {:display :flex
12+
:align-items :center
13+
:justify-content :center
14+
:position :absolute
15+
:border-radius 100
16+
:margin-left 2})
2417

2518
(defn token-tag
2619
"[token-tag opts \"label\"]
@@ -29,37 +22,28 @@
2922
:token string
3023
:value string
3124
:size :small/:big
32-
:icon-name :icon-name
33-
:required-icon :icon-name
25+
:token-img-src :token-img-src
3426
:border-color :color
3527
:is-required true/false
3628
:is-purchasable true/false
3729
}"
3830
[_ _]
39-
(fn [{:keys [token value size icon-name border-color is-required is-purchasable required-icon]
40-
:or {size :small border-color (if (= (theme/get-theme) :dark) colors/purple-60 colors/purple-50) required-icon (if (= (theme/get-theme) :dark) :main-icons2/required-checkmark-dark :main-icons2/required-checkmark)}}]
41-
[rn/view {:style (merge (style-container size border-color is-required) (get themes (theme/get-theme)))}
42-
[rn/view {:style {:margin-left 2
43-
:margin-right (get-value-from-size size 8 6)}}
44-
[icons/icon icon-name {:no-color true
45-
:size 24}]]
46-
[text/text {:weight :medium
47-
:number-of-lines 1
48-
:size (get-value-from-size size :paragraph-2 :label)
49-
:padding 2
50-
:padding-top 12
51-
:margin-right (get-value-from-size size 12 10)} value " " token]
52-
(when (or is-required is-purchasable) [rn/view {:style {:display :flex
53-
:align-items :center
54-
:justify-content :center
55-
:position :absolute
56-
:background-color (if is-required border-color colors/neutral-50)
57-
:border-radius 100
58-
:right -20
59-
:bottom 16
60-
:margin-left 2
61-
:margin-right (get-value-from-size size 8 6)}}
62-
(when (and is-required required-icon) [icons/icon required-icon {:no-color true
63-
:size 4}])
64-
(when is-purchasable [icons/icon (if (= (theme/get-theme) :dark) :main-icons2/purchasable-dark :main-icons2/purchasable) {:no-color true
65-
:size 4}])])]))
31+
(fn [{:keys [token value size token-img-src border-color is-required is-purchasable]
32+
:or {size :small border-color (if (= (theme/get-theme) :dark) colors/purple-60 colors/purple-50)}}]
33+
34+
[tag/tag {:size size
35+
:token-img-src token-img-src
36+
:border-color (when is-required border-color)
37+
:text-value (str value " " token)
38+
:overlay
39+
(when (or is-required is-purchasable) [rn/view {:style (merge icon-container-styles {:width 14
40+
:height 14
41+
:background-color border-color
42+
:border-color (if (= (theme/get-theme) :dark) colors/black colors/white)
43+
:border-width 1
44+
:right (get-value-from-size size -3 -5)
45+
:bottom (get-value-from-size size (- 32 7 (if is-required 5 4)) (- 24 7 (if is-required 4 2))) ; (- height (icon-height/2) spacing)
46+
})}
47+
[icons/icon (if is-required :main-icons2/required-checkmark12 :main-icons2/purchasable12) {:no-color true
48+
:width (if is-required 6 12)
49+
:height (if is-required 6 12)}]])}]))

‎src/quo2/foundations/colors.cljs

-4
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,3 @@
262262
(if (theme/dark?) dark light))
263263

264264
;;;;Customisation
265-
266-
;;Solid
267-
(def purple-50 "#8052bb")
268-
(def purple-60 "#563c82")

‎src/quo2/screens/token_tag.cljs

+9-9
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,13 @@
2626
{:key 10000
2727
:value "10000"}]}
2828

29-
{:label "Border Color:"
29+
{:label "Community Color:"
3030
:key :border-color
3131
:type :select
3232
:options [{:key "#00a191"
33-
:value "green"}]}
34-
{:label "Custom Required Icon:"
35-
:key :required-icon
36-
:type :select
37-
:options [{:key :main-icons2/verified-dark12
38-
:value "green"}]}
33+
:value "green"}
34+
{:key "red"
35+
:value "red"}]}
3936
{:label "Is Required:"
4037
:key :is-required
4138
:type :boolean}
@@ -50,15 +47,18 @@
5047
{:key "SNT"
5148
:value "SNT"}]}])
5249

50+
(def eth-token (js/require "../resources/images/tokens/mainnet/ETH.png"))
51+
(def snt-token (js/require "../resources/images/tokens/mainnet/SNT.png"))
52+
5353
(defn cool-preview []
54-
(let [state (reagent/atom {:size :big :value 10 :token "ETH" :is-required false :is-purchasable false})]
54+
(let [state (reagent/atom {:size :big :value 10 :token "ETH" :is-required true :is-purchasable false})]
5555
(fn []
5656
[rn/view {:margin-bottom 50
5757
:padding 16}
5858
[preview/customizer state descriptor]
5959
[rn/view {:padding-vertical 60
6060
:align-items :center}
61-
[quo2/token-tag (merge @state {:icon-name (if (= (get-in @state [:token]) "ETH") :main-icons2/token-logo-eth :main-icons2/token-logo-snt)})]]])))
61+
[quo2/token-tag (merge @state {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]])))
6262

6363
(defn preview-token-tag []
6464
[rn/view {:background-color (:ui-background @colors/theme)

0 commit comments

Comments
 (0)