Quo2: Account list card blur (#17271)

* Quo2: account list card blur
status-im · Sep 15, 2023 · 4d9ebdb · 4d9ebdb
1 parent e2f837f
commit 4d9ebdb
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 52 deletions.
diff --git 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
@@ -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
@@ -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]])))