Switcher blurred background view (#13717)

ios/Podfile.lock

@@ -210,7 +210,7 @@ PODS:
     - React
   - react-native-blob-util (0.13.18):
     - React-Core
-  - react-native-blur (0.8.0):
+  - react-native-blur (3.6.1):
     - React
   - react-native-camera-kit (8.0.4):
     - React
@@ -384,7 +384,7 @@ PODS:
   - SDWebImage (5.11.1):
     - SDWebImage/Core (= 5.11.1)
   - SDWebImage/Core (5.11.1)
-  - SDWebImageWebPCoder (0.8.4):
+  - SDWebImageWebPCoder (0.8.5):
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.10)
   - secp256k1 (0.1.6)
@@ -635,7 +635,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 502275bc0747df92346edbab1f40dacde2ec86d4
+  glog: 36ce0530c6d2c3a5a4326885ef4069564887a1db
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc
@@ -653,7 +653,7 @@ SPEC CHECKSUMS:
   React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
   react-native-background-timer: 1f7d560647b40e6a60b01c452ba29c54bf581fc4
   react-native-blob-util: 600972b1782380a5a7d5db61a3817ea32349dae9
-  react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
+  react-native-blur: 4568dd93d1d82748c180df8beb2d929c97b13b47
   react-native-camera-kit: 498a6d111a904834e0824e9073cfadef7303235f
   react-native-cameraroll: 88f4e62d9ecd0e1f253abe4f685474f2ea14bfa2
   react-native-config: c98128a72bc2c3a1ca72caec0b021f0fa944aa29
@@ -696,7 +696,7 @@ SPEC CHECKSUMS:
   RNShare: 2dc2fcac3f7321cfd6b60a23ed4bf4d549f86f5f
   RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
-  SDWebImageWebPCoder: f93010f3f6c031e2f8fb3081ca4ee6966c539815
+  SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   secp256k1: f61d67e6fdcb85fd727acf1bf35ace6036db540c
   SQLCipher: f9fcf29b2e59ced7defc2a2bdd0ebe79b40d4990
   SSZipArchive: fe6a26b2a54d5a0890f2567b5cc6de5caa600aef

src/quo2/foundations/colors.cljs

@@ -183,16 +183,6 @@
 (def info-50-opa-30 (alpha info-50 0.3))
 (def info-50-opa-40 (alpha info-50 0.4))
 
-;;;;Switcher
-(def switcher-background "#040B14")
-
-;;switcher-screen with transparency
-(def switcher-background-opa-60 (alpha switcher-background 0.6))
-(def switcher-background-opa-70 (alpha switcher-background 0.7))
-(def switcher-background-opa-80 (alpha switcher-background 0.8))
-(def switcher-background-opa-90 (alpha switcher-background 0.9))
-(def switcher-background-opa-95 (alpha switcher-background 0.95))
-
 ;;General
 
 ;; background

src/quo2/screens/main.cljs

@@ -9,6 +9,7 @@
             [quo2.screens.status-tags :as status-tags]
             [quo2.screens.counter :as counter]
             [quo2.screens.segmented :as segmented]
