Address design feedback on Profile share tab Screen

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
+ :overlay-color colors/neutral-80-opa-80-blur})
+
+(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
+ :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

@@ -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
- {: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-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))