fix scan qr window

Signed-off-by: andrey <motor4ik@gmail.com>

src/status_im/ui/components/colors.cljs

@@ -40,7 +40,7 @@
 
 ;; BLACK
 (def black (:black light))                                  ;; Used as the default text color
-(def black-persist (:black light))                          ;; this doesn't with theme
+(def black-persist (:white dark))                           ;; this doesn't with theme
 (def black-transparent (alpha black 0.1))                   ;; Used as background color for rounded button on dark background and as background color for containers like "Backup recovery phrase"
 (def black-transparent-20 (alpha black 0.2))                ; accounts divider
 (def black-transparent-40 (alpha black 0.4))

src/status_im/ui/components/react.cljs

@@ -8,7 +8,7 @@
             ["react-native" :as react-native :refer (Keyboard)]
             ["react-native-image-crop-picker" :default image-picker]
             ["react-native-safe-area-context" :as safe-area-context
-             :refer (SafeAreaView SafeAreaProvider SafeAreaInsetsContext)]
+             :refer (SafeAreaProvider SafeAreaInsetsContext)]
             ["@react-native-community/clipboard" :default Clipboard])
   (:require-macros [status-im.utils.views :as views]))
 
@@ -244,5 +244,3 @@
 
 (def safe-area-provider (reagent/adapt-react-class SafeAreaProvider))
 (def safe-area-consumer (reagent/adapt-react-class (.-Consumer ^js SafeAreaInsetsContext)))
-
-(def safe-area-view (reagent/adapt-react-class SafeAreaView))

src/status_im/ui/screens/chat/image/preview/views.cljs

@@ -6,13 +6,17 @@
             [quo.core :as quo]
             [status-im.i18n :as i18n]
             [status-im.ui.components.icons.vector-icons :as icons]
-            [status-im.ui.screens.chat.sheets :as sheets]))
+            [status-im.ui.screens.chat.sheets :as sheets]
+            [quo.components.safe-area :as safe-area]))
 
 (defview preview-image []
   (letsubs [{:keys [content] :as message} [:get-screen-params]
             {:keys [width height]} [:dimensions/window]]
-    [react/view {:flex 1 :background-color colors/black-persist}
-     [react/safe-area-view {:style {:flex 1 :justify-content :flex-end}}
+    [safe-area/consumer
+     (fn [insets]
+       [react/view {:style {:flex 1 :justify-content :flex-end
+                            :padding-top (:top insets) :padding-bottom (:bottom insets)
+                            :background-color colors/black-persist}}
         [react/view {:flex 1 :align-items :center :justify-content :center}
          [react/image {:style       (merge {:width            width
                                             :height           (- height 200)
@@ -32,4 +36,4 @@
                                            :height  64}])}
           [icons/icon :main-icons/more {:container-style {:width  24 :height 24
                                                           :margin 20}
-                                      :color           colors/white-persist}]]]]]))
+                                        :color           colors/white-persist}]]]])]))

src/status_im/ui/screens/qr_scanner/views.cljs

@@ -10,7 +10,8 @@
             [status-im.ui.components.colors :as colors]
             [status-im.utils.config :as config]
             [quo.core :as quo]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [quo.components.safe-area :as safe-area]))
 
 (defn- topbar [_ {:keys [title] :as opts}]
   [topbar/toolbar
@@ -29,8 +30,10 @@
 
 (defn qr-test-view [opts]
   (let [text-value (atom "")]
-    [react/safe-area-view {:style {:flex             1
-                                   :background-color colors/black-persist}}
+    [safe-area/consumer
+     (fn [insets]
+       [react/view {:flex 1 :background-color colors/black-persist
+                    :padding-top (:top insets) :padding-bottom (:bottom insets)}
         [topbar nil opts]
         [react/view {:flex            1
                      :align-items     :center
@@ -44,7 +47,7 @@
            "Cancel"]
           [quo/button
            {:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-success opts (when-let [text @text-value] (string/trim text))])}
-        "Ok"]]]]))
+           "Ok"]]]])]))
 
 (defn corner [border1 border2 corner]
   [react/view (assoc {:border-color colors/white-persist :width 60 :height 60} border1 5 border2 5 corner 32)])
@@ -72,8 +75,10 @@
             layout            (atom nil)]
     (if config/qr-test-menu-enabled?
       [qr-test-view opts]
-      [react/safe-area-view {:style {:flex             1
-                                     :background-color colors/black-persist}}
+      [safe-area/consumer
+       (fn [insets]
+         [react/view {:flex 1 :background-color colors/black-persist
+                      :padding-top (:top insets) :padding-bottom (:bottom insets)}
           [topbar camera-flashlight opts]
           [react/with-activity-indicator
            {}
@@ -87,4 +92,4 @@
              :on-bar-code-read             #(when-not @read-once?
                                               (reset! read-once? true)
                                               (on-barcode-read opts %))}]]
-       [viewfinder (int (* 2 (/ (min height width) 3)))]])))
+          [viewfinder (int (* 2 (/ (min height width) 3)))]])])))

src/status_im/ui/screens/routing/main.cljs

@@ -93,10 +93,10 @@
       {:name      :contact-code
        :component wallet.components/contact-code}
       {:name      :qr-scanner
-       :insets    {:top false}
+       :insets    {:top false :bottom false}
        :component qr-scanner/qr-scanner}
       {:name      :image-preview
-       :insets    {:top false}
+       :insets    {:top false :bottom false}
        :component image-preview/preview-image}
       {:name         :notifications-settings
        :back-handler :noop