rounded border tips

status-im · Jun 6, 2023 · ffe736a · ffe736a
1 parent ee891cc
commit ffe736a
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 15 deletions.
diff --git 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,37 @@
    :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)})
 
+(def camera-flash-button
+  {:position  :absolute
+   :right     20
+   :bottom    20})
+
+(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
    :text-align  :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
@@ -13,6 +13,7 @@
             [status-im2.contexts.syncing.scan-sync-code.style :as style]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]
+
             [status-im2.contexts.syncing.utils :as sync-utils]))
 
 (defonce camera-permission-granted? (reagent/atom false))
@@ -97,38 +98,69 @@
   [border1 border2 corner]
   [rn/view
    (assoc {:border-color colors/white
-           :width 80 :height 80} border1 2 border2 2 corner 16)])
+           :width 78 :height 78} border1 2 border2 2 corner 16)])
+
+(defn- border-tip
+  [{:keys [top bottom left right]}]
+  [rn/view
+   {:style (style/border-tip top bottom right left)}])
 
 (defn- viewfinder
   [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 
-                :margin-left     -1 
-                :margin-top      -1}
-       [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
+       {:style (style/qr-view-finder-container size)}
+       [rn/view
+        {:flex-direction :row :justify-content :space-between}
+        [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-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
+         :on-press            #()
+         :style               style/camera-flash-button}
+        :i/flashlight-off]]
       [quo/text
        {:size   :paragraph-2
         :weight :regular
         :style  style/viewfinder-text}
        (i18n/label :t/ensure-qr-code-is-in-focus-to-scan)]]]))
 
 (defn- scan-qr-code-tab
-  [qr-view-finder request-camera-permission]
+  [qr-view-finder request-camera-permission flash-mode?]
   [:<>
    [rn/view {:style style/scan-qr-code-container}]
    (when (empty? @qr-view-finder)
      [qr-scan-hole-area qr-view-finder])
    (if (and @camera-permission-granted? (boolean (not-empty @qr-view-finder)))
-     [viewfinder @qr-view-finder]
+     [viewfinder @qr-view-finder flash-mode?]
      [camera-permission-view request-camera-permission])])
 
 (defn- enter-sync-code-tab
@@ -172,8 +204,8 @@
       [camera-kit/camera
        {:ref            #(reset! camera-ref %)
         :style          style/camera-style
-        :camera-options {:zoomMode :off}
-        :scan-barcode   true
+        :camera-options {:zoomMode  :off}
+        :scan-barcode   false
         :on-read-code   on-read-code}]]
      [hole-view/hole-view
       {:style style/hole