diff --git a/src/quo2/components/list_items/account_list_card/style.cljs b/src/quo2/components/list_items/account_list_card/style.cljs index f05ba83e503..1a0fb28cf5e 100644 --- a/src/quo2/components/list_items/account_list_card/style.cljs +++ b/src/quo2/components/list_items/account_list_card/style.cljs @@ -2,19 +2,23 @@ (:require [quo2.foundations.colors :as colors])) (defn container - [state theme] + [{:keys [state blur? theme]}] (let [light-bg (if (= state :default) colors/neutral-2_5 colors/neutral-5) dark-bg (if (= state :default) colors/neutral-80-opa-40 colors/neutral-80-opa-60) + blur-bg (if (= state :default) colors/white-opa-5 colors/white-opa-10) light-border (if (= state :default) colors/neutral-10 colors/neutral-20) dark-border (if (= state :default) colors/neutral-80 colors/neutral-70)] - {:width 319 - :height 48 + {:height 48 :border-radius 12 - :background-color (colors/theme-colors light-bg dark-bg theme) - :border-width 1 + :background-color (if blur? blur-bg (colors/theme-colors light-bg dark-bg theme)) + :border-width (if blur? 0 1) :border-color (colors/theme-colors light-border dark-border theme) :flex-direction :row :align-items :center :padding-horizontal 8 :padding-vertical 6 :justify-content :space-between})) + +(def left-container + {:flex-direction :row + :align-items :center}) diff --git a/src/quo2/components/list_items/account_list_card/view.cljs b/src/quo2/components/list_items/account_list_card/view.cljs index 278f1bc19e0..87711aed66e 100644 --- a/src/quo2/components/list_items/account_list_card/view.cljs +++ b/src/quo2/components/list_items/account_list_card/view.cljs @@ -6,37 +6,45 @@ [quo2.foundations.colors :as colors] [quo2.theme :as quo.theme] [react-native.core :as rn] - [quo2.components.list-items.account-list-card.style :as style])) + [quo2.components.list-items.account-list-card.style :as style] + [reagent.core :as reagent])) (defn- internal-view - [{:keys [theme account-props networks state action on-press]}] - [rn/view - {:style (style/container state theme) - :accessibility-label :container} - [rn/view - {:style {:flex-direction :row - :align-items :center}} - [account-avatar/view account-props] - [rn/view {:style {:margin-left 8}} - [text/text - {:weight :semi-bold - :size :paragraph-2} - (:name account-props)] - [text/text {:size :paragraph-2} - (map (fn [network] - ^{:key (str network)} - [text/text - {:size :paragraph-2 - :style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")]) - networks) - [text/text - {:size :paragraph-2 - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - (:address account-props)]]]] - (when (= action :icon) - [rn/pressable {:on-press on-press} - [icon/icon :i/options - {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) - :accessibility-label :icon}]])]) + [] + (let [state (reagent/atom :default)] + (fn [{:keys [action blur? account-props networks on-press on-options-press theme]}] + [rn/pressable + {:style (style/container {:state @state :blur? blur? :theme theme}) + :on-press-in #(reset! state :pressed) + :on-press-out #(reset! state :default) + :on-press on-press + :accessibility-label :container} + [rn/view {:style style/left-container} + [account-avatar/view account-props] + [rn/view {:style {:margin-left 8}} + [text/text + {:weight :semi-bold + :size :paragraph-2} + (:name account-props)] + [text/text {:size :paragraph-2} + (map (fn [network] + ^{:key (str network)} + [text/text + {:size :paragraph-2 + :style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")]) + networks) + [text/text + {:size :paragraph-2 + :style {:color (if blur? + colors/white-opa-40 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}} + (:address account-props)]]]] + (when (= action :icon) + [rn/pressable {:on-press on-options-press} + [icon/icon :i/options + {:color (if blur? + colors/white-opa-70 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)) + :accessibility-label :icon}]])]))) (def view (quo.theme/with-theme internal-view)) diff --git a/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs b/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs index b9a190f0462..87a2ef3ea76 100644 --- a/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs @@ -4,27 +4,31 @@ [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:key :state - :type :select - :options [{:key :default} - {:key :pressed}]} - {:key :action + [{:key :action :type :select :options [{:key :none} - {:key :icon}]}]) + {:key :icon}]} + {:key :blur? + :type :boolean}]) (defn view [] - (let [state (reagent/atom {:account-props {:customization-color :purple - :size 32 - :emoji "🍑" - :type :default - :name "Trip to Vegas" - :address "0x0ah...78b"} - :networks [:ethereum :optimism] - :state :default - :action :none - :on-press (fn [] (js/alert "Button pressed"))})] + (let [state (reagent/atom {:account-props {:customization-color :purple + :size 32 + :emoji "🍑" + :type :default + :name "Trip to Vegas" + :address "0x0ah...78b"} + :networks [:ethereum :optimism] + :action :none + :on-press (fn [] (js/alert "Item pressed")) + :on-options-press (fn [] (js/alert "Options pressed")) + :blur? false})] (fn [] - [preview/preview-container {:state state :descriptor descriptor} + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true + :blur-dark-only? true} [quo/account-list-card @state]])))