diff --git a/ios/Podfile.lock b/ios/Podfile.lock index affcf7f24c..ba09953156 100644 --- a/ios/Podfile.lock +++ b/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 diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 5a5a9067fe..5d24de88f0 100644 --- a/src/quo2/foundations/colors.cljs +++ b/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 diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 6ccce368ac..0147618b1d 100644 --- a/src/quo2/screens/main.cljs +++ b/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 - :padding-vertical 8 - :padding-horizontal 16 - :background-color (:ui-background @colors/theme)} - [theme-switcher] - [rn/view - (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)]]])]]) + (fn [] + [safe-area/consumer + (fn [insets] + [rn/scroll-view {:flex 1 + :padding-top (:top insets) + :padding-bottom 8 + :padding-horizontal 16 + :background-color (:ui-background @colors/theme)} + [theme-switcher] + [rn/view + (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} diff --git a/src/status_im/navigation2/core.cljs b/src/status_im/navigation2/core.cljs index cd8bd1bcdf..dc413caaa7 100644 --- a/src/status_im/navigation2/core.cljs +++ b/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? diff --git a/src/status_im/navigation2/roots.cljs b/src/status_im/navigation2/roots.cljs index e67a79324b..1e253c586c 100644 --- a/src/status_im/navigation2/roots.cljs +++ b/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) - :style (if (theme/dark?) :light :dark)}} + :statusBar {:backgroundColor :transparent + :style (if (theme/dark?) :light :dark) + :drawBehind true}} {:statusBar {:style (if (theme/dark?) :light :dark)}})) (defn roots [] diff --git a/src/status_im/switcher/constants.cljs b/src/status_im/switcher/constants.cljs index de8cb4638e..141d4d22b1 100644 --- a/src/status_im/switcher/constants.cljs +++ b/src/status_im/switcher/constants.cljs @@ -47,7 +47,9 @@ (if platform/android? 55 80)) (defn dimensions [] - ( (merge-switcher-button-common-styles + {:background-color colors/neutral-80-opa-80 + :z-index 1 + :overflow :hidden}) + platform/android? (dissoc :background-color) + 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)] diff --git a/src/status_im/switcher/switcher.cljs b/src/status_im/switcher/switcher.cljs index 288b547975..d99f8e03ea 100644 --- a/src/status_im/switcher/switcher.cljs +++ b/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]]]))]) diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index b03b7744ad..372a79ebb3 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/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]]) \ No newline at end of file + [tabbar/tabs-counts-subscriptions]])