From a10c762aa6221baad928e9232d046efbf8d895ca Mon Sep 17 00:00:00 2001 From: John Ngei Date: Fri, 16 Jun 2023 02:28:50 +0300 Subject: [PATCH] onboarding syncing updates * syncing screen updates * centered qr-view-finder border within the containing border * rounded border tips * update icon color --- src/quo2/components/buttons/button.cljs | 2 +- .../contexts/onboarding/sign_in/style.cljs | 2 + .../syncing/scan_sync_code/style.cljs | 46 +++++++++++++++++- .../contexts/syncing/scan_sync_code/view.cljs | 48 ++++++++++++++----- 4 files changed, 84 insertions(+), 14 deletions(-) diff --git a/src/quo2/components/buttons/button.cljs b/src/quo2/components/buttons/button.cljs index 16a546f18a..532874fd47 100644 --- a/src/quo2/components/buttons/button.cljs +++ b/src/quo2/components/buttons/button.cljs @@ -130,7 +130,7 @@ :pressed colors/neutral-80-opa-50 :disabled colors/neutral-80-opa-40}} :blur-bg {:icon-color colors/white - :icon-secondary-color colors/white-opa-40 + :icon-secondary-color colors/white-opa-70 :label-color colors/white :background-color {:default colors/white-opa-5 :pressed colors/white-opa-10 diff --git a/src/status_im2/contexts/onboarding/sign_in/style.cljs b/src/status_im2/contexts/onboarding/sign_in/style.cljs index 449b068b91..e375fd4c18 100644 --- a/src/status_im2/contexts/onboarding/sign_in/style.cljs +++ b/src/status_im2/contexts/onboarding/sign_in/style.cljs @@ -62,6 +62,8 @@ :background-color colors/white-opa-5 :border-color colors/white-opa-10 :border-radius 12 + :border-style :dashed + :border-width 1 :align-items :center :justify-content :center}) diff --git a/src/status_im2/contexts/syncing/scan_sync_code/style.cljs b/src/status_im2/contexts/syncing/scan_sync_code/style.cljs index 1ad2c4d8a8..587f3afe21 100644 --- a/src/status_im2/contexts/syncing/scan_sync_code/style.cljs +++ b/src/status_im2/contexts/syncing/scan_sync_code/style.cljs @@ -51,12 +51,52 @@ :height 1 :display :flex}) +(defn qr-view-finder-container + [size] + {:width size + :height size + :justify-content :space-between + :margin-left -1 + :margin-top -1}) + (defn viewfinder-container [viewfinder] {:position :absolute :left (:x viewfinder) - :top (:y viewfinder) - :overflow :hidden}) + :top (:y viewfinder)}) + +(def view-finder-border-container + {:flex-direction :row + :justify-content :space-between}) + +(def camera-flash-button + {:position :absolute + :right 20 + :bottom 20}) + +(defn border + [border1 border2 corner] + (assoc {:border-color colors/white + :width 78 + :height 78} + border1 + 2 + border2 + 2 + corner + 16)) + +(defn border-tip + [top bottom right left] + {:background-color colors/white + :position :absolute + :top top + :bottom bottom + :right right + :left left + :height 2 + :width 2 + :border-radius 2}) (def viewfinder-text {:color colors/white-opa-70 @@ -68,7 +108,9 @@ :margin-horizontal screen-padding :background-color colors/white-opa-5 :border-color colors/white-opa-10 + :border-width 1 :border-radius 12 + :border-style :dashed :align-items :center :justify-content :center}) diff --git a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs index 321773c6c3..f851311045 100644 --- a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs +++ b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs @@ -53,7 +53,7 @@ :accessibility-label :close-sign-in-by-syncing :override-theme :dark :on-press #(rf/dispatch [:navigate-back])} - :i/close] + :i/arrow-left] [quo/button {:before :i/info :type :blur-bg @@ -125,6 +125,7 @@ :size 32 :accessibility-label accessibility-label :override-theme :dark + :customization-color :blue :on-press on-press} (i18n/label button-label)]])) @@ -141,22 +142,47 @@ (defn- border [border1 border2 corner] + [rn/view {:style (style/border border1 border2 corner)}]) + +(defn- border-tip + [{:keys [top bottom left right]}] [rn/view - (assoc {:border-color colors/white :width 80 :height 80} border1 2 border2 2 corner 16)]) + {:style (style/border-tip top bottom right left)}]) (defn- viewfinder [qr-view-finder] - (let [size (:width qr-view-finder)] + (let [size (+ (:width qr-view-finder) 2)] [:<> [rn/view {:style (style/viewfinder-container qr-view-finder)} - - [rn/view {:width size :height size :justify-content :space-between} + [rn/view + {:style (style/qr-view-finder-container size)} + [rn/view + {:style style/view-finder-border-container} + [rn/view + [border :border-top-width :border-left-width :border-top-left-radius] + [border-tip {:right -1 :top 0}] + [border-tip {:left 0 :bottom -1}]] + [rn/view + [border :border-top-width :border-right-width :border-top-right-radius] + [border-tip {:right 0 :bottom -1}] + [border-tip {:left -1 :top 0}]]] [rn/view {:flex-direction :row :justify-content :space-between} - [border :border-top-width :border-left-width :border-top-left-radius] - [border :border-top-width :border-right-width :border-top-right-radius]] - [rn/view {:flex-direction :row :justify-content :space-between} - [border :border-bottom-width :border-left-width :border-bottom-left-radius] - [border :border-bottom-width :border-right-width :border-bottom-right-radius]]] + [rn/view + [border :border-bottom-width :border-left-width :border-bottom-left-radius] + [border-tip {:right -1 :bottom 0}] + [border-tip {:left 0 :top -1}]] + [rn/view + [border :border-bottom-width :border-right-width :border-bottom-right-radius] + [border-tip {:right 0 :top -1}] + [border-tip {:left -1 :bottom 0}]]] + [quo/button + {:icon true + :type :blur-bg + :size 32 + :accessibility-label :camera-flash + :override-background-color colors/neutral-80-opa-40 + :style style/camera-flash-button} + :i/flashlight-off]] [quo/text {:size :paragraph-2 :weight :regular @@ -192,7 +218,7 @@ {:style (style/bottom-container (:bottom insets))} [quo/text {:size :paragraph-2 - :weight :regular + :weight :medium :style style/bottom-text} (i18n/label :t/i-dont-have-status-on-another-device)]]])