address design feedback on profile share UI (#16257)

This commit adds UI Touchups to profile share screen according to a recent Design Review.

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,17 +5,22 @@
 (def screen-padding 20)
 
 (def blur
-  {:style         {:position :absolute
+  {:position      :absolute
-                   :top      0
+   :top           0
-                   :left     0
+   :left          0
-                   :right    0
+   :right         0
-                   :bottom   0}
+   :bottom        0
-   :overlay-color colors/neutral-80-opa-80
+   :overlay-color colors/neutral-80-opa-80-blur})
-   :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-bottom    12
-   :margin-left   screen-padding})
+   :background-color colors/white-opa-5})
 
 (def header-heading
   {:padding-horizontal screen-padding
@@ -23,14 +28,15 @@
    :color              colors/white})
 
 (def qr-code-container
-  {:padding           12
+  {:padding-top        12
-   :border-radius     16
+   :padding-bottom     8
-   :margin-top        12
+   :padding-horizontal 12
-   :margin-bottom     4
+   :border-radius      16
-   :margin-horizontal screen-padding
+   :margin-top         8
-   :background-color  colors/white-opa-5
+   :margin-horizontal  screen-padding
-   :flex-direction    :column
+   :background-color   colors/white-opa-5
-   :justify-content   :center})
+   :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
+  {:flex-direction  :row
-   :justify-content   :flex-start
+   :justify-content :flex-start
-   :margin-top        6
+   :margin-top      4})
-   :margin-horizontal 4})
 
 (def emoji-address-container
-  {:flex-direction    :row
+  {:flex-direction  :row
-   :justify-content   :flex-start
+   :justify-content :flex-start})
-   :margin-top        6
-   :margin-horizontal 4})
 
 (def emoji-hash-label
   {:color          colors/white-opa-40
@@ -78,12 +81,12 @@
 (def share-button-container
   {:position :absolute
    :right    0
-   :top      16})
+   :top      12})
 
 (def emoji-share-button-container
   {:position :absolute
-   :right    4
+   :right    0
-   :top      16})
+   :top      12})
 
 (def emoji-hash-content
   {:color          colors/white
@@ -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/shell/share/view.cljs

@@ -11,20 +11,30 @@
             [utils.image-server :as image-server]
             [react-native.navigation :as navigation]
             [clojure.string :as string]
-            [utils.address :as address]))
+            [utils.address :as address]
+            [react-native.platform :as platform]))
 
 (defn header
   []
   [:<>
-   [quo/button
+   [rn/view {:style style/header-row}
-    {:icon-only?          true
+    [quo/button
-     :type                :grey
+     {:icon-only?          true
-     :background          :blur
+      :type                :grey
-     :size                32
+      :background          :blur
-     :accessibility-label :close-shell-share-tab
+      :size                32
-     :container-style     style/header-button
+      :accessibility-label :close-shell-share-tab
-     :on-press            #(rf/dispatch [:navigate-back])}
+      :container-style     style/header-button
-    :i/close]
+      :on-press            #(rf/dispatch [:navigate-back])}
+     :i/close]
+    [quo/button
+     {:icon-only?          true
+      :type                :grey
+      :background          :blur
+      :size                32
+      :accessibility-label :shell-scan-button
+      :on-press            #(rf/dispatch [:navigate-back])}
+     :i/scan]]
    [quo/text
     {:size   :heading-1
      :weight :semi-bold
@@ -154,5 +164,8 @@
       [rn/view
        {:flex        1
         :padding-top (navigation/status-bar-height)}
-       [blur/view style/blur]
+       [blur/view
+        {:style       style/blur
+         :blur-amount 20
+         :blur-radius (if platform/android? 25 10)}]
        [tab-content window-width]])))

src/utils/address.cljs

@@ -19,13 +19,13 @@
   "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-key]
   (if (and public-key base-url (> (count public-key) 17) (= "join.status.im/u/" base-url))
     (let [first-part-of-public-pk (subs public-key 0 5)
           ellipsis                "..."
           public-key-size         (count public-key)
-          last-part-of-public-key (subs public-key (- public-key-size 12) public-key-size)
+          last-part-of-public-key (subs public-key (- public-key-size 10) public-key-size)
           abbreviated-url         (str base-url
                                        first-part-of-public-pk
                                        ellipsis

src/utils/address_test.cljs

@@ -21,7 +21,7 @@
 
 (deftest test-get-abbreviated-profile-url
   (testing "Ensure the function correctly generates an abbreviated profile URL for a valid public key"
-    (is (= "join.status.im/u/zQ3sh...aimrdYpzeFUa"
+    (is (= "join.status.im/u/zQ3sh...mrdYpzeFUa"
            (utils.address/get-abbreviated-profile-url
             "join.status.im/u/"
             "zQ3shPrnUhhR42JJn3QdhodGest8w8MjiH8hPaimrdYpzeFUa"))))

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))