address design feedback on profile share UI (#16257)
This commit adds UI Touchups to profile share screen according to a recent Design Review.
This commit is contained in:
parent
a53ba0c4e1
commit
a24ddbeefa
|
@ -26,7 +26,7 @@
|
||||||
[theme :background-color])
|
[theme :background-color])
|
||||||
:border-radius (case size
|
:border-radius (case size
|
||||||
32 10
|
32 10
|
||||||
28 8
|
28 10
|
||||||
24 8
|
24 8
|
||||||
20 6)
|
20 6)
|
||||||
:padding 2}
|
:padding 2}
|
||||||
|
|
|
@ -5,17 +5,22 @@
|
||||||
(def screen-padding 20)
|
(def screen-padding 20)
|
||||||
|
|
||||||
(def blur
|
(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
|
(def header-button
|
||||||
{:margin-bottom 12
|
{:margin-bottom 12
|
||||||
:margin-left screen-padding})
|
:background-color colors/white-opa-5})
|
||||||
|
|
||||||
(def header-heading
|
(def header-heading
|
||||||
{:padding-horizontal screen-padding
|
{:padding-horizontal screen-padding
|
||||||
|
@ -23,10 +28,11 @@
|
||||||
:color colors/white})
|
:color colors/white})
|
||||||
|
|
||||||
(def qr-code-container
|
(def qr-code-container
|
||||||
{:padding 12
|
{:padding-top 12
|
||||||
|
:padding-bottom 8
|
||||||
|
:padding-horizontal 12
|
||||||
:border-radius 16
|
:border-radius 16
|
||||||
:margin-top 12
|
:margin-top 8
|
||||||
:margin-bottom 4
|
|
||||||
:margin-horizontal screen-padding
|
:margin-horizontal screen-padding
|
||||||
:background-color colors/white-opa-5
|
:background-color colors/white-opa-5
|
||||||
:flex-direction :column
|
:flex-direction :column
|
||||||
|
@ -59,14 +65,11 @@
|
||||||
(def profile-address-container
|
(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
|
(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
|
(def emoji-hash-label
|
||||||
{:color colors/white-opa-40
|
{:color colors/white-opa-40
|
||||||
|
@ -78,12 +81,12 @@
|
||||||
(def share-button-container
|
(def share-button-container
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:right 0
|
:right 0
|
||||||
:top 16})
|
:top 12})
|
||||||
|
|
||||||
(def emoji-share-button-container
|
(def emoji-share-button-container
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:right 4
|
:right 0
|
||||||
:top 16})
|
:top 12})
|
||||||
|
|
||||||
(def emoji-hash-content
|
(def emoji-hash-content
|
||||||
{:color colors/white
|
{:color colors/white
|
||||||
|
@ -91,7 +94,7 @@
|
||||||
:padding-top 4
|
:padding-top 4
|
||||||
:padding-bottom 12
|
:padding-bottom 12
|
||||||
:padding-left 12
|
:padding-left 12
|
||||||
:font-size 14})
|
:font-size 13})
|
||||||
|
|
||||||
(def tabs-container
|
(def tabs-container
|
||||||
{:padding-horizontal screen-padding
|
{:padding-horizontal screen-padding
|
||||||
|
|
|
@ -11,11 +11,13 @@
|
||||||
[utils.image-server :as image-server]
|
[utils.image-server :as image-server]
|
||||||
[react-native.navigation :as navigation]
|
[react-native.navigation :as navigation]
|
||||||
[clojure.string :as string]
|
[clojure.string :as string]
|
||||||
[utils.address :as address]))
|
[utils.address :as address]
|
||||||
|
[react-native.platform :as platform]))
|
||||||
|
|
||||||
(defn header
|
(defn header
|
||||||
[]
|
[]
|
||||||
[:<>
|
[:<>
|
||||||
|
[rn/view {:style style/header-row}
|
||||||
[quo/button
|
[quo/button
|
||||||
{:icon-only? true
|
{:icon-only? true
|
||||||
:type :grey
|
:type :grey
|
||||||
|
@ -25,6 +27,14 @@
|
||||||
:container-style style/header-button
|
:container-style style/header-button
|
||||||
:on-press #(rf/dispatch [:navigate-back])}
|
:on-press #(rf/dispatch [:navigate-back])}
|
||||||
:i/close]
|
: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
|
[quo/text
|
||||||
{:size :heading-1
|
{:size :heading-1
|
||||||
:weight :semi-bold
|
:weight :semi-bold
|
||||||
|
@ -154,5 +164,8 @@
|
||||||
[rn/view
|
[rn/view
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:padding-top (navigation/status-bar-height)}
|
: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]])))
|
[tab-content window-width]])))
|
||||||
|
|
|
@ -19,13 +19,13 @@
|
||||||
"The goal here is to generate a string that begins with
|
"The goal here is to generate a string that begins with
|
||||||
join.status.im/u/ joined with the 1st 5 characters
|
join.status.im/u/ joined with the 1st 5 characters
|
||||||
of the compressed public key followed by an ellipsis followed by
|
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]
|
[base-url public-key]
|
||||||
(if (and public-key base-url (> (count public-key) 17) (= "join.status.im/u/" base-url))
|
(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)
|
(let [first-part-of-public-pk (subs public-key 0 5)
|
||||||
ellipsis "..."
|
ellipsis "..."
|
||||||
public-key-size (count public-key)
|
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
|
abbreviated-url (str base-url
|
||||||
first-part-of-public-pk
|
first-part-of-public-pk
|
||||||
ellipsis
|
ellipsis
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
|
|
||||||
(deftest test-get-abbreviated-profile-url
|
(deftest test-get-abbreviated-profile-url
|
||||||
(testing "Ensure the function correctly generates an abbreviated profile URL for a valid public key"
|
(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
|
(utils.address/get-abbreviated-profile-url
|
||||||
"join.status.im/u/"
|
"join.status.im/u/"
|
||||||
"zQ3shPrnUhhR42JJn3QdhodGest8w8MjiH8hPaimrdYpzeFUa"))))
|
"zQ3shPrnUhhR42JJn3QdhodGest8w8MjiH8hPaimrdYpzeFUa"))))
|
||||||
|
|
|
@ -283,7 +283,7 @@
|
||||||
"&allowProfileImage="
|
"&allowProfileImage="
|
||||||
superimpose-profile?
|
superimpose-profile?
|
||||||
"&size="
|
"&size="
|
||||||
qr-size
|
(* 2 qr-size)
|
||||||
"&imageName="
|
"&imageName="
|
||||||
profile-image-type)]
|
profile-image-type)]
|
||||||
media-server-url))
|
media-server-url))
|
||||||
|
|
Loading…
Reference in New Issue