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

@@ -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

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})
 

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)
+   :top      (:y viewfinder)})
-   :overflow :hidden})
+
+(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})
 

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
-      [rn/view {:width size :height size :justify-content :space-between}
+       {:style (style/qr-view-finder-container size)}
-       [rn/view {:flex-direction :row :justify-content :space-between}
+       [rn/view
+        {:style style/view-finder-border-container}
+        [rn/view
          [border :border-top-width :border-left-width :border-top-left-radius]
-        [border :border-top-width :border-right-width :border-top-right-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}
+        [rn/view
          [border :border-bottom-width :border-left-width :border-bottom-left-radius]
-        [border :border-bottom-width :border-right-width :border-bottom-right-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)]]])