Update Bottom sheet screen to use theme context (#16429)

This commit updates the `bottom-sheet-screen` component (which used `override-theme` from `screen-params` subs) to use the theme from the context provider.

The bottom sheet screen will pick the theme specified in the screen options (to override) as expected. If it's not specified, then it will fall back to the user's theme.

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

src/status_im2/common/bottom_sheet_screen/style.cljs

@@ -15,10 +15,10 @@
     :right            0}))
 
 (defn main-view
-  [translate-y override-theme]
+  [translate-y theme]
   (reanimated/apply-animations-to-style
    {:transform [{:translate-y translate-y}]}
-   {:background-color        (colors/theme-colors colors/white colors/neutral-95 override-theme)
+   {:background-color        (colors/theme-colors colors/white colors/neutral-95 theme)
     :border-top-left-radius  20
     :border-top-right-radius 20
     :flex                    1
@@ -36,9 +36,9 @@
    :align-items     :center})
 
 (defn handle
-  [override-theme]
+  [theme]
   {:width            32
    :height           4
    :border-radius    100
-   :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
+   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)
    :opacity          (theme/theme-value 0.05 0.1)})

src/status_im2/common/bottom_sheet_screen/view.cljs

@@ -1,15 +1,15 @@
 (ns status-im2.common.bottom-sheet-screen.view
-  (:require
+  (:require [oops.core :as oops]
-    [react-native.gesture :as gesture]
+            [quo2.theme :as theme]
-    [react-native.hooks :as hooks]
+            [react-native.core :as rn]
-    [react-native.platform :as platform]
+            [react-native.gesture :as gesture]
-    [react-native.reanimated :as reanimated]
+            [react-native.hooks :as hooks]
-    [oops.core :as oops]
+            [react-native.platform :as platform]
-    [react-native.safe-area :as safe-area]
+            [react-native.reanimated :as reanimated]
-    [status-im2.common.bottom-sheet-screen.style :as style]
+            [react-native.safe-area :as safe-area]
-    [react-native.core :as rn]
+            [reagent.core :as reagent]
-    [reagent.core :as reagent]
+            [status-im2.common.bottom-sheet-screen.style :as style]
-    [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]))
 
 (def ^:const drag-threshold 200)
 
@@ -43,12 +43,11 @@
   (let [y (oops/oget e "nativeEvent.contentOffset.y")]
     (reset! curr-scroll y)))
 
-(defn f-view
+(defn- f-view
-  [content skip-background?]
+  [_]
-  (let [scroll-enabled           (reagent/atom true)
+  (let [scroll-enabled (reagent/atom true)
-        curr-scroll              (reagent/atom 0)
+        curr-scroll    (reagent/atom 0)]
-        {:keys [override-theme]} (rf/sub [:get-screen-params])]
+    (fn [{:keys [content skip-background? theme]}]
-    (fn []
       (let [insets           (safe-area/get-insets)
             {:keys [height]} (rn/get-window)
             padding-top      (:top insets)
@@ -71,12 +70,18 @@
            [reanimated/view {:style (style/background opacity)}])
          [gesture/gesture-detector
           {:gesture (drag-gesture translate-y opacity scroll-enabled curr-scroll close)}
-          [reanimated/view {:style (style/main-view translate-y override-theme)}
+          [reanimated/view {:style (style/main-view translate-y theme)}
            [rn/view {:style style/handle-container}
-            [rn/view {:style (style/handle override-theme)}]]
+            [rn/view {:style (style/handle theme)}]]
            [content
             {:insets         insets
              :close          close
              :scroll-enabled scroll-enabled
              :current-scroll curr-scroll
              :on-scroll      #(on-scroll % curr-scroll)}]]]]))))
+
+(defn- internal-view
+  [params]
+  [:f> f-view params])
+
+(def view (theme/with-theme internal-view))

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

@@ -60,8 +60,7 @@
       :size                32
       :accessibility-label :find-sync-code
       :override-theme      :dark
-      :on-press            #(rf/dispatch [:open-modal :find-sync-code
+      :on-press            #(rf/dispatch [:open-modal :find-sync-code])}
-                                          {:override-theme :dark}])}
      (i18n/label :t/find-sync-code)]]
    [quo/text
     {:size   :heading-1

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

@@ -31,8 +31,7 @@
                               :label               (i18n/label :t/how-to-pair)
                               :icon                :i/info
                               :icon-override-theme :dark
-                              :on-press            #(rf/dispatch [:open-modal :how-to-pair
+                              :on-press            #(rf/dispatch [:open-modal :how-to-pair])}]}]])
-                                                                  {:override-theme :dark}])}]}]])
 
 (defn f-use-interval
   [clock cleanup-clock delay]

src/status_im2/navigation/view.cljs

@@ -67,7 +67,7 @@
         [rn/view {:style (wrapped-screen-style insets background-color)}
          [inactive]
          (if sheet?
-           [:f> bottom-sheet-screen/f-view component]
+           [bottom-sheet-screen/view {:content component}]
            [component])]
         (when js/goog.DEBUG
           [reloader/reload-view])]))))