diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs index fb97027b6f9..410d1c56a2f 100644 --- a/src/status_im/ui/components/colors.cljs +++ b/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)) diff --git a/src/status_im/ui/components/react.cljs b/src/status_im/ui/components/react.cljs index a7af7b6dee9..7b828d873c1 100644 --- a/src/status_im/ui/components/react.cljs +++ b/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)) diff --git a/src/status_im/ui/screens/chat/image/preview/views.cljs b/src/status_im/ui/screens/chat/image/preview/views.cljs index 44c2feb98f5..14b8d86cb51 100644 --- a/src/status_im/ui/screens/chat/image/preview/views.cljs +++ b/src/status_im/ui/screens/chat/image/preview/views.cljs @@ -6,30 +6,34 @@ [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}} - [react/view {:flex 1 :align-items :center :justify-content :center} - [react/image {:style (merge {:width width - :height (- height 200) - :background-color :black}) - :resize-mode :contain - :source {:uri (:image content)}}]] - [react/view {:flex-direction :row :padding-horizontal 8 - :justify-content :space-between :align-items :center} - [react/view {:width 64}] - [quo/button {:on-press #(re-frame/dispatch [:navigate-back]) - :type :secondary - :text-style {:color colors/white-persist}} - (i18n/label :t/close)] - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet - {:content (sheets/image-long-press message true) - :height 64}])} - [icons/icon :main-icons/more {:container-style {:width 24 :height 24 - :margin 20} - :color colors/white-persist}]]]]])) + [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) + :background-color :black}) + :resize-mode :contain + :source {:uri (:image content)}}]] + [react/view {:flex-direction :row :padding-horizontal 8 + :justify-content :space-between :align-items :center} + [react/view {:width 64}] + [quo/button {:on-press #(re-frame/dispatch [:navigate-back]) + :type :secondary + :text-style {:color colors/white-persist}} + (i18n/label :t/close)] + [react/touchable-highlight + {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet + {:content (sheets/image-long-press message true) + :height 64}])} + [icons/icon :main-icons/more {:container-style {:width 24 :height 24 + :margin 20} + :color colors/white-persist}]]]])])) diff --git a/src/status_im/ui/screens/qr_scanner/views.cljs b/src/status_im/ui/screens/qr_scanner/views.cljs index 2de48aa0342..362a1864f68 100644 --- a/src/status_im/ui/screens/qr_scanner/views.cljs +++ b/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,22 +30,24 @@ (defn qr-test-view [opts] (let [text-value (atom "")] - [react/safe-area-view {:style {:flex 1 - :background-color colors/black-persist}} - [topbar nil opts] - [react/view {:flex 1 - :align-items :center - :justify-content :center} - [react/text-input {:multiline true - :style {:color colors/white-persist} - :on-change-text #(reset! text-value %)}] - [react/view {:flex-direction :row} - [quo/button - {:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])} - "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"]]]])) + [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 + :justify-content :center} + [react/text-input {:multiline true + :style {:color colors/white-persist} + :on-change-text #(reset! text-value %)}] + [react/view {:flex-direction :row} + [quo/button + {:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])} + "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"]]]])])) (defn corner [border1 border2 corner] [react/view (assoc {:border-color colors/white-persist :width 60 :height 60} border1 5 border2 5 corner 32)]) @@ -72,19 +75,21 @@ 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}} - [topbar camera-flashlight opts] - [react/with-activity-indicator - {} - [camera/camera - {:ref #(reset! camera-ref %) - :style {:flex 1} - :capture-audio false - :on-layout (camera/on-layout layout) - :auto-focus-point-of-interest @focus-object - :on-tap (camera/on-tap camera-ref layout focus-object) - :on-bar-code-read #(when-not @read-once? - (reset! read-once? true) - (on-barcode-read opts %))}]] - [viewfinder (int (* 2 (/ (min height width) 3)))]]))) + [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 + {} + [camera/camera + {:ref #(reset! camera-ref %) + :style {:flex 1} + :capture-audio false + :on-layout (camera/on-layout layout) + :auto-focus-point-of-interest @focus-object + :on-tap (camera/on-tap camera-ref layout focus-object) + :on-bar-code-read #(when-not @read-once? + (reset! read-once? true) + (on-barcode-read opts %))}]] + [viewfinder (int (* 2 (/ (min height width) 3)))]])]))) diff --git a/src/status_im/ui/screens/routing/main.cljs b/src/status_im/ui/screens/routing/main.cljs index bf63120e7fb..f55a7f2d786 100644 --- a/src/status_im/ui/screens/routing/main.cljs +++ b/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