From a24ddbeefa9eb92948e5d289e5d1326c4f2cade8 Mon Sep 17 00:00:00 2001 From: Siddarth Kumar Date: Fri, 15 Sep 2023 12:32:13 +0000 Subject: [PATCH] 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 | 2 +- .../contexts/shell/share/style.cljs | 61 ++++++++++--------- src/status_im2/contexts/shell/share/view.cljs | 35 +++++++---- src/utils/address.cljs | 4 +- src/utils/address_test.cljs | 2 +- src/utils/image_server.cljs | 2 +- 6 files changed, 61 insertions(+), 45 deletions(-) diff --git a/src/quo2/components/tabs/segmented_tab.cljs b/src/quo2/components/tabs/segmented_tab.cljs index 1e71e930d9..47cb857acb 100644 --- a/src/quo2/components/tabs/segmented_tab.cljs +++ b/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} diff --git a/src/status_im2/contexts/shell/share/style.cljs b/src/status_im2/contexts/shell/share/style.cljs index 2224957b2f..e632193a1a 100644 --- a/src/status_im2/contexts/shell/share/style.cljs +++ b/src/status_im2/contexts/shell/share/style.cljs @@ -5,17 +5,22 @@ (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 @@ -23,14 +28,15 @@ :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,12 +81,12 @@ (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 @@ -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 diff --git a/src/status_im2/contexts/shell/share/view.cljs b/src/status_im2/contexts/shell/share/view.cljs index 1e5beda396..79607c4900 100644 --- a/src/status_im2/contexts/shell/share/view.cljs +++ b/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]]))) diff --git a/src/utils/address.cljs b/src/utils/address.cljs index c7aa71af61..76e4cfef17 100644 --- a/src/utils/address.cljs +++ b/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 diff --git a/src/utils/address_test.cljs b/src/utils/address_test.cljs index 20a71e8dc0..6df06048ba 100644 --- a/src/utils/address_test.cljs +++ b/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")))) diff --git a/src/utils/image_server.cljs b/src/utils/image_server.cljs index 46dffdc884..5681219754 100644 --- a/src/utils/image_server.cljs +++ b/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))