chore: add background color gradient to share qr code component (#18503)

src/quo/components/gradient/gradient_cover/style.cljs

@@ -1,6 +1,6 @@
 (ns quo.components.gradient.gradient-cover.style)
 
 (defn root-container
-  [opacity]
-  {:height  252
+  [opacity height]
+  {:height  (or height 252)
    :opacity opacity})

src/quo/components/gradient/gradient_cover/view.cljs

@@ -6,7 +6,7 @@
     [react-native.linear-gradient :as linear-gradient]))
 
 (defn- view-internal
-  [{:keys [customization-color opacity container-style] :or {customization-color :blue}}]
+  [{:keys [customization-color opacity container-style height] :or {customization-color :blue}}]
   (let [color-top    (colors/custom-color customization-color 50 20)
         color-bottom (colors/custom-color customization-color 50 0)]
     [linear-gradient/linear-gradient
@@ -14,6 +14,6 @@
       :colors              [color-top color-bottom]
       :start               {:x 0 :y 0}
       :end                 {:x 0 :y 1}
-      :style               (merge (style/root-container opacity) container-style)}]))
+      :style               (merge (style/root-container opacity height) container-style)}]))
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -16,6 +16,12 @@
    :padding-top        12
    :padding-bottom     8})
 
+(def gradient-bg
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0})
+
 ;;; Header
 (def header-container
   {:flex-direction :row

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

@@ -4,14 +4,13 @@
             [oops.core :as oops]
             [quo.components.avatars.account-avatar.view :as account-avatar]
             [quo.components.buttons.button.view :as button]
+            [quo.components.gradient.gradient-cover.view :as gradient-cover]
             [quo.components.markdown.text :as text]
             [quo.components.share.qr-code.view :as qr-code]
             [quo.components.share.share-qr-code.style :as style]
             [quo.components.tabs.tab.view :as tab]
             [quo.theme]
-            [react-native.blur :as blur]
             [react-native.core :as rn]
-            [react-native.platform :as platform]
             [reagent.core :as reagent]
             [utils.i18n :as i18n]))
 
@@ -126,41 +125,44 @@
   [{:keys [share-qr-type qr-image-uri component-width customization-color full-name
            profile-picture emoji on-share-press]
     :as   props}]
-  [rn/view {:style style/content-container}
-   [rn/view
-    {:style style/share-qr-container}
+  [:<>
+   [rn/view {:style style/gradient-bg}
+    [gradient-cover/view {:customization-color customization-color :height 463}]]
+   [rn/view {:style style/content-container}
     [rn/view
-     {:style style/share-qr-inner-container}
-     [account-avatar/view
-      {:customization-color customization-color
-       :emoji               emoji
-       :size                32}]
-     [text/text
-      {:size   :heading-2
-       :weight :semi-bold
-       :style  {:margin-left 8}} full-name]]
-    [share-button {:on-press on-share-press}]]
-   (when (#{:wallet-legacy :wallet-multichain} share-qr-type)
-     [header props])
-   [quo.theme/provider {:theme :light}
-    [qr-code/view
-     {:qr-image-uri        qr-image-uri
-      :size                (style/qr-code-size component-width)
-      :avatar              (if (= share-qr-type :profile)
-                             :profile
-                             :wallet-account)
-      :customization-color customization-color
-      :full-name           full-name
-      :profile-picture     profile-picture
-      :emoji               emoji}]]
-   [rn/view {:style style/bottom-container}
-    (case share-qr-type
-      :profile           [profile-bottom props]
-      :wallet-legacy     [wallet-legacy-bottom props]
-      :wallet-multichain [wallet-multichain-bottom props]
-      nil)]])
+     {:style style/share-qr-container}
+     [rn/view
+      {:style style/share-qr-inner-container}
+      [account-avatar/view
+       {:customization-color customization-color
+        :emoji               emoji
+        :size                32}]
+      [text/text
+       {:size   :heading-2
+        :weight :semi-bold
+        :style  {:margin-left 8}} full-name]]
+     [share-button {:on-press on-share-press}]]
+    (when (#{:wallet-legacy :wallet-multichain} share-qr-type)
+      [header props])
+    [quo.theme/provider {:theme :light}
+     [qr-code/view
+      {:qr-image-uri        qr-image-uri
+       :size                (style/qr-code-size component-width)
+       :avatar              (if (= share-qr-type :profile)
+                              :profile
+                              :wallet-account)
+       :customization-color customization-color
+       :full-name           full-name
+       :profile-picture     profile-picture
+       :emoji               emoji}]]
+    [rn/view {:style style/bottom-container}
+     (case share-qr-type
+       :profile           [profile-bottom props]
+       :wallet-legacy     [wallet-legacy-bottom props]
+       :wallet-multichain [wallet-multichain-bottom props]
+       nil)]]])
 
