diff --git a/src/quo/components/wallet/account_card/properties.cljs b/src/quo/components/wallet/account_card/properties.cljs index d51711e5b51e..23a1dfb83e4c 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 bcfb1018ef6a..0c2a0f37d918 100644 --- 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 index 84c912b629e4..f1c1e301366e 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)}])]))