Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jun 5, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac7b38c
chore(quo): update styles for account card variant missing keypair
J-Son89 May 30, 2024
7d63963
design review
J-Son89 Jun 5, 2024
d2c56af
Merge branch 'develop' into jc/quo-missing-kp
J-Son89 Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/quo/components/wallet/account_card/properties.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 36 additions & 25 deletions src/quo/components/wallet/account_card/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
50 changes: 27 additions & 23 deletions src/quo/components/wallet/account_card/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)}])]))

Expand Down Expand Up @@ -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))
Expand All @@ -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
Expand Down