address design feedback on profile share UI

Author: siddarthkay

src/status_im2/contexts/share/style.cljs

@@ -5,32 +5,41 @@
 (def screen-padding 20)
 
 (def blur
-  {:style         {:position :absolute
-                   :top      0
-                   :left     0
-                   :right    0
-                   :bottom   0}
-   :overlay-color colors/neutral-80-opa-80
-   :blur-amount   20})
+  {:style            {:position :absolute
+                      :top      0
+                      :left     0
+                      :right    0
+                      :bottom   0}
+   :background-color colors/neutral-80-opa-40
+   :blur-amount      20})
+
+(def header-row
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :padding-horizontal screen-padding
+   :margin-vertical    12})
 
 (def header-button
-  {:margin-bottom 12
-   :margin-left   screen-padding})
+  {:margin-bottom    12
+   :margin-left      screen-padding
+   :background-color colors/white-opa-5})
 
 (def header-heading
   {:padding-horizontal screen-padding
    :padding-vertical   12
    :color              colors/white})
 
 (def qr-code-container
-  {:padding           12
-   :border-radius     16
-   :margin-top        12
-   :margin-bottom     4
-   :margin-horizontal screen-padding
-   :background-color  colors/white-opa-5
-   :flex-direction    :column
-   :justify-content   :center})
+  {:padding-top        12
+   :padding-bottom     8
+   :padding-horizontal 12
+   :border-radius      16
+   :margin-top         12
+   :margin-bottom      4
+   :margin-horizontal  screen-padding
+   :background-color   colors/white-opa-5
+   :flex-direction     :column
+   :justify-content    :center})
 
 (def emoji-hash-container
   {:border-radius     16
@@ -59,13 +68,12 @@
 (def profile-address-container
   {:flex-direction    :row
    :justify-content   :flex-start
-   :margin-top        6
+   :margin-top        4
    :margin-horizontal 4})
 
 (def emoji-address-container
   {:flex-direction    :row
    :justify-content   :flex-start
-   :margin-top        6
    :margin-horizontal 4})
 
 (def emoji-hash-label

src/status_im2/contexts/share/view.cljs

@@ -15,20 +15,30 @@
 (defn header
   []
   [:<>
-   [quo/button
-    {:icon                true
-     :type                :blur-bg
-     :size                32
-     :accessibility-label :close-shell-share-tab
-     :override-theme      :dark
-     :style               style/header-button
-     :on-press            #(rf/dispatch [:navigate-back])}
-    :i/close]
+   [rn/view {:style style/header-row}
+    [quo/button
+     {:icon                true
+      :type                :blur-bg
+      :size                32
+      :accessibility-label :close-shell-share-tab
+      :override-theme      :dark
+      :on-press            #(rf/dispatch [:navigate-back])}
+     :i/close]
+    [quo/button
+     {:icon                true
+      :type                :blur-bg
+      :size                32
+      :accessibility-label :shell-scan-button
+      :override-theme      :dark
+      :on-press            #(rf/dispatch [:navigate-back])}
+     :i/scan]
+   ]
    [quo/text
     {:size   :heading-1
      :weight :semi-bold
      :style  style/header-heading}
-    (i18n/label :t/share)]])
+    (i18n/label :t/share)]
+  ])
 
 (defn abbreviated-url
   "The goal here is to generate a string that begins with