From 6ebd5b421c25b016a8cb877c613094b03bd44356 Mon Sep 17 00:00:00 2001 From: mmilad75 <55688834+mmilad75@users.noreply.github.com> Date: Thu, 26 Oct 2023 16:46:24 +0330 Subject: [PATCH] Fix account-card component UI (#17589) * add new type * fix lint issues * add tests * refactor get-test-data function * resolve comments * fix imports * resolve comments * fix lint issues * remove extra code * fix height --- .../wallet/account_card/component_spec.cljs | 27 +++++--- .../wallet/account_card/properties.cljs | 20 ++++++ .../components/wallet/account_card/style.cljs | 56 +++++++++++------ .../components/wallet/account_card/view.cljs | 61 ++++++++++++------- .../quo_preview/wallet/account_card.cljs | 29 ++++++--- 5 files changed, 135 insertions(+), 58 deletions(-) create mode 100644 src/quo/components/wallet/account_card/properties.cljs diff --git a/src/quo/components/wallet/account_card/component_spec.cljs b/src/quo/components/wallet/account_card/component_spec.cljs index 9894f05086..1e28f6c113 100644 --- a/src/quo/components/wallet/account_card/component_spec.cljs +++ b/src/quo/components/wallet/account_card/component_spec.cljs @@ -7,7 +7,7 @@ (def empty-username "Account 1") (defn get-test-data - [type watch-only? empty-type? loading? metrics?] + [{:keys [type watch-only? empty-type? loading? no-metrics?]}] {:name (if empty-type? empty-username username) :balance "€1,000.00" :percentage-value "50%" @@ -15,17 +15,18 @@ :customization-color :blue :watch-only? watch-only? :loading? loading? - :metrics? metrics? + :metrics? (not no-metrics?) :type type}) (h/describe "Account_card tests" (h/test "Renders Default" - (let [data (get-test-data :default false false false true)] + (let [data (get-test-data {:type :default})] (h/render [account-card/view data]) (h/is-truthy (h/get-by-text username)))) (h/test "Renders Watch-Only" - (let [data (get-test-data :watch-only true false false true)] + (let [data (get-test-data {:type :watch-only + :watch-only? true})] (h/render [account-card/view data]) (h/is-truthy (h/get-by-text username)))) @@ -35,10 +36,16 @@ (h/is-truthy (h/get-by-label-text :add-account)))) (h/test "Renders Empty" - (let [data (get-test-data :empty false true false true)] + (let [data (get-test-data {:type :empty + :empty-type? true})] (h/render [account-card/view data]) (h/is-truthy (h/get-by-text empty-username)))) + (h/test "Renders Missing Keypair" + (let [data (get-test-data {:type :missing-keypair})] + (h/render [account-card/view data]) + (h/is-truthy (h/get-by-text username)))) + (h/test "Add account on press fires correctly" (let [on-press (h/mock-fn) data {:type :add-account @@ -48,16 +55,20 @@ (h/was-called on-press))) (h/test "Renders component without metrics" - (let [data (get-test-data :default false false false false)] + (let [data (get-test-data {:type :default + :no-metrics? true})] (h/render [account-card/view data]) (h/is-falsy (h/query-by-label-text :metrics)))) (h/test "Renders loading state" - (let [data (get-test-data :default false false true true)] + (let [data (get-test-data {:type :default + :loading? true})] (h/render [account-card/view data]) (h/is-truthy (h/get-by-label-text :loading)))) (h/test "Renders loading state without metrics" - (let [data (get-test-data :default false false true false)] + (let [data (get-test-data {:type :default + :no-metrics? true + :loading? true})] (h/render [account-card/view data]) (h/is-falsy (h/query-by-label-text :metrics))))) diff --git a/src/quo/components/wallet/account_card/properties.cljs b/src/quo/components/wallet/account_card/properties.cljs new file mode 100644 index 0000000000..31f5d7f522 --- /dev/null +++ b/src/quo/components/wallet/account_card/properties.cljs @@ -0,0 +1,20 @@ +(ns quo.components.wallet.account-card.properties + (:require [quo.foundations.colors :as colors])) + +(defn gradient-start-color + [theme customization-color] + (colors/theme-colors + (colors/resolve-color customization-color theme 0) + colors/neutral-95 + theme)) + +(defn gradient-end-color + [theme customization-color] + (colors/theme-colors + (colors/resolve-color customization-color theme 6) + colors/neutral-95 + theme)) + +(defn alert-icon-color + [theme] + (colors/theme-colors colors/neutral-50 colors/white theme)) diff --git a/src/quo/components/wallet/account_card/style.cljs b/src/quo/components/wallet/account_card/style.cljs index bfe62b5c62..a65ad4dddc 100644 --- a/src/quo/components/wallet/account_card/style.cljs +++ b/src/quo/components/wallet/account_card/style.cljs @@ -3,24 +3,29 @@ [quo.foundations.colors :as colors])) (defn text-color - [watch-only? theme] - (if (and watch-only? (= :light theme)) + [type theme] + (if (and (or (= :missing-keypair type) + (= :watch-only type)) + (= :light theme)) colors/neutral-100 colors/white)) (defn card - [{:keys [customization-color watch-only? metrics? theme pressed?]}] + [{:keys [customization-color type theme pressed?]}] {:width 162 - :height (if metrics? 88 68) - :background-color (if watch-only? - (colors/theme-colors colors/neutral-80-opa-5 colors/neutral-95 theme) + :background-color (when (not= :watch-only type) (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) + (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 watch-only? + :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) @@ -28,10 +33,10 @@ colors/neutral-80-opa-10) :padding-horizontal 12 :padding-top 6 - :padding-bottom 10}) + :padding-bottom 9}) (def profile-container - {:margin-bottom 6 + {:margin-bottom 8 :flex-direction :row}) (def metrics-container @@ -39,8 +44,8 @@ :align-items :center}) (defn account-name - [watch-only? theme] - {:color (text-color watch-only? theme) + [type theme] + {:color (text-color type theme) :margin-left 2}) (def watch-only-container @@ -50,21 +55,25 @@ :flex 1}) (defn account-value - [watch-only? theme] - {:color (text-color watch-only? theme)}) + [type theme] + {:color (text-color type theme)}) (defn metrics - [watch-only? theme] - {:color (if (and watch-only? (= :light theme)) + [type theme] + {:color (if (and (or (= :missing-keypair type) + (= :watch-only type)) + (= :light theme)) colors/neutral-80-opa-60 colors/white-opa-70)}) (defn separator - [watch-only? theme] + [type theme] {:width 2 :height 2 :border-radius 20 - :background-color (if (and watch-only? (= :light theme)) + :background-color (if (and (or (= :missing-keypair type) + (= :watch-only type)) + (= :light theme)) colors/neutral-80-opa-20 colors/white-opa-40) :margin-horizontal 4}) @@ -102,3 +111,12 @@ (def metrics-icon-container {:margin-left 4}) + +(def gradient-view + {:position :absolute + :bottom 0 + :top 0 + :left 0 + :right 0 + :border-radius 16 + :z-index -1}) diff --git a/src/quo/components/wallet/account_card/view.cljs b/src/quo/components/wallet/account_card/view.cljs index 620a69bb5b..7f86daa5aa 100644 --- a/src/quo/components/wallet/account_card/view.cljs +++ b/src/quo/components/wallet/account_card/view.cljs @@ -3,11 +3,13 @@ [quo.components.buttons.button.view :as button] [quo.components.icon :as icon] [quo.components.markdown.text :as text] + [quo.components.wallet.account-card.properties :as properties] [quo.components.wallet.account-card.style :as style] [quo.foundations.colors :as colors] [quo.foundations.customization-colors :as customization-colors] [quo.theme :as quo.theme] [react-native.core :as rn] + [react-native.linear-gradient :as linear-gradient] [reagent.core :as reagent])) (defn- loading-view @@ -17,8 +19,7 @@ [rn/view {:accessibility-label :loading :style (style/card {:customization-color customization-color - :watch-only? watch-only? - :metrics? metrics? + :type type :theme theme :pressed? false})} [rn/view {:style style/loader-container} @@ -54,31 +55,43 @@ 10)}])])) (defn- metrics-percentage - [watch-only? theme account-percentage] + [type theme account-percentage] [text/text - {:weight :semi-bold + {:weight :medium :size :paragraph-2 :accessibility-label :metrics - :style (style/metrics watch-only? theme)} + :style (style/metrics type theme)} account-percentage]) (defn- metrics-info - [watch-only? theme account-amount] + [type theme account-amount] [:<> - [rn/view (style/separator watch-only? theme)] + [rn/view (style/separator type theme)] [text/text - {:weight :semi-bold + {:weight :medium :size :paragraph-2 - :style (style/metrics watch-only? theme)} + :style (style/metrics type theme)} account-amount] [rn/view {:style style/metrics-icon-container} [icon/icon :i/positive - {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70) + {:color (colors/theme-colors (if (or (= :missing-keypair type) + (= :watch-only type)) + colors/neutral-50 + colors/white-opa-70) colors/white-opa-70 theme) :size 16}]]]) +(defn- gradient-overview + [theme customization-color] + [linear-gradient/linear-gradient + {:colors [(properties/gradient-start-color theme customization-color) + (properties/gradient-end-color theme customization-color)] + :style style/gradient-view + :start {:x 0 :y 0} + :end {:x 1 :y 0}}]) + (defn- user-account [] (let [pressed? (reagent/atom false) @@ -86,7 +99,8 @@ on-press-out #(reset! pressed? false)] (fn [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics? theme on-press]}] - (let [watch-only? (= :watch-only type)] + (let [watch-only? (= :watch-only type) + missing-keypair? (= :missing-keypair type)] (if loading? [loading-view {:customization-color customization-color @@ -97,12 +111,11 @@ {:on-press-in on-press-in :on-press-out on-press-out :style (style/card {:customization-color customization-color - :watch-only? watch-only? - :metrics? metrics? + :type type :theme theme :pressed? @pressed?}) :on-press on-press} - (when (and customization-color (not watch-only?)) + (when (and customization-color (and (not watch-only?) (not missing-keypair?))) [customization-colors/overlay {:customization-color customization-color :border-radius 16 @@ -115,19 +128,23 @@ [text/text {:size :paragraph-2 :weight :medium - :style (style/account-name watch-only? theme)} + :style (style/account-name type theme)} name] - (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]] + (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}]) + (when missing-keypair? + [icon/icon :i/alert {:color (properties/alert-icon-color theme) :size 12}])]] [text/text {:size :heading-2 :weight :semi-bold - :style (style/account-value watch-only? theme)} + :style (style/account-value type theme)} balance] (when metrics? [rn/view {:style style/metrics-container} - [metrics-percentage watch-only? theme percentage-value] + [metrics-percentage type theme percentage-value] (when (not= :empty type) - [metrics-info watch-only? theme amount])])]))))) + [metrics-info type theme amount])]) + (when watch-only? + [gradient-overview theme customization-color])]))))) (defn- add-account-view [] @@ -156,10 +173,8 @@ (defn- view-internal [{:keys [type] :as props}] (case type - :watch-only [user-account props] - :add-account [add-account-view props] - :default [user-account props] - :empty [user-account props] + (:watch-only :default :empty :missing-keypair) [user-account props] + :add-account [add-account-view props] nil)) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs index b5d0d28cb9..94209d4a0c 100644 --- a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs @@ -20,7 +20,9 @@ {:key :add-account :value "Add Account"} {:key :empty - :value "Empty"}]} + :value "Empty"} + {:key :missing-keypair + :value "Missing Keypair"}]} {:label "Customization color:" :key :customization-color :type :select @@ -73,13 +75,24 @@ :emoji "🍑"} :watch-only - {:name "Alisher account" - :balance "€2,269.12" - :percentage-value "16.9%" - :amount "€570.24" - :metrics? true - :type :watch-only - :emoji "💸"} + {:name "Ben’s fortune" + :balance "€2,269.12" + :percentage-value "16.9%" + :amount "€570.24" + :metrics? true + :type :watch-only + :customization-color :army + :emoji "💸"} + + :missing-keypair + {:name "Trip to Vegas" + :balance "€2,269.12" + :percentage-value "16.9%" + :amount "€570.24" + :metrics? true + :customization-color :turquoise + :type :missing-keypair + :emoji "🎲"} :add-account {:customization-color :blue