rounded border tips

status-im · Jun 9, 2023 · dd5a101 · dd5a101
1 parent 10c1846
commit dd5a101
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 17 deletions.
diff --git a/src/react_native/permissions.cljs b/src/react_native/permissions.cljs
@@ -37,4 +37,4 @@
   [permission on-result on-error]
   (-> (check (get permissions-map permission))
       (.then #(on-result (not (#{(.-BLOCKED RESULTS) (.-DENIED RESULTS)} %))))
-      (.catch #(on-error (#{(.-BLOCKED RESULTS) (.-DENIED RESULTS)} %)))))
+      (.catch #(on-error %))))
diff --git a/src/status_im2/contexts/onboarding/sign_in/view.cljs b/src/status_im2/contexts/onboarding/sign_in/view.cljs
@@ -5,7 +5,7 @@
 
 (defn view
   []
-  [scan-sync-code/view 
+  [scan-sync-code/view
    {:title             (i18n/label :t/sign-in-by-syncing)
     :show-bottom-view? true
     :background        [background/view true]}])
diff --git a/src/status_im2/contexts/syncing/scan_sync_code/style.cljs b/src/status_im2/contexts/syncing/scan_sync_code/style.cljs
@@ -44,18 +44,49 @@
    :margin-top         20})
 
 (def scan-qr-code-container
-  {:margin-top   19})
+  {:margin-top 19})
 
 (def qr-view-finder
   {:margin-horizontal screen-padding
    :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 camera-flash-button
+  {:position :absolute
+   :right    20
+   :bottom   20})
+
+(def border
+  {:border-color colors/white
+   :width        78
+   :height       78})
+
+(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

diff --git a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs
@@ -125,6 +125,7 @@
        :size                32
        :accessibility-label accessibility-label
        :override-theme      :dark
+       :customization-color :blue
        :on-press            on-press}
       (i18n/label button-label)]]))
 
@@ -142,25 +143,63 @@
 (defn- border
   [border1 border2 corner]
   [rn/view
-   (assoc {:border-color colors/white
-           :width 80 :height 80} border1 2 border2 2 corner 16)])
+   (assoc style/border 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
@@ -196,7 +235,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)]]])