diff --git a/src/quo/components/wallet/account_card/properties.cljs b/src/quo/components/wallet/account_card/properties.cljs index d51711e5b5..23a1dfb83e 100644 --- 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 index bcfb1018ef..03824b7d86 100644 --- a/src/quo/components/wallet/account_card/style.cljs +++ b/src/quo/components/wallet/account_card/style.cljs @@ -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 diff --git a/src/quo/components/wallet/account_card/view.cljs b/src/quo/components/wallet/account_card/view.cljs index 84c912b629..e727b8cfe3 100644 --- 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)}])])) @@ -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