Wallet: receive screen

src/quo/components/drawers/drawer_top/style.cljs

@@ -12,9 +12,10 @@
 
 (defn description
   [theme blur?]
-  {:color (if blur?
-            colors/white-opa-40
-            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
+  {:color      (if blur?
+                 colors/white-opa-40
+                 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
+   :margin-top 2})
 
 (def left-container
   {:margin-right    8

src/quo/components/drawers/drawer_top/view.cljs

@@ -160,7 +160,8 @@
     [rn/view {:style style/title-container}
      [text/text
       {:size   :heading-2
-       :weight :semi-bold}
+       :weight :semi-bold
+       :style  {:color (when blur? colors/white)}}
       title]
      (when title-icon
        [icons/icon title-icon

src/quo/components/settings/category/settings/view.cljs

@@ -3,23 +3,22 @@
     [quo.components.markdown.text :as text]
     [quo.components.settings.category.style :as style]
     [quo.components.settings.settings-item.view :as settings-item]
-    [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]))
 
 (defn- category-internal
-  [{:keys [label data blur? container-style theme]}]
-  [rn/view {:style (merge (style/container label) container-style)}
+  [{:keys [label data] :as props}]
+  [rn/view {:style (style/container label)}
    (when label
      [text/text
       {:weight :medium
        :size   :paragraph-2
-       :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+       :style  (style/label props)}
       label])
    [rn/flat-list
     {:data      data
-     :style     (style/settings-items theme blur?)
-     :render-fn (fn [item] [settings-item/view item])
-     :separator [rn/view {:style (style/settings-separator theme blur?)}]}]])
+     :style     (style/settings-items props)
+     :render-fn settings-item/view
+     :separator [rn/view {:style (style/settings-separator props)}]}]])
 
 (def settings-category (quo.theme/with-theme category-internal))

src/quo/components/settings/category/style.cljs

@@ -11,7 +11,7 @@
    :padding-bottom     8})
 
 (defn settings-items
-  [theme blur?]
+  [{:keys [blur? theme]}]
   {:margin-top       12
    :border-radius    16
    :background-color (if blur?
@@ -22,11 +22,17 @@
                        colors/white-opa-5
                        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
 
+(defn label
+  [{:keys [blur? theme]}]
+  {:color (if blur?
+            colors/white-opa-40
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
+
 (def reorder-items
   {:margin-top 12})
 
 (defn settings-separator
-  [theme blur?]
+  [{:keys [blur? theme]}]
   {:height           1
    :background-color (if blur?
                        colors/white-opa-5

src/quo/components/settings/data_item/style.cljs

@@ -10,6 +10,9 @@
    :padding-horizontal (when (= size :default) 12)
    :border-radius      16
    :border-width       (when (and card? (not= size :small)) 1)
+   :background-color   (if blur?
+                         colors/white-opa-5
+                         (colors/theme-colors colors/white colors/neutral-95 theme))
    :border-color       (if blur?
                          colors/white-opa-10
                          (colors/theme-colors colors/neutral-10
@@ -42,10 +45,12 @@
    :justify-content :center})
 
 (defn title
-  [theme]
-  {:color        (colors/theme-colors colors/neutral-50
-                                      colors/neutral-40
-                                      theme)
+  [blur? theme]
+  {:color        (if blur?
+                   colors/white-opa-40
+                   (colors/theme-colors colors/neutral-50
+                                        colors/neutral-40
+                                        theme))
    :margin-right 4})
 
 (def title-container

src/quo/components/settings/data_item/view.cljs

@@ -44,18 +44,18 @@
     subtitle]])
 
 (defn- left-title
-  [{:keys [title label size theme]}]
+  [{:keys [title label size blur? theme]}]
   [rn/view {:style style/title-container}
    [text/text
     {:weight :regular
      :size   :paragraph-2
-     :style  (style/title theme)}
+     :style  (style/title blur? theme)}
     title]
    (when (and (= :graph label) (not= :small size))
      [text/text
       {:weight :regular
        :size   :label
-       :style  (style/title theme)}
+       :style  (style/title blur? theme)}
       (i18n/label :t/days)])])
 
 (defn- left-side
@@ -68,6 +68,7 @@
     {:title title
      :label label
      :size  size
+     :blur? blur?
      :theme theme}]
    (if (= status :loading)
      [left-loading

src/quo/components/settings/settings_item/view.cljs

@@ -10,6 +10,7 @@
     [quo.components.settings.settings-item.style :as style]
     [quo.components.tags.context-tag.view :as context-tag]
     [quo.components.tags.status-tags :as status-tags]
+    [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [utils.i18n :as i18n]))
@@ -101,15 +102,17 @@
      nil)])
 
 (defn- internal-view
-  [{:keys [title on-press action-props accessibility-label container-style] :as props}]
+  [{:keys [title on-press action-props accessibility-label blur? container-style] :as props}]
   [rn/pressable
    {:style               (merge style/container container-style)
     :on-press            on-press
     :accessibility-label accessibility-label}
    [rn/view {:style (style/left-sub-container props)}
     [image-component props]
     [rn/view {:style style/left-container}
-     [text/text {:weight :medium} title]
+     [text/text
+      {:weight :medium
+       :style  {:color (when blur? colors/white)}} title]
      [description-component props]
      [tag-component props]]]
    [rn/view {:style (style/sub-container (:alignment action-props))}

src/quo/components/share/share_qr_code/component_spec.cljs

@@ -73,10 +73,6 @@
            :accessibility-label :link-to-profile
            :event-name          :press
            :callback-prop-key   :on-share-press}
-          {:test-name           "Info icon pressed"
-           :accessibility-label :share-qr-code-info-icon
-           :event-name          :press
-           :callback-prop-key   :on-info-press}
           {:test-name           "Legacy tab pressed"
            :accessibility-label :share-qr-code-legacy-tab
            :event-name          :press
@@ -101,10 +97,6 @@
            :accessibility-label :link-to-profile
            :event-name          :press
            :callback-prop-key   :on-share-press}
-          {:test-name           "Info icon pressed"
-           :accessibility-label :share-qr-code-info-icon
-           :event-name          :press
-           :callback-prop-key   :on-info-press}
           {:test-name           "Legacy tab pressed"
            :accessibility-label :share-qr-code-legacy-tab
            :event-name          :press

src/quo/components/share/share_qr_code/style.cljs

@@ -25,17 +25,20 @@
 (def header-tab-inactive {:background-color colors/white-opa-5})
 (def space-between-tabs {:width 8})
 
-(def info-icon
-  {:margin-left :auto
-   :align-self  :center})
-
-(def info-icon-color colors/white-opa-40)
-
 ;;; QR code
 (defn qr-code-size
   [total-width]
   (- total-width (* 2 padding-horizontal)))
 
+(def share-qr-container
+  {:flex-direction  :row
+   :justify-content :space-between
+   :margin-bottom   20})
+
+(def share-qr-inner-container
+  {:flex-direction :row
+   :align-items    :center})
+
 ;;; Bottom part
 (def bottom-container
   {:margin-top      8
@@ -57,29 +60,12 @@
   {:width (- total-width (* 2 padding-horizontal) share-button-size share-button-gap)})
 
 ;;; Wallet variants
-(def wallet-data-and-share-container
-  {:margin-top      2
-   :flex-direction  :row
-   :justify-content :space-between})
-
-(def wallet-legacy-container {:flex 1})
-
-(def wallet-multichain-container {:flex 1 :margin-top 4})
-
-(def wallet-multichain-networks
+(def wallet-multichain-container
   {:flex-direction  :row
    :justify-content :space-between
-   :margin-bottom   8})
-
-(def wallet-multichain-data-container {:margin-top 4})
+   :flex            1})
 
 ;;; Dashed line
-(def divider-container
-  {:height            8
-   :margin-horizontal 4
-   :justify-content   :center
-   :overflow          :hidden})
-
 (def ^:private padding-for-divider (+ padding-horizontal 4))
 (def ^:private dashed-line-width 2)
 (def ^:private dashed-line-space 4)