Quo2: Account list card blur (#17271)

* Quo2: account list card blur

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)
+     :background-color   (if blur? blur-bg (colors/theme-colors light-bg dark-bg theme))
-     :border-width       1
+     :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})

src/quo2/components/list_items/account_list_card/view.cljs

@@ -6,16 +6,20 @@
     [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
+  (let [state (reagent/atom :default)]
-   {:style               (style/container state theme)
+    (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
+       [rn/view {:style style/left-container}
-    {:style {:flex-direction :row
-             :align-items    :center}}
         [account-avatar/view account-props]
         [rn/view {:style {:margin-left 8}}
          [text/text
@@ -31,12 +35,16 @@
                networks)
           [text/text
            {:size  :paragraph-2
-        :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+            :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-press}
+         [rn/pressable {:on-press on-options-press}
           [icon/icon :i/options
-       {:color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+           {:color               (if blur?
-        :accessibility-label :icon}]])])
+                                   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))

src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs

@@ -4,14 +4,12 @@
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:key     :state
+  [{:key     :action
-    :type    :select
-    :options [{:key :default}
-              {:key :pressed}]}
-   {:key     :action
     :type    :select
     :options [{:key :none}
-              {:key :icon}]}])
+              {:key :icon}]}
+   {:key  :blur?
+    :type :boolean}])
 
 (defn view
   []
@@ -22,9 +20,15 @@
                                                 :name                "Trip to Vegas"
                                                 :address             "0x0ah...78b"}
                              :networks         [:ethereum :optimism]
-                             :state         :default
                              :action           :none
-                             :on-press      (fn [] (js/alert "Button pressed"))})]
+                             :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]])))