address design feedback on profile share UI

Author: siddarthkay

src/quo2/components/tabs/segmented_tab.cljs

@@ -26,7 +26,7 @@
                                      [theme :background-color])
            :border-radius    (case size
                                32 10
-                               28 8
+                               28 10
                                24 8
                                20 6)
            :padding          2}

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

@@ -5,32 +5,38 @@
 (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})
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0
+   :bottom   0})
+
+(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         8
+   :margin-horizontal  screen-padding
+   :background-color   colors/white-opa-5
+   :flex-direction     :column
+   :justify-content    :center})
 
 (def emoji-hash-container
   {:border-radius     16
@@ -57,16 +63,13 @@
    :padding-top 2})
 
 (def profile-address-container
-  {:flex-direction    :row
-   :justify-content   :flex-start
-   :margin-top        6
-   :margin-horizontal 4})
+  {:flex-direction  :row
+   :justify-content :flex-start
+   :margin-top      4})
 
 (def emoji-address-container
-  {:flex-direction    :row
-   :justify-content   :flex-start
-   :margin-top        6
-   :margin-horizontal 4})
+  {:flex-direction  :row
+   :justify-content :flex-start})
 
 (def emoji-hash-label
   {:color          colors/white-opa-40
@@ -78,20 +81,20 @@
 (def share-button-container
   {:position :absolute
    :right    0
-   :top      16})
+   :top      12})
 
 (def emoji-share-button-container
   {:position :absolute
-   :right    4
-   :top      16})
+   :right    0
+   :top      12})
 
 (def emoji-hash-content
   {:color          colors/white
    :align-self     :flex-start
    :padding-top    4
    :padding-bottom 12
    :padding-left   12
-   :font-size      14})
+   :font-size      13})
 
 (def tabs-container
   {:padding-horizontal screen-padding

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

@@ -16,15 +16,24 @@
 (defn header
   []
   [:<>
-   [quo/button
-    {:icon-only?          true
-     :type                :grey
-     :background          :blur
-     :size                32
-     :accessibility-label :close-shell-share-tab
-     :container-style     style/header-button
-     :on-press            #(rf/dispatch [:navigate-back])}
-    :i/close]
+   [rn/view {:style style/header-row}
+    [quo/button
+     {icon-only?           true
+      :type                :grey
+      :background          :blur
+      :size                32
+      :accessibility-label :close-shell-share-tab
+      :container-style     style/header-button
+      :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
@@ -154,5 +163,8 @@
       [rn/view
        {:flex        1
         :padding-top (navigation/status-bar-height)}
-       [blur/view style/blur]
+       [blur/view
+        {:style            style/blur
+         :background-color colors/neutral-80-opa-80-blur
+         :blur-amount      20}]
        [tab-content window-width]])))

src/utils/image_server.cljs

@@ -283,7 +283,7 @@
                                     "&allowProfileImage="
                                     superimpose-profile?
                                     "&size="
-                                    qr-size
+                                    (* 2 qr-size)
                                     "&imageName="
                                     profile-image-type)]
     media-server-url))