chore(quo): update styles for account card variant missing keypair (#20279)
This commit is contained in:
Jamie Caprani
GitHub
parent
ec00ddf10e
commit
e1317f503f
|
|
@ -11,4 +11,4 @@
|
|||
|
||||
(defn alert-icon-color
|
||||
[theme]
|
||||
(colors/theme-colors colors/neutral-50 colors/white theme))
|
||||
(colors/theme-colors colors/neutral-80-opa-60 colors/white-70-blur theme))
|
||||
|
|
|
|||
|
|
@ -12,29 +12,38 @@
|
|||
|
||||
(defn card
|
||||
[{:keys [customization-color type theme pressed? metrics?]}]
|
||||
{:width 161
|
||||
:height (if metrics? 88 68)
|
||||
:background-color (when (not= :watch-only type)
|
||||
(colors/theme-colors
|
||||
(colors/resolve-color customization-color
|
||||
theme
|
||||
(when (= :missing-keypair type) (if pressed? 20 10)))
|
||||
(colors/resolve-color customization-color
|
||||
theme
|
||||
(when (= :missing-keypair type) (if pressed? 30 20)))
|
||||
theme))
|
||||
:border-radius 16
|
||||
:border-width 1
|
||||
:border-color (if (or (= :missing-keypair type)
|
||||
(= :watch-only type))
|
||||
(colors/theme-colors
|
||||
(if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5)
|
||||
(if pressed? colors/white-opa-10 colors/white-opa-5)
|
||||
theme)
|
||||
colors/neutral-80-opa-10)
|
||||
:padding-horizontal 12
|
||||
:padding-top 6
|
||||
:padding-bottom 9})
|
||||
(let [missing-keypair? (= :missing-keypair type)
|
||||
watch-only? (= :watch-only type)]
|
||||
{:width 161
|
||||
:height (if metrics? 88 68)
|
||||
:background-color (when (and (not missing-keypair?) (not watch-only?))
|
||||
(colors/theme-colors
|
||||
(colors/resolve-color customization-color
|
||||
theme
|
||||
(when missing-keypair? (if pressed? 20 10)))
|
||||
(colors/resolve-color customization-color
|
||||
theme
|
||||
(when missing-keypair? (if pressed? 30 20)))
|
||||
theme))
|
||||
:border-radius 16
|
||||
:border-style (if missing-keypair? :dashed :solid)
|
||||
:border-width 1
|
||||
:border-color (cond
|
||||
watch-only?
|
||||
(colors/theme-colors
|
||||
(if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5)
|
||||
(if pressed? colors/white-opa-10 colors/white-opa-5)
|
||||
theme)
|
||||
missing-keypair?
|
||||
(colors/theme-colors
|
||||
(if pressed? colors/neutral-40 colors/neutral-30)
|
||||
(if pressed? colors/neutral-70 colors/neutral-80)
|
||||
theme)
|
||||
:else
|
||||
colors/neutral-80-opa-10)
|
||||
:padding-horizontal 12
|
||||
:padding-top 6
|
||||
:padding-bottom 9}))
|
||||
|
||||
(def profile-container
|
||||
{:margin-bottom 8
|
||||
|
|
@ -100,10 +109,12 @@
|
|||
:line-height 20})
|
||||
|
||||
(defn loader-view
|
||||
[{:keys [width height watch-only? theme]}]
|
||||
[{:keys [width height watch-only? theme missing-keypair?]}]
|
||||
{:width width
|
||||
:height height
|
||||
:background-color (if (and watch-only? (= :light theme)) colors/neutral-80-opa-5 colors/white-opa-10)
|
||||
:background-color (if (and (or missing-keypair? watch-only?) (= :light theme))
|
||||
colors/neutral-80-opa-5
|
||||
colors/white-opa-10)
|
||||
:border-radius 6})
|
||||
|
||||
(def loader-container
|
||||
|
|
|
|||
|
|
@ -15,8 +15,9 @@
|
|||
|
||||
(defn- loading-view
|
||||
[{:keys [customization-color type theme metrics?]}]
|
||||
(let [watch-only? (= :watch-only type)
|
||||
empty-type? (= :empty type)]
|
||||
(let [missing-keypair? (= :missing-keypair type)
|
||||
watch-only? (= :watch-only type)
|
||||
empty-type? (= :empty type)]
|
||||
[rn/view
|
||||
{:accessibility-label :loading
|
||||
:style (style/card {:customization-color customization-color
|
||||
|
|
@ -26,33 +27,37 @@
|
|||
:metrics? metrics?})}
|
||||
[rn/view {:style style/loader-container}
|
||||
[rn/view
|
||||
{:style (assoc (style/loader-view {:width 16
|
||||
:height 16
|
||||
:watch-only? watch-only?
|
||||
:theme theme})
|
||||
{:style (assoc (style/loader-view {:width 16
|
||||
:height 16
|
||||
:missing-keypair? missing-keypair?
|
||||
:watch-only? watch-only?
|
||||
:theme theme})
|
||||
:margin-right 8
|
||||
:margin-top 2)}]
|
||||
[rn/view {:style style/watch-only-container}
|
||||
[rn/view
|
||||
{:style (style/loader-view {:width 57
|
||||
:height 8
|
||||
:watch-only? watch-only?
|
||||
:theme theme})}]
|
||||
{:style (style/loader-view {:width 57
|
||||
:height 8
|
||||
:missing-keypair? missing-keypair?
|
||||
:watch-only? watch-only?
|
||||
:theme theme})}]
|
||||
(when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
|
||||
[rn/view
|
||||
{:style (assoc (style/loader-view {:width (if empty-type? 56 80)
|
||||
:height 16
|
||||
:watch-only? watch-only?
|
||||
:theme theme})
|
||||
{:style (assoc (style/loader-view {:width (if empty-type? 56 80)
|
||||
:height 16
|
||||
:missing-keypair? missing-keypair?
|
||||
:watch-only? watch-only?
|
||||
:theme theme})
|
||||
:margin-top
|
||||
13)}]
|
||||
(when metrics?
|
||||
[rn/view
|
||||
{:accessibility-label :metrics
|
||||
:style (assoc (style/loader-view {:width (if empty-type? 37 96)
|
||||
:height 8
|
||||
:watch-only? watch-only?
|
||||
:theme theme})
|
||||
:style (assoc (style/loader-view {:width (if empty-type? 37 96)
|
||||
:height 8
|
||||
:missing-keypair? missing-keypair?
|
||||
:watch-only? watch-only?
|
||||
:theme theme})
|
||||
:margin-top
|
||||
10)}])]))
|
||||
|
||||
|
|
@ -154,7 +159,7 @@
|
|||
[gradient-overview theme customization-color])])))
|
||||
|
||||
(defn- add-account-view
|
||||
[{:keys [on-press customization-color metrics?]}]
|
||||
[{:keys [on-press metrics?]}]
|
||||
(let [theme (quo.theme/use-theme)
|
||||
[pressed? set-pressed] (rn/use-state false)
|
||||
on-press-in (rn/use-callback #(set-pressed true))
|
||||
|
|
@ -168,13 +173,12 @@
|
|||
:pressed? pressed?})}
|
||||
[button/button
|
||||
{:on-press on-press
|
||||
:type :primary
|
||||
:size 24
|
||||
:type :ghost
|
||||
:size 32
|
||||
:icon true
|
||||
:accessibility-label :add-account
|
||||
:pressed? pressed?
|
||||
:icon-only? true
|
||||
:customization-color customization-color}
|
||||
:icon-only? true}
|
||||
:i/add]]))
|
||||
|
||||
(defn- view-internal
|
||||
|
|
|
|||
Loading…
Reference in New Issue