diff --git a/src/quo/components/animated_header_flatlist/style.cljs b/src/quo/components/animated_header_flatlist/style.cljs index 568dd86388..bfc5f346ab 100644 --- a/src/quo/components/animated_header_flatlist/style.cljs +++ b/src/quo/components/animated_header_flatlist/style.cljs @@ -1,6 +1,7 @@ (ns quo.components.animated-header-flatlist.style (:require [quo.foundations.colors :as colors] + [react-native.platform :as platform] [react-native.reanimated :as reanimated])) (defn container-view @@ -28,16 +29,18 @@ :right right})) (defn blur-view - [animation] + [animation theme] (reanimated/apply-animations-to-style {:opacity animation} - {:position :absolute - :top 0 - :left 0 - :right 0 - :height 100 - :z-index 2 - :overflow :hidden})) + {:position :absolute + :top 0 + :left 0 + :right 0 + :height 100 + :z-index 2 + :overflow :hidden + :background-color (when platform/android? + (colors/theme-colors colors/white colors/neutral-80 theme))})) (defn entity-picture [animation theme] diff --git a/src/quo/components/animated_header_flatlist/view.cljs b/src/quo/components/animated_header_flatlist/view.cljs index 5e3e14e2e2..00fc31d397 100644 --- a/src/quo/components/animated_header_flatlist/view.cljs +++ b/src/quo/components/animated_header_flatlist/view.cljs @@ -83,7 +83,7 @@ {:blurAmount 32 :blurType :light :overlayColor (if platform/ios? colors/white-opa-70 :transparent) - :style (style/blur-view opacity-animation)} + :style (style/blur-view opacity-animation theme)} [reanimated/view {:style (style/header-comp translate-animation title-opacity-animation)} [header-comp]]] [reanimated/flat-list diff --git a/src/quo/components/blur/view.cljs b/src/quo/components/blur/view.cljs new file mode 100644 index 0000000000..6b7a082597 --- /dev/null +++ b/src/quo/components/blur/view.cljs @@ -0,0 +1,20 @@ +(ns quo.components.blur.view + (:require [quo.foundations.colors :as colors] + [quo.theme] + [react-native.blur :as blur] + [react-native.core :as rn] + [react-native.platform :as platform])) + +(defn- view-android + ([props] (view-android props nil)) + ([{:keys [style]} child] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (assoc style + :pointer-events :box-none + :background-color + (or (:background-color style) + (colors/theme-colors colors/white colors/neutral-80 theme)))} + child]))) + +(def view (if platform/ios? blur/view view-android)) diff --git a/src/quo/components/buttons/button/view.cljs b/src/quo/components/buttons/button/view.cljs index 6144df885f..142563f5e6 100644 --- a/src/quo/components/buttons/button/view.cljs +++ b/src/quo/components/buttons/button/view.cljs @@ -1,12 +1,12 @@ (ns quo.components.buttons.button.view (:require + [quo.components.blur.view :as blur] [quo.components.buttons.button.properties :as button-properties] [quo.components.buttons.button.style :as style] [quo.components.icon :as quo.icons] [quo.components.markdown.text :as text] [quo.foundations.customization-colors :as customization-colors] [quo.theme] - [react-native.blur :as blur] [react-native.core :as rn])) (defn button diff --git a/src/quo/components/drawers/drawer_buttons/view.cljs b/src/quo/components/drawers/drawer_buttons/view.cljs index c496bf21df..01760809fa 100644 --- a/src/quo/components/drawers/drawer_buttons/view.cljs +++ b/src/quo/components/drawers/drawer_buttons/view.cljs @@ -1,10 +1,10 @@ (ns quo.components.drawers.drawer-buttons.view (:require + [quo.components.blur.view :as blur] [quo.components.drawers.drawer-buttons.style :as style] [quo.components.icon :as icon] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.platform :as platform] [react-native.reanimated :as reanimated] diff --git a/src/quo/components/drawers/permission_context/style.cljs b/src/quo/components/drawers/permission_context/style.cljs index 978d68be7d..e352bbe26e 100644 --- a/src/quo/components/drawers/permission_context/style.cljs +++ b/src/quo/components/drawers/permission_context/style.cljs @@ -1,12 +1,13 @@ (ns quo.components.drawers.permission-context.style (:require [quo.foundations.colors :as colors] + [react-native.platform :as platform] [react-native.safe-area :as safe-area])) (def ^:private radius 20) (def blur-container - {:background-color :transparent + {:background-color (when platform/ios? :transparent) :position :absolute :top 0 :left 0 diff --git a/src/quo/components/drawers/permission_context/view.cljs b/src/quo/components/drawers/permission_context/view.cljs index ef5ae1b298..c9c24fa021 100644 --- a/src/quo/components/drawers/permission_context/view.cljs +++ b/src/quo/components/drawers/permission_context/view.cljs @@ -1,6 +1,7 @@ (ns quo.components.drawers.permission-context.view (:require [clojure.string :as string] + [quo.components.blur.view :as blur] [quo.components.buttons.button.view :as button] [quo.components.drawers.permission-context.schema :as component-schema] [quo.components.drawers.permission-context.style :as style] @@ -10,7 +11,6 @@ [quo.components.tags.token-tag.view :as token-tag] [quo.foundations.colors :as colors] [quo.theme] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.platform :as platform] [react-native.shadow :as shadow] diff --git a/src/quo/components/dropdowns/dropdown/view.cljs b/src/quo/components/dropdowns/dropdown/view.cljs index e1479144b6..22432860c4 100644 --- a/src/quo/components/dropdowns/dropdown/view.cljs +++ b/src/quo/components/dropdowns/dropdown/view.cljs @@ -1,12 +1,12 @@ (ns quo.components.dropdowns.dropdown.view (:require + [quo.components.blur.view :as blur] [quo.components.dropdowns.dropdown.properties :as properties] [quo.components.dropdowns.dropdown.style :as style] [quo.components.icon :as icon] [quo.components.markdown.text :as text] [quo.foundations.customization-colors :as customization-colors] [quo.theme] - [react-native.blur :as blur] [react-native.core :as rn])) (defn view diff --git a/src/quo/components/notifications/notification/style.cljs b/src/quo/components/notifications/notification/style.cljs index c1afa412d0..a9d746ba9f 100644 --- a/src/quo/components/notifications/notification/style.cljs +++ b/src/quo/components/notifications/notification/style.cljs @@ -1,7 +1,8 @@ (ns quo.components.notifications.notification.style (:require [quo.foundations.colors :as colors] - [quo.foundations.shadows :as shadows])) + [quo.foundations.shadows :as shadows] + [react-native.platform :as platform])) (def box-container {:margin-horizontal 8 @@ -15,7 +16,7 @@ :padding-vertical 8 :padding-left 10 :padding-right 8 - :background-color :transparent}) + :background-color (when platform/ios? :transparent)}) (defn content-container [theme] diff --git a/src/quo/components/notifications/notification/view.cljs b/src/quo/components/notifications/notification/view.cljs index c4bca19119..12c33dec0c 100644 --- a/src/quo/components/notifications/notification/view.cljs +++ b/src/quo/components/notifications/notification/view.cljs @@ -1,10 +1,10 @@ (ns quo.components.notifications.notification.view (:require [quo.components.avatars.user-avatar.view :as user-avatar] + [quo.components.blur.view :as blur] [quo.components.markdown.text :as text] [quo.components.notifications.notification.style :as style] [quo.theme] - [react-native.blur :as blur] [react-native.core :as rn])) (defn header-container diff --git a/src/quo/components/notifications/toast/style.cljs b/src/quo/components/notifications/toast/style.cljs index 7778ef567b..1b3716343e 100644 --- a/src/quo/components/notifications/toast/style.cljs +++ b/src/quo/components/notifications/toast/style.cljs @@ -1,7 +1,8 @@ (ns quo.components.notifications.toast.style (:require [quo.foundations.colors :as colors] - [quo.foundations.shadows :as shadows])) + [quo.foundations.shadows :as shadows] + [react-native.platform :as platform])) (defn box-container [theme] @@ -17,7 +18,7 @@ :padding-vertical 8 :padding-left 10 :padding-right 8 - :background-color :transparent}) + :background-color (when platform/ios? :transparent)}) (defn content-container [theme] diff --git a/src/quo/components/notifications/toast/view.cljs b/src/quo/components/notifications/toast/view.cljs index 6777f559ea..08ff7c3656 100644 --- a/src/quo/components/notifications/toast/view.cljs +++ b/src/quo/components/notifications/toast/view.cljs @@ -1,12 +1,12 @@ (ns quo.components.notifications.toast.view (:require [quo.components.avatars.user-avatar.view :as user-avatar] + [quo.components.blur.view :as blur] [quo.components.icon :as icon] [quo.components.markdown.text :as text] [quo.components.notifications.count-down-circle :as count-down-circle] [quo.components.notifications.toast.style :as style] [quo.theme :as quo.theme] - [react-native.blur :as blur] [react-native.core :as rn] [utils.i18n :as i18n])) diff --git a/src/quo/components/overlay/view.cljs b/src/quo/components/overlay/view.cljs index 38d8e3f5e2..33279901b2 100644 --- a/src/quo/components/overlay/view.cljs +++ b/src/quo/components/overlay/view.cljs @@ -1,7 +1,7 @@ (ns quo.components.overlay.view (:require + [quo.components.blur.view :as blur] [quo.components.overlay.style :as style] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.safe-area :as safe-area])) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 15317274c7..6fc5530b2c 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -13,6 +13,7 @@ quo.components.avatars.user-avatar.view quo.components.avatars.wallet-user-avatar.view quo.components.banners.banner.view + quo.components.blur.view quo.components.browser.browser-input.view quo.components.buttons.button.view quo.components.buttons.composer-button.view @@ -218,6 +219,9 @@ ;;;; Browser (def browser-input quo.components.browser.browser-input.view/view) +;;;; Blur +(def blur quo.components.blur.view/view) + ;;;; Calendar (def calendar quo.components.calendar.calendar.view/view) (def calendar-day quo.components.calendar.calendar-day.view/view) diff --git a/src/react_native/blur.cljs b/src/react_native/blur.cljs index cad23cafb2..e69f08fa99 100644 --- a/src/react_native/blur.cljs +++ b/src/react_native/blur.cljs @@ -2,10 +2,9 @@ (:require ["@react-native-community/blur" :as blur] [react-native.core :as rn] - [react-native.platform :as platform] [reagent.core :as reagent])) -(def view (reagent/adapt-react-class (.-BlurView blur))) - -;; blur view is currently not working correctly on Android. -(def ios-view (if platform/ios? view rn/view)) +(def view + (if blur + (reagent/adapt-react-class (.-BlurView blur)) + rn/view)) diff --git a/src/react_native/reanimated.cljs b/src/react_native/reanimated.cljs index ef619273ae..464b7f3e57 100644 --- a/src/react_native/reanimated.cljs +++ b/src/react_native/reanimated.cljs @@ -23,6 +23,7 @@ runOnJS)] ["react-native-redash" :refer (withPause)] [react-native.flat-list :as rn-flat-list] + [react-native.platform :as platform] [react-native.utils :as rn.utils] [reagent.core :as reagent] [utils.transforms :as transforms] @@ -60,7 +61,7 @@ (def touchable-opacity (create-animated-component (.-TouchableOpacity ^js rn))) (def linear-gradient (create-animated-component LinearGradient)) (def fast-image (create-animated-component FastImage)) -(def blur-view (create-animated-component (.-BlurView blur))) +(def blur-view (if platform/ios? (create-animated-component (.-BlurView blur)) view)) ;; Hooks (def use-shared-value useSharedValue) diff --git a/src/status_im/common/bottom_sheet/view.cljs b/src/status_im/common/bottom_sheet/view.cljs index 31523dc13e..98fec0f694 100644 --- a/src/status_im/common/bottom_sheet/view.cljs +++ b/src/status_im/common/bottom_sheet/view.cljs @@ -4,7 +4,6 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.hooks :as hooks] @@ -134,7 +133,7 @@ (style/sheet {:max-height sheet-max-height}))} (when shell? [rn/view {:style style/shell-bg-container} - [blur/ios-view + [quo/blur {:style (style/shell-bg blur-background) :blur-radius (or blur-radius 20) :blur-amount 32 diff --git a/src/status_im/common/emoji_picker/view.cljs b/src/status_im/common/emoji_picker/view.cljs index 27277c9082..b3ffd36494 100644 --- a/src/status_im/common/emoji_picker/view.cljs +++ b/src/status_im/common/emoji_picker/view.cljs @@ -5,7 +5,6 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.platform :as platform] @@ -131,7 +130,7 @@ :scroll-ref scroll-ref}))] (fn [] [rn/view {:style style/category-container} - [blur/view + [quo/blur {:style style/category-blur-container :blur-radius (if platform/android? 20 10) :blur-amount (if platform/ios? 20 10) diff --git a/src/status_im/common/floating_button_page/floating_container/view.cljs b/src/status_im/common/floating_button_page/floating_container/view.cljs index a601609aa9..b2d1a752ba 100644 --- a/src/status_im/common/floating_button_page/floating_container/view.cljs +++ b/src/status_im/common/floating_button_page/floating_container/view.cljs @@ -1,13 +1,14 @@ (ns status-im.common.floating-button-page.floating-container.view - (:require [quo.theme :as quo.theme] - [react-native.blur :as blur] - [react-native.core :as rn] - [status-im.common.floating-button-page.floating-container.style :as style])) + (:require + [quo.core :as quo] + [quo.theme :as quo.theme] + [react-native.core :as rn] + [status-im.common.floating-button-page.floating-container.style :as style])) (defn- blur-container [child] (let [theme (quo.theme/use-theme)] - [blur/view + [quo/blur {:blur-amount 12 :blur-radius 12 :blur-type theme} diff --git a/src/status_im/common/home/banner/view.cljs b/src/status_im/common/home/banner/view.cljs index 723cad745b..a02026fa2d 100644 --- a/src/status_im/common/home/banner/view.cljs +++ b/src/status_im/common/home/banner/view.cljs @@ -4,7 +4,6 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.platform :as platform] [react-native.reanimated :as reanimated] @@ -34,7 +33,7 @@ (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq) theme (quo.theme/use-theme)] [reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value theme)} - [blur/view + [quo/blur {:style style/fill-space :blur-amount (if platform/ios? 20 10) :blur-type (if (= theme :light) (if platform/ios? :light :xlight) :dark) diff --git a/src/status_im/common/scan_qr_code/view.cljs b/src/status_im/common/scan_qr_code/view.cljs index 60bbcbd5d9..8993454abf 100644 --- a/src/status_im/common/scan_qr_code/view.cljs +++ b/src/status_im/common/scan_qr_code/view.cljs @@ -3,7 +3,6 @@ [oops.core :as oops] [quo.core :as quo] [quo.foundations.colors :as colors] - [react-native.blur :as blur] [react-native.camera-kit :as camera-kit] [react-native.core :as rn] [react-native.hole-view :as hole-view] @@ -177,7 +176,7 @@ [hole-view/hole-view {:style style/hole :holes [(assoc qr-view-finder :borderRadius 16)]} - [blur/view + [quo/blur {:style style/absolute-fill :blur-amount 10 :blur-type :transparent diff --git a/src/status_im/common/scroll_page/style.cljs b/src/status_im/common/scroll_page/style.cljs index f614ae0c8d..0b52cc9da7 100644 --- a/src/status_im/common/scroll_page/style.cljs +++ b/src/status_im/common/scroll_page/style.cljs @@ -23,10 +23,7 @@ :right 0 :left 0 :background-color (if platform/android? - (colors/theme-colors - colors/white-opa-70 - colors/neutral-95-opa-70 - theme) + (colors/theme-colors colors/white colors/neutral-80 theme) :transparent)})) (defn sticky-header-title diff --git a/src/status_im/contexts/chat/messenger/composer/view.cljs b/src/status_im/contexts/chat/messenger/composer/view.cljs index d190c9e31a..080d7a3d46 100644 --- a/src/status_im/contexts/chat/messenger/composer/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/view.cljs @@ -1,9 +1,9 @@ (ns status-im.contexts.chat.messenger.composer.view (:require [clojure.string :as string] + [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.hooks :as hooks] @@ -168,7 +168,7 @@ [rn/view (when platform/ios? {:style {:z-index 1}}) [reanimated/view {:style (style/background opacity background-y window-height)}] [reanimated/view {:style (style/blur-container composer-default-height shared-values)} - [blur/view (style/blur-view theme)]] + [quo/blur (style/blur-view theme)]] [:f> sheet-component extra-params props state shared-values]])) (defn composer diff --git a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs index 5dd24400a0..b63d547b4f 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs @@ -5,7 +5,6 @@ [quo.foundations.colors :as colors] [quo.theme] [re-frame.db] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.platform :as platform] [react-native.reanimated :as reanimated] @@ -115,7 +114,7 @@ messages.constants/pinned-banner-animation-start-position)))] [:<> [reanimated/view {:style (style/animated-background-view background-opacity navigation-view-height)} - [blur/view + [quo/blur {:style {:flex 1} :blur-amount 20 :blur-type :transparent diff --git a/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs b/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs index a533a02abc..5d19fefc80 100644 --- a/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs @@ -2,7 +2,6 @@ (:require [quo.core :as quo] [quo.theme] - [react-native.blur :as blur] [react-native.platform :as platform] [react-native.reanimated :as reanimated] [status-im.contexts.chat.messenger.messages.pin.banner.style :as style] @@ -12,7 +11,7 @@ [{:keys [chat-id banner-opacity top-offset]} latest-pin-text pins-count] (let [theme (quo.theme/use-theme)] [reanimated/view {:style (style/container-animated-style top-offset banner-opacity)} - [blur/view + [quo/blur {:style style/container :blur-radius (if platform/ios? 20 10) :blur-type theme diff --git a/src/status_im/contexts/communities/overview/view.cljs b/src/status_im/contexts/communities/overview/view.cljs index a32bd37b97..675c1e3656 100644 --- a/src/status_im/contexts/communities/overview/view.cljs +++ b/src/status_im/contexts/communities/overview/view.cljs @@ -4,7 +4,6 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -271,7 +270,7 @@ [_] (fn [{:keys [enabled label]}] (when enabled - [blur/view + [quo/blur {:style style/blur-channel-header :blur-amount 20 :blur-type :transparent diff --git a/src/status_im/contexts/onboarding/common/background/style.cljs b/src/status_im/contexts/onboarding/common/background/style.cljs index fdedf271af..53ae855b34 100644 --- a/src/status_im/contexts/onboarding/common/background/style.cljs +++ b/src/status_im/contexts/onboarding/common/background/style.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.onboarding.common.background.style (:require - [quo.foundations.colors :as colors])) + [quo.foundations.colors :as colors] + [react-native.platform :as platform])) (def background-container {:background-color colors/neutral-95 @@ -18,4 +19,4 @@ :top 0 :bottom 0 :right 0 - :background-color colors/neutral-80-opa-80-blur}) + :background-color (when platform/ios? colors/neutral-80-opa-80-blur)}) diff --git a/src/status_im/contexts/onboarding/common/background/view.cljs b/src/status_im/contexts/onboarding/common/background/view.cljs index eab55652db..a894172c9e 100644 --- a/src/status_im/contexts/onboarding/common/background/view.cljs +++ b/src/status_im/contexts/onboarding/common/background/view.cljs @@ -1,8 +1,8 @@ (ns status-im.contexts.onboarding.common.background.view (:require [oops.core :refer [oget]] + [quo.core :as quo] [react-native.async-storage :as async-storage] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.platform :as platform] [react-native.reanimated :as reanimated] @@ -89,7 +89,7 @@ :gesture :swipeable :background [background-image (* 4 window-width)]}] (when dark-overlay? - [blur/view + [quo/blur {:style style/background-blur-overlay :blur-amount (if platform/android? 30 20) :blur-radius (if platform/android? 25 10) diff --git a/src/status_im/contexts/onboarding/common/overlay/style.cljs b/src/status_im/contexts/onboarding/common/overlay/style.cljs index 84069bb447..3bfdfdd43d 100644 --- a/src/status_im/contexts/onboarding/common/overlay/style.cljs +++ b/src/status_im/contexts/onboarding/common/overlay/style.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.onboarding.common.overlay.style (:require [quo.foundations.colors :as colors] + [react-native.platform :as platform] [react-native.reanimated :as reanimated])) (defn blur-container @@ -15,4 +16,4 @@ (def blur-style {:flex 1 - :background-color colors/neutral-80-opa-80-blur}) + :background-color (when platform/ios? colors/neutral-80-opa-80-blur)}) diff --git a/src/status_im/contexts/onboarding/common/overlay/view.cljs b/src/status_im/contexts/onboarding/common/overlay/view.cljs index 61e0cdfd80..f3f5e24639 100644 --- a/src/status_im/contexts/onboarding/common/overlay/view.cljs +++ b/src/status_im/contexts/onboarding/common/overlay/view.cljs @@ -1,6 +1,6 @@ (ns status-im.contexts.onboarding.common.overlay.view (:require - [react-native.blur :as blur] + [quo.core :as quo] [react-native.core :as rn] [react-native.platform :as platform] [react-native.reanimated :as reanimated] @@ -65,7 +65,7 @@ [reanimated/view {:pointer-events :none :style (style/blur-container opacity)} - [blur/view + [quo/blur {:blur-amount @blur-amount :blur-radius (if platform/android? 25 10) :blur-type :transparent diff --git a/src/status_im/contexts/onboarding/create_profile/view.cljs b/src/status_im/contexts/onboarding/create_profile/view.cljs index 7a8014ac08..1c8ee2e330 100644 --- a/src/status_im/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im/contexts/onboarding/create_profile/view.cljs @@ -4,7 +4,6 @@ [oops.core :as oops] [quo.core :as quo] [quo.foundations.colors :as colors] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.hooks :as hooks] [react-native.platform :as platform] @@ -43,7 +42,7 @@ [rn/view {:style {:margin-top :auto}} (cond (and (> @height 0) show-background?) - [blur/ios-view + [quo/blur (when keyboard-shown {:blur-amount 34 :blur-type :transparent diff --git a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs index 17cfb19056..69bd944019 100644 --- a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs +++ b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.preview.quo.gradient.gradient-cover (:require [quo.core :as quo] - [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] [status-im.common.resources :as resources] @@ -63,7 +62,7 @@ [rn/image {:style {:height 332} :source (resources/get-mock-image :dark-blur-bg)}]) - [(if @blur? blur/view rn/view) + [(if @blur? quo/blur rn/view) {:style {:height 332 :padding-vertical 40} :blur-type :dark} diff --git a/src/status_im/contexts/preview/quo/preview.cljs b/src/status_im/contexts/preview/quo/preview.cljs index 9b648d8de7..dd726452d1 100644 --- a/src/status_im/contexts/preview/quo/preview.cljs +++ b/src/status_im/contexts/preview/quo/preview.cljs @@ -6,7 +6,6 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [react-native.blur :as blur] [react-native.clipboard :as clipboard] [react-native.core :as rn] [react-native.safe-area :as safe-area] @@ -351,7 +350,7 @@ [rn/image {:source (or image (resources/get-mock-image :dark-blur-bg)) :style {:height "100%" :width "100%"}}] - [blur/view + [quo/blur (merge {:style {:position :absolute :top 0 :bottom 0 diff --git a/src/status_im/contexts/shell/jump_to/components/bottom_tabs/style.cljs b/src/status_im/contexts/shell/jump_to/components/bottom_tabs/style.cljs index 0f08670553..a6a901bb07 100644 --- a/src/status_im/contexts/shell/jump_to/components/bottom_tabs/style.cljs +++ b/src/status_im/contexts/shell/jump_to/components/bottom_tabs/style.cljs @@ -8,7 +8,9 @@ (defn bottom-tabs-container [pass-through? height] [{:height height} - {:background-color (if pass-through? :transparent colors/neutral-100) + {:background-color (if (and platform/ios? pass-through?) + :transparent + colors/neutral-100) :flex 1 :align-items :center :height (utils/bottom-tabs-container-height) diff --git a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/style.cljs b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/style.cljs index f8fefb13ce..3f7ddd534e 100644 --- a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/style.cljs +++ b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/style.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.shell.jump-to.components.jump-to-screen.style (:require [quo.foundations.colors :as colors] + [react-native.platform :as platform] [status-im.contexts.shell.jump-to.utils :as utils])) ;;;; Placeholder @@ -63,4 +64,4 @@ :left 0 :right 0 :top 0 - :background-color colors/neutral-100-opa-70-blur}) + :background-color (when platform/ios? colors/neutral-100-opa-70-blur)}) diff --git a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs index f27c32b432..14aa6df37d 100644 --- a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs @@ -3,7 +3,6 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme] - [react-native.blur :as blur] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient] [react-native.safe-area :as safe-area] @@ -84,7 +83,7 @@ (let [pass-through? (rf/sub [:shell/shell-pass-through?])] [rn/view {:style (style/top-nav-blur-overlay-container (+ 56 top) pass-through?)} (when pass-through? - [blur/view (bottom-tabs/blur-overlay-params style/top-nav-blur-overlay)])])) + [quo/blur (bottom-tabs/blur-overlay-params style/top-nav-blur-overlay)])])) (defn view [] diff --git a/src/status_im/contexts/syncing/scan_sync_code/view.cljs b/src/status_im/contexts/syncing/scan_sync_code/view.cljs index 20c44f68bd..fbcf311195 100644 --- a/src/status_im/contexts/syncing/scan_sync_code/view.cljs +++ b/src/status_im/contexts/syncing/scan_sync_code/view.cljs @@ -4,7 +4,6 @@ [oops.core :as oops] [quo.core :as quo] [quo.foundations.colors :as colors] - [react-native.blur :as blur] [react-native.camera-kit :as camera-kit] [react-native.core :as rn] [react-native.hole-view :as hole-view] @@ -254,7 +253,7 @@ [hole-view/hole-view {:style style/hole :holes [(assoc qr-view-finder :borderRadius 16)]} - [blur/view + [quo/blur {:style style/absolute-fill :blur-amount 10 :blur-type :transparent diff --git a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs index 7d7409cd29..fae6b9f16c 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs @@ -4,7 +4,6 @@ [native-module.core :as native-module] [quo.core :as quo] [quo.theme :as quo.theme] - [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.wallet.add-account.create-account.new-keypair.backup-recovery-phrase.style :as @@ -86,7 +85,7 @@ :first-half? false}]]) (when-not @revealed? [rn/view {:style style/blur-container} - [blur/view (style/blur theme)]])] + [quo/blur (style/blur theme)]])] (when-not @revealed? [rn/view {:style {:padding-horizontal 20 diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs index 073626c4bd..22c80810a0 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -83,7 +83,9 @@ (colors/theme-colors colors/white-opa-50 colors/neutral-95-opa-70-blur theme))] [rn/view {:style style/animated-header} [reanimated/blur-view - {:style {:flex 1} + {:style {:flex 1 + :background-color (when platform/android? + (colors/theme-colors colors/white colors/neutral-80 theme))} :blur-type :transparent :overlay-color :transparent :blur-amount blur-amount diff --git a/src/status_im/contexts/wallet/sheets/account_options/view.cljs b/src/status_im/contexts/wallet/sheets/account_options/view.cljs index 4ad6072927..981224cb5d 100644 --- a/src/status_im/contexts/wallet/sheets/account_options/view.cljs +++ b/src/status_im/contexts/wallet/sheets/account_options/view.cljs @@ -3,7 +3,6 @@ [quo.core :as quo] [quo.foundations.colors :as colors] quo.theme - [react-native.blur :as blur] [react-native.clipboard :as clipboard] [react-native.core :as rn] [react-native.gesture :as gesture] @@ -43,7 +42,7 @@ {:on-layout #(reset! options-height (oops/oget % "nativeEvent.layout.height")) :style (when show-account-selector? style/options-container)} (when show-account-selector? - [blur/view + [quo/blur {:style (style/blur-container @options-height) :blur-radius (if platform/android? 20 10) :blur-amount (if platform/ios? 20 10) diff --git a/src/status_im/contexts/wallet/sheets/network_preferences/style.cljs b/src/status_im/contexts/wallet/sheets/network_preferences/style.cljs index 39d4249c73..8a40231e73 100644 --- a/src/status_im/contexts/wallet/sheets/network_preferences/style.cljs +++ b/src/status_im/contexts/wallet/sheets/network_preferences/style.cljs @@ -1,5 +1,6 @@ (ns status-im.contexts.wallet.sheets.network-preferences.style - (:require [quo.foundations.colors :as colors])) + (:require [quo.foundations.colors :as colors] + [react-native.platform :as platform])) (def blur {:position :absolute @@ -7,7 +8,7 @@ :left 0 :right 0 :bottom 0 - :overlay-color colors/neutral-100-opa-70-blur}) + :overlay-color (when platform/ios? colors/neutral-100-opa-70-blur)}) (def data-item {:margin-horizontal 20 diff --git a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs index c64d8a05f0..86cd06c828 100644 --- a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs +++ b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs @@ -1,15 +1,15 @@ (ns status-im.contexts.wallet.sheets.network-preferences.view - (:require [quo.core :as quo] - [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] - [react-native.blur :as blur] - [react-native.core :as rn] - [reagent.core :as reagent] - [status-im.constants :as constants] - [status-im.contexts.wallet.common.utils :as utils] - [status-im.contexts.wallet.sheets.network-preferences.style :as style] - [utils.i18n :as i18n] - [utils.re-frame :as rf])) + (:require + [quo.core :as quo] + [quo.foundations.colors :as colors] + [quo.theme :as quo.theme] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im.constants :as constants] + [status-im.contexts.wallet.common.utils :as utils] + [status-im.contexts.wallet.sheets.network-preferences.style :as style] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) (defn view [{:keys [first-section-label second-section-label selected-networks @@ -64,7 +64,7 @@ [:<> ;; quo/overlay isn't compatible with sheets (when blur? - [blur/view + [quo/blur {:style style/blur :blur-amount 20 :blur-radius 25}])