address design feedback on profile share UI

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

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