[#16278] fix tips in white camera border (#16716)

* Remove unnecessary wrapper
* Fix border tips and refactor
* Add comment about using 1.9 width

Author: ulisesmac

src/status_im2/contexts/syncing/scan_sync_code/style.cljs

@@ -77,29 +77,37 @@
    :top      (- (+ (:y viewfinder) (:height viewfinder)) flash-button-size flash-button-spacing)
    :right    (+ screen-padding flash-button-spacing)})
 
-(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})
+(defn- get-border
+  [border-vertical-width border-horizontal-width corner-radius]
+  {:border-color           colors/white
+   :width                  78
+   :height                 78
+   border-vertical-width   2
+   border-horizontal-width 2
+   corner-radius           16})
+
+(def white-border
+  (let [base-tip {:background-color colors/white
+                  :position         :absolute
+                  :height           1.9 ; 1.9 instead of 2 to fix the tips protruding
+                  :width            1.9
+                  :border-radius    1}]
+    {:top-left
+     {:border (get-border :border-top-width :border-left-width :border-top-left-radius)
+      :tip-1  (assoc base-tip :right -1 :top 0)
+      :tip-2  (assoc base-tip :left 0 :bottom -1)}
+     :top-right
+     {:border (get-border :border-top-width :border-right-width :border-top-right-radius)
+      :tip-1  (assoc base-tip :right 0 :bottom -1)
+      :tip-2  (assoc base-tip :left -1 :top 0)}
+     :bottom-left
+     {:border (get-border :border-bottom-width :border-left-width :border-bottom-left-radius)
+      :tip-1  (assoc base-tip :right -1 :bottom 0)
+      :tip-2  (assoc base-tip :left 0 :top -1)}
+     :bottom-right
+     {:border (get-border :border-bottom-width :border-right-width :border-bottom-right-radius)
+      :tip-1  (assoc base-tip :right 0 :top -1)
+      :tip-2  (assoc base-tip :left -1 :bottom 0)}}))
 
 (def viewfinder-text
   {:color       colors/white-opa-70

src/status_im2/contexts/syncing/scan_sync_code/view.cljs

@@ -36,7 +36,7 @@
   []
   (rf/dispatch [:syncing/preflight-outbound-check #(reset! preflight-check-passed? %)]))
 
-(defn- f-header
+(defn- header
   [{:keys [active-tab read-qr-once? title title-opacity subtitle-opacity reset-animations-fn animated?]}]
   (let [subtitle-translate-x (reanimated/interpolate subtitle-opacity [0 1] [-13 0])
         subtitle-translate-y (reanimated/interpolate subtitle-opacity [0 1] [-85 0])
@@ -110,10 +110,6 @@
                           (reset! active-tab id)
                           (reset! read-qr-once? false))}]]]))
 
-(defn- header
-  [props]
-  [:f> f-header props])
-
 (defn get-labels-and-on-press-method
   []
   (if @camera-permission-granted?
@@ -169,55 +165,42 @@
                        view-finder (assoc layout :height (:width layout))]
                    (reset! qr-view-finder view-finder)))}])
 
-(defn- border
-  [border1 border2 corner]
-  [rn/view {:style (style/border border1 border2 corner)}])
+(defn- white-border
+  [corner]
+  (let [border-styles (style/white-border corner)]
+    [rn/view
+     [rn/view {:style (border-styles :border)}]
+     [rn/view {:style (border-styles :tip-1)}]
+     [rn/view {:style (border-styles :tip-2)}]]))
 
-(defn- border-tip
-  [{:keys [top bottom left right]}]
-  [rn/view
-   {:style (style/border-tip top bottom right left)}])
+(defn- white-square
+  [layout-size]
+  [rn/view {:style (style/qr-view-finder-container layout-size)}
+   [rn/view {:style style/view-finder-border-container}
+    [white-border :top-left]
+    [white-border :top-right]]
+   [rn/view {:style style/view-finder-border-container}
+    [white-border :bottom-left]
+    [white-border :bottom-right]]])
 
 (defn- viewfinder
   [qr-view-finder]
-  (let [size (+ (:width qr-view-finder) 2)]
-    [:<>
-     [rn/view {:style (style/viewfinder-container qr-view-finder)}
-      [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}
-        [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/text
-       {:size   :paragraph-2
-        :weight :regular
-        :style  style/viewfinder-text}
-       (i18n/label :t/ensure-qr-code-is-in-focus-to-scan)]]]))
+  (let [layout-size (+ (:width qr-view-finder) 2)]
+    [rn/view {:style (style/viewfinder-container qr-view-finder)}
+     [white-square layout-size]
+     [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]
-  [:<>
-   (if (and @preflight-check-passed?
-            @camera-permission-granted?
-            (boolean (not-empty @qr-view-finder)))
-     [viewfinder @qr-view-finder]
-     [camera-and-local-network-access-permission-view])])
+  (if (and @preflight-check-passed?
+           @camera-permission-granted?
+           (boolean (not-empty qr-view-finder)))
+    [viewfinder qr-view-finder]
+    [camera-and-local-network-access-permission-view]))
 
 (defn- enter-sync-code-tab
   []
@@ -273,8 +256,7 @@
         :on-read-code on-read-code}]]
      [hole-view/hole-view
       {:style style/hole
-       :holes [(merge qr-view-finder
-                      {:borderRadius 16})]}
+       :holes [(assoc qr-view-finder :borderRadius 16)]}
       [blur/view
        {:style            style/absolute-fill
         :blur-amount      10
@@ -388,7 +370,7 @@
          (when (or (not animated?) @render-camera?)
            [render-camera show-camera? torch-mode @qr-view-finder camera-ref on-read-code])
          [rn/view {:style (style/root-container (:top insets))}
-          [header
+          [:f> header
            {:active-tab          active-tab
             :read-qr-once?       read-qr-once?
             :title               title
@@ -406,7 +388,7 @@
                      :transform [{:translate-y content-translate-y}]}
                     {})}
            (case @active-tab
-             1 [scan-qr-code-tab qr-view-finder]
+             1 [scan-qr-code-tab @qr-view-finder]
              2 [enter-sync-code-tab]
              nil)]
           [rn/view {:style style/flex-spacer}]