diff --git a/src/quo2/components/buttons/button/view.cljs b/src/quo2/components/buttons/button/view.cljs index 58cba2cf57..57ca495a38 100644 --- a/src/quo2/components/buttons/button/view.cljs +++ b/src/quo2/components/buttons/button/view.cljs @@ -29,10 +29,11 @@ only icon [button {:icon-only? true} :i/close-circle]" [_ _] - (let [pressed? (reagent/atom false)] + (let [pressed-state? (reagent/atom false)] (fn [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top - customization-color theme accessibility-label icon-only? container-style inner-style] + customization-color theme accessibility-label icon-only? container-style inner-style + pressed? on-press-in on-press-out] :or {type :primary size 40 customization-color (cond (= type :primary) :blue @@ -46,14 +47,18 @@ :background background :type type :theme theme - :pressed? @pressed? + :pressed? (if pressed? pressed? @pressed-state?) :icon-only? icon-only?}) icon-size (when (= 24 size) 12)] [rn/touchable-without-feedback {:disabled disabled? :accessibility-label accessibility-label - :on-press-in #(reset! pressed? true) - :on-press-out #(reset! pressed? nil) + :on-press-in (fn [] + (reset! pressed-state? true) + (when on-press-in (on-press-in))) + :on-press-out (fn [] + (reset! pressed-state? nil) + (when on-press-out (on-press-out))) :on-press on-press :on-long-press on-long-press} [rn/view @@ -76,7 +81,7 @@ [customization-colors/overlay {:customization-color customization-color :theme theme - :pressed? @pressed?}]) + :pressed? (if pressed? pressed? @pressed-state?)}]) (when (= background :photo) [blur/view {:blur-radius 20 diff --git a/src/quo2/components/wallet/account_card/style.cljs b/src/quo2/components/wallet/account_card/style.cljs index 54c30e6239..90c0d6ac6e 100644 --- a/src/quo2/components/wallet/account_card/style.cljs +++ b/src/quo2/components/wallet/account_card/style.cljs @@ -9,7 +9,7 @@ colors/white)) (defn card - [customization-color watch-only? metrics? theme] + [{:keys [customization-color watch-only? metrics? theme pressed?]}] {:width 162 :height (if metrics? 88 68) :background-color (if watch-only? @@ -21,7 +21,10 @@ :border-radius 16 :border-width 1 :border-color (if watch-only? - (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) + (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 @@ -67,10 +70,13 @@ :margin-horizontal 4}) (defn add-account-container - [theme metrics?] + [{:keys [theme metrics? pressed?]}] {:width 161 :height (if metrics? 88 68) - :border-color (colors/theme-colors colors/neutral-20 colors/white-opa-5 theme) + :border-color (colors/theme-colors + (if pressed? colors/neutral-40 colors/neutral-30) + (if pressed? colors/neutral-70 colors/neutral-80) + theme) :border-width 1 :border-style :dashed :align-items :center @@ -84,7 +90,7 @@ :line-height 20}) (defn loader-view - [width height watch-only? theme] + [{:keys [width height watch-only? theme]}] {:width width :height height :background-color (if (and watch-only? (= :light theme)) colors/neutral-80-opa-5 colors/white-opa-10) @@ -93,3 +99,6 @@ (def loader-container {:flex-direction :row :align-items :center}) + +(def metrics-icon-container + {:margin-left 4}) diff --git a/src/quo2/components/wallet/account_card/view.cljs b/src/quo2/components/wallet/account_card/view.cljs index c7b6f7bb28..85e033a396 100644 --- a/src/quo2/components/wallet/account_card/view.cljs +++ b/src/quo2/components/wallet/account_card/view.cljs @@ -5,8 +5,9 @@ [quo2.components.wallet.account-card.style :as style] [quo2.components.buttons.button.view :as button] [quo2.components.markdown.text :as text] - [utils.i18n :as i18n] - [quo2.theme :as theme])) + [quo2.theme :as quo.theme] + [reagent.core :as reagent] + [quo2.foundations.customization-colors :as customization-colors])) (defn- loading-view [{:keys [customization-color type theme metrics?]}] @@ -14,103 +15,142 @@ empty-type? (= :empty type)] [rn/view {:accessibility-label :loading - :style (style/card customization-color watch-only? metrics? theme)} + :style (style/card {:customization-color customization-color + :watch-only? watch-only? + :metrics? metrics? + :theme theme + :pressed? false})} [rn/view {:style style/loader-container} [rn/view - {:style (assoc (style/loader-view 16 - 16 - watch-only? - theme) + {:style (assoc (style/loader-view {:width 16 + :height 16 + :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 57 8 watch-only? theme)}] - (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]] + [rn/view + {:style (style/loader-view {:width 57 + :height 8 + :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 - (if empty-type? 56 80) - 16 - watch-only? - theme) + {:style (assoc (style/loader-view {:width (if empty-type? 56 80) + :height 16 + :watch-only? watch-only? + :theme theme}) :margin-top 13)}] (when metrics? [rn/view {:accessibility-label :metrics - :style (assoc (style/loader-view - (if empty-type? 37 96) - 8 - watch-only? - theme) + :style (assoc (style/loader-view {:width (if empty-type? 37 96) + :height 8 + :watch-only? watch-only? + :theme theme}) :margin-top 10)}])])) +(defn- metrics-percentage + [watch-only? theme account-percentage] + [text/text + {:weight :semi-bold + :size :paragraph-2 + :accessibility-label :metrics + :style (style/metrics watch-only? theme)} + account-percentage]) + +(defn- metrics-info + [watch-only? theme account-amount] + [:<> + [rn/view (style/separator watch-only? theme)] + [text/text + {:weight :semi-bold + :size :paragraph-2 + :style (style/metrics watch-only? 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) + colors/white-opa-70 + theme) + :size 16}]]]) + (defn- user-account - [{:keys [state name balance percentage-value loading? amount customization-color type emoji metrics? - theme on-press]}] - (let [watch-only? (= :watch-only type) - empty-type? (= :empty type) - account-amount (if (= :empty state) "€0.00" amount) - account-name (if (= :empty state) (i18n/label :t/Account 1) name) - account-percentage (if (= :empty state) "€0.00" percentage-value)] - (if loading? - [loading-view - {:customization-color customization-color - :type type - :theme theme - :metrics? metrics?}] - [rn/pressable - {:style (style/card customization-color watch-only? metrics? theme) - :on-press on-press} - [rn/view {:style style/profile-container} - [rn/view {:style {:padding-bottom 2 :margin-right 2}} - [text/text {:style style/emoji} emoji]] - [rn/view {:style style/watch-only-container} - [text/text - {:size :paragraph-2 - :weight :medium - :style (style/account-name watch-only? theme)} - account-name] - (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]] - [text/text - {:size :heading-2 - :weight :semi-bold - :style (style/account-value watch-only? theme)} - balance] - (when metrics? - [rn/view {:style style/metrics-container} - [text/text - {:weight :semi-bold - :size :paragraph-2 - :accessibility-label :metrics - :style (style/metrics watch-only? theme)} - account-percentage] - (when (not empty-type?) - [:<> - [rn/view (style/separator watch-only? theme)] + [] + (let [pressed? (reagent/atom false) + on-press-in #(reset! pressed? true) + 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)] + (if loading? + [loading-view + {:customization-color customization-color + :type type + :theme theme + :metrics? metrics?}] + [rn/pressable + {: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? + :theme theme + :pressed? @pressed?}) + :on-press on-press} + (when (and customization-color (not watch-only?)) + [customization-colors/overlay + {:customization-color customization-color + :border-radius 16 + :theme theme + :pressed? @pressed?}]) + [rn/view {:style style/profile-container} + [rn/view {:style {:padding-bottom 2 :margin-right 2}} + [text/text {:style style/emoji} emoji]] + [rn/view {:style style/watch-only-container} [text/text - {:weight :semi-bold - :size :paragraph-2 - :style (style/metrics watch-only? theme)} account-amount] - [rn/view {:style {:margin-left 4}} - [icon/icon :positive - {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70) - colors/white-opa-70 - theme) - :size 16}]]])])]))) + {:size :paragraph-2 + :weight :medium + :style (style/account-name watch-only? theme)} + name] + (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]] + [text/text + {:size :heading-2 + :weight :semi-bold + :style (style/account-value watch-only? theme)} + balance] + (when metrics? + [rn/view {:style style/metrics-container} + [metrics-percentage watch-only? theme percentage-value] + (when (not= :empty type) + [metrics-info watch-only? theme amount])])]))))) (defn- add-account-view - [{:keys [on-press customization-color theme metrics?]}] - [rn/view (style/add-account-container theme metrics?) - [button/button - {:type :primary - :size 24 - :icon true - :accessibility-label :add-account - :on-press on-press - :customization-color customization-color - :icon-only? true} - :i/add]]) + [] + (let [pressed? (reagent/atom false)] + (fn [{:keys [on-press customization-color theme metrics?]}] + [rn/pressable + {:on-press on-press + :on-press-in #(reset! pressed? true) + :on-press-out #(reset! pressed? false) + :style (style/add-account-container {:theme theme + :metrics? metrics? + :pressed? @pressed?})} + [button/button + {:type :primary + :size 24 + :icon true + :accessibility-label :add-account + :on-press on-press + :pressed? @pressed? + :on-press-in #(reset! pressed? true) + :on-press-out #(reset! pressed? false) + :customization-color customization-color + :icon-only? true} + :i/add]]))) (defn- view-internal [{:keys [type] :as props}] @@ -121,4 +161,4 @@ :empty [user-account props] nil)) -(def view (theme/with-theme view-internal)) +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/foundations/customization_colors.cljs b/src/quo2/foundations/customization_colors.cljs index e67fd306e0..125d9871e9 100644 --- a/src/quo2/foundations/customization_colors.cljs +++ b/src/quo2/foundations/customization_colors.cljs @@ -10,11 +10,12 @@ (colors/alpha colors/black (if pressed? 0 0.2))))) (defn overlay - [{:keys [theme pressed? customization-color]}] + [{:keys [theme pressed? customization-color border-radius]}] [rn/view {:position :absolute :top 0 :left 0 :right 0 :bottom 0 + :border-radius border-radius :background-color (get-overlay-color theme pressed? customization-color)}]) 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 2a20291e92..a13bebb887 100644 --- a/src/status_im2/contexts/quo_preview/wallet/account_card.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/account_card.cljs @@ -116,7 +116,5 @@ :justify-content :center :margin-left 8}} [icon/icon :i/check {:color colors/white :size 16}]]] - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] - [rn/view {:style {:align-items :center :margin-top 40}} + [rn/view {:style {:align-items :center :margin-bottom 20}} [quo/account-card @state]]])]))