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

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

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 (defn alert-icon-color
[theme] [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 (defn card
[{:keys [customization-color type theme pressed? metrics?]}] [{:keys [customization-color type theme pressed? metrics?]}]
{:width 161 (let [missing-keypair? (= :missing-keypair type)
:height (if metrics? 88 68) watch-only? (= :watch-only type)]
:background-color (when (not= :watch-only type) {:width 161
(colors/theme-colors :height (if metrics? 88 68)
(colors/resolve-color customization-color :background-color (when (and (not missing-keypair?) (not watch-only?))
theme (colors/theme-colors
(when (= :missing-keypair type) (if pressed? 20 10))) (colors/resolve-color customization-color
(colors/resolve-color customization-color theme
theme (when missing-keypair? (if pressed? 20 10)))
(when (= :missing-keypair type) (if pressed? 30 20))) (colors/resolve-color customization-color
theme)) theme
:border-radius 16 (when missing-keypair? (if pressed? 30 20)))
:border-width 1 theme))
:border-color (if (or (= :missing-keypair type) :border-radius 16
(= :watch-only type)) :border-style (if missing-keypair? :dashed :solid)
(colors/theme-colors :border-width 1
(if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5) :border-color (cond
(if pressed? colors/white-opa-10 colors/white-opa-5) watch-only?
theme) (colors/theme-colors
colors/neutral-80-opa-10) (if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5)
:padding-horizontal 12 (if pressed? colors/white-opa-10 colors/white-opa-5)
:padding-top 6 theme)
:padding-bottom 9}) 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 (def profile-container
{:margin-bottom 8 {:margin-bottom 8
@ -100,10 +109,12 @@
:line-height 20}) :line-height 20})
(defn loader-view (defn loader-view
[{:keys [width height watch-only? theme]}] [{:keys [width height watch-only? theme missing-keypair?]}]
{:width width {:width width
:height height :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}) :border-radius 6})
(def loader-container (def loader-container

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

@ -15,8 +15,9 @@
(defn- loading-view (defn- loading-view
[{:keys [customization-color type theme metrics?]}] [{:keys [customization-color type theme metrics?]}]
(let [watch-only? (= :watch-only type) (let [missing-keypair? (= :missing-keypair type)
empty-type? (= :empty type)] watch-only? (= :watch-only type)
empty-type? (= :empty type)]
[rn/view [rn/view
{:accessibility-label :loading {:accessibility-label :loading
:style (style/card {:customization-color customization-color :style (style/card {:customization-color customization-color
@ -26,33 +27,37 @@
:metrics? metrics?})} :metrics? metrics?})}
[rn/view {:style style/loader-container} [rn/view {:style style/loader-container}
[rn/view [rn/view
{:style (assoc (style/loader-view {:width 16 {:style (assoc (style/loader-view {:width 16
:height 16 :height 16
:watch-only? watch-only? :missing-keypair? missing-keypair?
:theme theme}) :watch-only? watch-only?
:theme theme})
:margin-right 8 :margin-right 8
:margin-top 2)}] :margin-top 2)}]
[rn/view {:style style/watch-only-container} [rn/view {:style style/watch-only-container}
[rn/view [rn/view
{:style (style/loader-view {:width 57 {:style (style/loader-view {:width 57
:height 8 :height 8
:watch-only? watch-only? :missing-keypair? missing-keypair?
:theme theme})}] :watch-only? watch-only?
:theme theme})}]
(when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]] (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
[rn/view [rn/view
{:style (assoc (style/loader-view {:width (if empty-type? 56 80) {:style (assoc (style/loader-view {:width (if empty-type? 56 80)
:height 16 :height 16
:watch-only? watch-only? :missing-keypair? missing-keypair?
:theme theme}) :watch-only? watch-only?
:theme theme})
:margin-top :margin-top
13)}] 13)}]
(when metrics? (when metrics?
[rn/view [rn/view
{:accessibility-label :metrics {:accessibility-label :metrics
:style (assoc (style/loader-view {:width (if empty-type? 37 96) :style (assoc (style/loader-view {:width (if empty-type? 37 96)
:height 8 :height 8
:watch-only? watch-only? :missing-keypair? missing-keypair?
:theme theme}) :watch-only? watch-only?
:theme theme})
:margin-top :margin-top
10)}])])) 10)}])]))
@ -154,7 +159,7 @@
[gradient-overview theme customization-color])]))) [gradient-overview theme customization-color])])))
(defn- add-account-view (defn- add-account-view
[{:keys [on-press customization-color metrics?]}] [{:keys [on-press metrics?]}]
(let [theme (quo.theme/use-theme) (let [theme (quo.theme/use-theme)
[pressed? set-pressed] (rn/use-state false) [pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true)) on-press-in (rn/use-callback #(set-pressed true))
@ -168,13 +173,12 @@
:pressed? pressed?})} :pressed? pressed?})}
[button/button [button/button
{:on-press on-press {:on-press on-press
:type :primary :type :ghost
:size 24 :size 32
:icon true :icon true
:accessibility-label :add-account :accessibility-label :add-account
:pressed? pressed? :pressed? pressed?
:icon-only? true :icon-only? true}
:customization-color customization-color}
:i/add]])) :i/add]]))
(defn- view-internal (defn- view-internal