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

status-im · May 30, 2024 · 92b57e0 · 92b57e0
1 parent 36be518
commit 92b57e0
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 22 deletions.
diff --git a/src/quo/components/wallet/account_card/properties.cljs b/src/quo/components/wallet/account_card/properties.cljs
@@ -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))
diff --git a/src/quo/components/wallet/account_card/style.cljs b/src/quo/components/wallet/account_card/style.cljs
@@ -14,7 +14,7 @@
   [{:keys [customization-color type theme pressed? metrics?]}]
   {:width              161
    :height             (if metrics? 88 68)
-   :background-color   (when (not= :watch-only type)
+   :background-color   (when (and (not= :missing-keypair type) (not= :watch-only type))
                          (colors/theme-colors
                           (colors/resolve-color customization-color
                                                 theme
@@ -24,6 +24,7 @@
                                                 (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))
@@ -100,10 +101,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

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