-(defn view
+(defn- view-internal
   "Receives the following properties:
    - type:                :profile | :wallet-legacy | :wallet-multichain
    - qr-image-uri:        Image source value.
@@ -190,16 +192,9 @@
      Sometimes while using a blur layer on top of another on Android, this component looks
      bad because of the `blur/view`, so we can set `unblur-on-android? true` to fix it.
      "
-  [{:keys [unblur-on-android?] :as props}]
+  [props]
   (reagent/with-let [component-width     (reagent/atom nil)
-                     container-component (if (and platform/android? unblur-on-android?)
-                                           [rn/view {:background-color style/overlay-color}]
-                                           [blur/view
-                                            {:blur-radius      20
-                                             :blur-amount      20
-                                             :blur-type        :transparent
-                                             :overlay-color    style/overlay-color
-                                             :background-color style/overlay-color}])]
+                     container-component [rn/view {:background-color style/overlay-color}]]
     [quo.theme/provider {:theme :dark}
      [rn/view
       {:accessibility-label :share-qr-code
@@ -211,3 +206,6 @@
                (-> props
                    (assoc :component-width @component-width)
                    (clojure.set/rename-keys {:type :share-qr-type}))]))]]))
+
+
+(def view (quo.theme/with-theme view-internal))

src/status_im/contexts/shell/share/profile/view.cljs

@@ -25,7 +25,6 @@
      [rn/view {:style style/qr-code-container}
       [qr-codes/share-qr-code
        {:type                :profile
-        :unblur-on-android?  true
         :qr-data             universal-profile-url
         :qr-data-label-shown abbreviated-url
         :on-share-press      #(list-selection/open-share {:message universal-profile-url})

src/status_im/contexts/shell/share/style.cljs

@@ -5,13 +5,6 @@
 
 (def screen-padding 20)
 
-(def blur
-  {:position      :absolute
-   :top           0
-   :left          0
-   :right         0
-   :bottom        0
-   :overlay-color colors/neutral-80-opa-80-blur})
 
 (def header-row
   {:flex-direction     :row

src/status_im/contexts/shell/share/view.cljs

@@ -1,9 +1,7 @@
 (ns status-im.contexts.shell.share.view
   (:require
     [quo.core :as quo]
-    [react-native.blur :as blur]
     [react-native.core :as rn]
-    [react-native.platform :as platform]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [status-im.contexts.shell.share.profile.view :as profile-view]
@@ -43,7 +41,7 @@
   []
   (let [selected-tab (reagent/atom :profile)]
     (fn []
-      [:<>
+      [rn/view {:style {:padding-top (safe-area/get-top)}}
        [header]
        [rn/view {:style style/tabs-container}
         [quo/segmented-control
@@ -61,9 +59,7 @@
 
 (defn view
   []
-  [rn/view {:flex 1 :padding-top (safe-area/get-top)}
-   [blur/view
-    {:style       style/blur
-     :blur-amount 20
-     :blur-radius (if platform/android? 25 10)}]
-   [tab-content]])
+  [quo/overlay {:type :shell}
+   [rn/view
+    {:key :share}
+    [tab-content]]])

src/status_im/contexts/shell/share/wallet/view.cljs

@@ -66,7 +66,6 @@
             :networks            @selected-networks
             :on-share-press      #(share-action qr-url share-title)
             :profile-picture     nil
-            :unblur-on-android?  true
             :full-name           (:name account)
             :customization-color (:color account)
             :emoji               (:emoji account)

src/status_im/contexts/wallet/share_address/view.cljs

@@ -73,7 +73,8 @@
         [quo/overlay {:type :shell}
          [rn/view
           {:flex        1
-           :padding-top padding-top}
+           :padding-top padding-top
+           :key         :share-adress}
           [quo/page-nav
            {:icon-name           :i/close
             :on-press            #(rf/dispatch [:navigate-back])
@@ -92,7 +93,6 @@
              :networks            @selected-networks
              :on-share-press      #(share-action qr-url share-title)
              :profile-picture     nil
-             :unblur-on-android?  true
              :full-name           (:name account)
              :customization-color color
              :emoji               emoji