design review

status-im · Jun 5, 2024 · f87bf7c · f87bf7c
1 parent 4cb8f4a
commit f87bf7c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 29 deletions.
diff --git a/src/quo/components/wallet/account_card/style.cljs b/src/quo/components/wallet/account_card/style.cljs
@@ -12,30 +12,38 @@
 
 (defn card
   [{:keys [customization-color type theme pressed? metrics?]}]
-  {:width              161
-   :height             (if metrics? 88 68)
-   :background-color   (when (and (not= :missing-keypair type) (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-style       (if (= type :missing-keypair) :dashed :solid)
-   :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

diff --git a/src/quo/components/wallet/account_card/view.cljs b/src/quo/components/wallet/account_card/view.cljs
@@ -159,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))
@@ -173,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