diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index c0f93599b1..1b30a870ff 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -1,5 +1,6 @@ (ns quo2.foundations.colors (:require [clojure.string :as string] + [react-native.platform :as platform] [quo2.theme :as theme])) (defn alpha @@ -126,12 +127,13 @@ (def neutral-5-opa-70-blur (alpha neutral-5 0.7)) (def neutral-10-opa-10-blur (alpha neutral-10 0.1)) (def neutral-10-opa-40-blur (alpha neutral-10 0.4)) -(def neutral-80-opa-80-blur (alpha "#192438" 0.8)) +;; https://github.com/status-im/status-mobile/issues/14903 +(def neutral-80-opa-80-blur (if platform/android? (alpha "#192438" 0.8) "#1E2430CC")) (def neutral-90-opa-10-blur (alpha neutral-90 0.1)) (def neutral-90-opa-40-blur (alpha neutral-90 0.4)) (def neutral-90-opa-70-blur (alpha neutral-90 0.7)) (def neutral-95-opa-70-blur neutral-95-opa-70) -(def neutral-100-opa-70-blur neutral-100-opa-70) +(def neutral-100-opa-70-blur (if platform/android? neutral-100-opa-70 "#0D1014B3")) ;;;;Black diff --git a/src/status_im2/contexts/onboarding/common/background/view.cljs b/src/status_im2/contexts/onboarding/common/background/view.cljs index 1d59acb0ff..31e31950c5 100644 --- a/src/status_im2/contexts/onboarding/common/background/view.cljs +++ b/src/status_im2/contexts/onboarding/common/background/view.cljs @@ -4,6 +4,7 @@ [utils.i18n :as i18n] [utils.re-frame :as rf] [oops.core :refer [oget]] + [react-native.platform :as platform] [status-im2.common.resources :as resources] [status-im.async-storage.core :as async-storage] [status-im2.contexts.shell.jump-to.state :as shell.state] @@ -88,10 +89,9 @@ (when dark-overlay? [blur/view {:style style/background-blur-overlay - :blur-amount 30 - :blur-radius 25 + :blur-amount (if platform/android? 30 20) + :blur-radius (if platform/android? 25 10) :blur-type :transparent :overlay-color :transparent}])])) (defn view [dark-overlay?] [:f> f-view dark-overlay?]) - diff --git a/src/status_im2/contexts/onboarding/common/overlay/view.cljs b/src/status_im2/contexts/onboarding/common/overlay/view.cljs index 598792ccda..60284869c5 100644 --- a/src/status_im2/contexts/onboarding/common/overlay/view.cljs +++ b/src/status_im2/contexts/onboarding/common/overlay/view.cljs @@ -3,6 +3,7 @@ [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] + [react-native.platform :as platform] [status-im2.contexts.onboarding.common.overlay.style :as style] [status-im2.constants :as constants])) @@ -61,7 +62,7 @@ :style (style/blur-container opacity)} [blur/view {:blur-amount @blur-amount - :blur-radius 25 + :blur-radius (if platform/android? 25 10) :blur-type :transparent :overlay-color :transparent :style style/blur-style}]])) diff --git a/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/style.cljs b/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/style.cljs index 85bb4dd1d0..6f1ef19b45 100644 --- a/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/style.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/style.cljs @@ -27,10 +27,13 @@ :flex 1 :accessibility-label :bottom-tabs}) -(def bottom-tabs-blur-overlay - {:position :absolute - :left 0 - :right 0 - :bottom 0 - :height (utils/bottom-tabs-extended-container-height) - :background-color colors/neutral-100-opa-70}) +(defn bottom-tabs-blur-overlay + [height] + (reanimated/apply-animations-to-style + {:height height} + {:position :absolute + :left 0 + :right 0 + :bottom 0 + :height (utils/bottom-tabs-container-height) + :background-color colors/neutral-100-opa-70-blur})) diff --git a/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs b/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs index 2a621f0b80..292092a00e 100644 --- a/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs @@ -1,8 +1,8 @@ (ns status-im2.contexts.shell.jump-to.components.bottom-tabs.view (:require [utils.re-frame :as rf] [react-native.core :as rn] - [react-native.blur :as blur] [react-native.gesture :as gesture] + [react-native.platform :as platform] [react-native.reanimated :as reanimated] [status-im2.contexts.shell.jump-to.utils :as utils] [status-im2.contexts.shell.jump-to.state :as state] @@ -14,8 +14,8 @@ (defn blur-overlay-params [style] {:style style - :blur-amount 30 - :blur-radius 25 + :blur-amount (if platform/android? 30 20) + :blur-radius (if platform/android? 25 10) :blur-type :transparent :overlay-color :transparent}) @@ -53,13 +53,15 @@ (gesture/number-of-taps 2) (gesture/on-start (fn [_event] - (rf/dispatch [:messages-home/select-tab :tab/recent]))))] + (rf/dispatch [:messages-home/select-tab :tab/recent])))) + bottom-tabs-blur-overlay-style (style/bottom-tabs-blur-overlay (:bottom-tabs-height + shared-values))] (utils/load-stack @state/selected-stack-id) (reanimated/set-shared-value (:pass-through? shared-values) pass-through?) [reanimated/view {:style (style/bottom-tabs-container pass-through? (:bottom-tabs-height shared-values))} (when pass-through? - [blur/view (blur-overlay-params style/bottom-tabs-blur-overlay)]) + [reanimated/blur-view (blur-overlay-params bottom-tabs-blur-overlay-style)]) [rn/view {:style (style/bottom-tabs)} [gesture/gesture-detector {:gesture communities-double-tab-gesture} [bottom-tab :i/communities :communities-stack shared-values notifications-data]] diff --git a/src/status_im2/contexts/shell/jump_to/components/jump_to_screen/style.cljs b/src/status_im2/contexts/shell/jump_to/components/jump_to_screen/style.cljs index 35b7599917..4eea2e8c92 100644 --- a/src/status_im2/contexts/shell/jump_to/components/jump_to_screen/style.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/jump_to_screen/style.cljs @@ -61,4 +61,4 @@ :left 0 :right 0 :top 0 - :background-color colors/neutral-100-opa-70}) + :background-color colors/neutral-100-opa-70-blur})