address design feedback on profile share UI

Author: siddarthkay

src/status_im2/contexts/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
@@ -82,7 +85,7 @@
 
 (def emoji-share-button-container
   {:position :absolute
-   :right    4
+   :right    0
    :top      16})
 
 (def emoji-hash-content
@@ -91,7 +94,7 @@
    :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/share/view.cljs

@@ -15,15 +15,23 @@
 (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
@@ -34,12 +42,12 @@
   "The goal here is to generate a string that begins with
    join.status.im/u/ joined with the 1st 5 characters
    of the compressed public key followed by an ellipsis followed by
-   the last 12 characters of the compressed public key"
+   the last 10 characters of the compressed public key"
   [base-url public-pk]
   (let [first-part-of-public-pk (subs public-pk 0 5)
         ellipsis                "..."
         public-pk-size          (count public-pk)
-        last-part-of-public-pk  (subs public-pk (- public-pk-size 12) (- public-pk-size 1))
+        last-part-of-public-pk  (subs public-pk (- public-pk-size 10) (- public-pk-size 1))
         abbreviated-url         (str base-url first-part-of-public-pk ellipsis last-part-of-public-pk)]
     abbreviated-url))
 
@@ -164,5 +172,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

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