+            [quo.components.safe-area :as safe-area]
             [quo.core :as quo]))
 
 (def screens [{:name      :quo2-texts
@@ -54,17 +55,21 @@
     [quo/text "Set dark theme"]]])
 
 (defn main-screen []
-  [rn/scroll-view {:flex               1
+  (fn []
-                   :padding-vertical   8
+    [safe-area/consumer
-                   :padding-horizontal 16
+     (fn [insets]
-                   :background-color   (:ui-background @colors/theme)}
+       [rn/scroll-view {:flex               1
-   [theme-switcher]
+                        :padding-top        (:top insets)
-   [rn/view
+                        :padding-bottom     8
-    (for [{:keys [name]} screens]
+                        :padding-horizontal 16
-      ^{:key name}
+                        :background-color   (:ui-background @colors/theme)}
-      [rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])}
+        [theme-switcher]
-       [rn/view {:style {:padding-vertical 8}}
+        [rn/view
-        [quo/text (str "Preview " name)]]])]])
+         (for [{:keys [name]} screens]
+           ^{:key name}
+           [rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])}
+            [rn/view {:style {:padding-vertical 8}}
+             [quo/text (str "Preview " name)]]])]])]))
 
 (def main-screens [{:name      :quo2-preview
                     :insets    {:top false}

src/status_im/navigation2/core.cljs

@@ -35,7 +35,7 @@
 
 (defn get-options [show-topbar? options]
   (merge options
-         (nav-roots/status-bar-options)
+         (roots/status-bar-options)
          (when platform/android?
            {:navigationBar {:backgroundColor (colors/theme-colors colors/white colors/neutral-90)}})
          (if show-topbar?

src/status_im/navigation2/roots.cljs

@@ -6,8 +6,9 @@
 (defn status-bar-options []
   (if platform/android?
     {:navigationBar {:backgroundColor colors/neutral-80}
-     :statusBar     {:backgroundColor (colors/theme-colors colors/neutral-5 colors/neutral-95)
+     :statusBar     {:backgroundColor :transparent
-                     :style           (if (theme/dark?) :light :dark)}}
+                     :style           (if (theme/dark?) :light :dark)
+                     :drawBehind      true}}
     {:statusBar {:style (if (theme/dark?) :light :dark)}}))
 
 (defn roots []

src/status_im/switcher/constants.cljs

@@ -47,7 +47,9 @@
   (if platform/android? 55 80))
 
 (defn dimensions []
-  (<sub [:dimensions/window]))
+  (let [{:keys [width height]} (<sub [:dimensions/window])]
+    {:width  width
+     :height (+ height switcher-height-offset)}))
 
 (def stacks-ids [:communities-stack :chats-stack :wallet-stack :browser-stack])
 

src/status_im/switcher/styles.cljs

@@ -1,6 +1,7 @@
 (ns status-im.switcher.styles
   (:require [quo.theme :as theme]
             [quo2.foundations.colors :as colors]
+            [status-im.utils.platform :as platform]
             [status-im.switcher.constants :as constants]))
 
 (def themes
@@ -63,12 +64,19 @@
    {:backgroundColor (get-color :switcher-close-button-bg-color)}))
 
 (defn switcher-screen []
-  (dissoc
+  (cond-> (merge-switcher-button-common-styles
-   (merge-switcher-button-common-styles
+           {:background-color colors/neutral-80-opa-80
-    {:background-color colors/switcher-background-opa-80
+            :z-index          1
-     :z-index          1
+            :overflow         :hidden})
-     :overflow         :hidden})
+    platform/android? (dissoc :background-color)
-   :justify-content))
+    true              (dissoc :justify-content)))
+
+(defn switcher-blur-background []
+  (let [{:keys [width height]} (constants/dimensions)]
+    {:style         {:width  width
+                     :height (+ height constants/switcher-container-height-padding)}
+     :blur-amount   17
+     :overlay-color colors/neutral-80-opa-80}))
 
 (defn switcher-screen-container []
   (let [{:keys [width height]} (constants/dimensions)]

src/status_im/switcher/switcher.cljs

@@ -3,6 +3,7 @@
             [quo2.reanimated :as reanimated]
             [quo2.foundations.colors :as colors]
             [status-im.switcher.styles :as styles]
+            [status-im.ui.components.react :as react]
             [status-im.switcher.constants :as constants]
             [status-im.switcher.animation :as animation]
             [status-im.ui.components.icons.icons :as icons]
@@ -50,6 +51,7 @@
                                                :transform [{:scale (:switcher-container-scale shared-values)}]}
                                               switcher-container-original-style)]
        [reanimated/view {:style switcher-screen-animated-style}
+        [react/blur-view (styles/switcher-blur-background)]
         [reanimated/view {:style switcher-container-animated-style}
          [switcher-container/tabs toggle-switcher-screen-fn]]]))])
 

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

@@ -310,11 +310,11 @@
        :chat-icon              chat-icon.styles/chat-icon-chat-list}]]))
 
 (defn home []
-  [react/keyboard-avoiding-view {:style {:flex 1 :background-color (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/switcher-background)}
+  [react/keyboard-avoiding-view {:style {:flex 1 :background-color (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)}
                                  :ignore-offset true}
    [topbar/topbar {:navigation      :none
                    :use-insets true
-                   :background (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/switcher-background)
+                   :background (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)
                    :left-component [react/view {:flex-direction :row :margin-left 16}
                                     [profile-button]]
                    :right-component [react/view {:flex-direction :row :margin-right 16}
@@ -343,4 +343,4 @@
                                      [notifications-button-old]]}]
    [chats-list-old]
    [plus-button-old]
-   [tabbar/tabs-counts-subscriptions]])
+   [tabbar/tabs-counts-subscriptions]])