status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-27 03:06:39 +00:00
Code Issues Projects Releases Wiki Activity

chore(quo): update styles for account card variant missing keypair (#20279)

Browse Source
This commit is contained in:
Jamie Caprani 2024-06-05 17:18:24 +02:00 committed by GitHub
parent ec00ddf10e
commit e1317f503f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 64 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo/components/wallet/account_card/properties.cljs
View File

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

61
src/quo/components/wallet/account_card/style.cljs
View File

@ -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

50
src/quo/components/wallet/account_card/view.cljs
View File

@ -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