Skip to content

Commit c181fd2

Browse files
J-Son89J-Son89
committed
chore: update token tag styles
1 parent 69fd4ca commit c181fd2

18 files changed

+39
-35
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/token_tag.cljs

+30-26
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,23 @@
1111
(defn get-value-from-size [size big-option small-option]
1212
(if (= size :big) big-option small-option))
1313

14+
(def icon-container-styles {:display :flex
15+
:align-items :center
16+
:justify-content :center
17+
:position :absolute
18+
:border-radius 100
19+
:margin-left 2})
20+
1421
(defn style-container [size border-color is-required]
15-
(merge {:height 32
22+
(merge {:height (if is-required (get-value-from-size size 33 25) (get-value-from-size size 32 24))
1623
:min-width (get-value-from-size size 94 76)
1724
:align-items :center
1825
:flex-direction :row
19-
:left 0
26+
:left 0
2027
:border-radius 100
2128
:padding-right 10}
22-
(when is-required {:border-color border-color
23-
:border-width 1})))
29+
(when is-required {:border-color border-color
30+
:border-width 1})))
2431

2532
(defn token-tag
2633
"[token-tag opts \"label\"]
@@ -29,37 +36,34 @@
2936
:token string
3037
:value string
3138
:size :small/:big
32-
:icon-name :icon-name
33-
:required-icon :icon-name
39+
:token-img-src :token-img-src
3440
:border-color :color
3541
:is-required true/false
3642
:is-purchasable true/false
3743
}"
3844
[_ _]
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)}}]
45+
(fn [{:keys [token value size token-img-src border-color is-required is-purchasable]
46+
:or {size :small border-color (if (= (theme/get-theme) :dark) colors/purple-60 colors/purple-50)}}]
4147
[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}]]
48+
[rn/image {:source token-img-src
49+
:style {:height (get-value-from-size size 28 20)
50+
:width (get-value-from-size size 28 20)
51+
:margin-left 2
52+
:margin-right (get-value-from-size size 8 6)}}]
4653
[text/text {:weight :medium
4754
:number-of-lines 1
4855
:size (get-value-from-size size :paragraph-2 :label)
4956
:padding 2
5057
:padding-top 12
5158
: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}])])]))
59+
(when (or is-required is-purchasable) [rn/view {:style (merge icon-container-styles {:width 14
60+
:height 14
61+
:background-color border-color
62+
:border-color (if (= (theme/get-theme) :dark) colors/black colors/white)
63+
:border-width 1
64+
:right (get-value-from-size size -5 (if is-required -5 -4))
65+
:bottom (get-value-from-size size (- 32 7 (if is-required 4 3)) (- 24 7 (if is-required 4 3))) ; (- height (icon-height/2) spacing)
66+
})}
67+
[icons/icon (if is-required :main-icons2/required-checkmark12 :main-icons2/purchasable12) {:no-color true
68+
:width (if is-required 6 12)
69+
:height (if is-required 6 12)}]])]))

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