status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix background color on communities/chat home (#19520)

This commit is contained in:
Ibrahem Khalil 2024-04-04 12:35:44 +02:00 committed by GitHub
parent b9a02f707d
commit f0026b4d10
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/status_im/common/home/banner/style.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.common.home.banner.style (ns status-im.common.home.banner.style
(:require (:require
[quo.foundations.colors :as colors]
[react-native.platform :as platform] [react-native.platform :as platform]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[react-native.safe-area :as safe-area])) [react-native.safe-area :as safe-area]))
@ -23,27 +24,29 @@
(reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (+ max-scroll)] :clamp)) (reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (+ max-scroll)] :clamp))
(defn banner-card-blur-layer (defn banner-card-blur-layer
[scroll-shared-value] [scroll-shared-value theme]
(reanimated/apply-animations-to-style (reanimated/apply-animations-to-style
{:transform [{:translate-y (animated-card-translation-y scroll-shared-value)}]} {:transform [{:translate-y (animated-card-translation-y scroll-shared-value)}]}
{:overflow (if platform/ios? :visible :hidden) {:overflow (if platform/ios? :visible :hidden)
:z-index 1 :z-index 1
:position :absolute :position :absolute
:top 0 :top 0
:right 0 :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:left 0 :right 0
:height (+ (safe-area/get-top) 244)})) :left 0
:height (+ (safe-area/get-top) 244)}))
(defn banner-card-hiding-layer (defn banner-card-hiding-layer
[scroll-shared-value] [scroll-shared-value theme]
(reanimated/apply-animations-to-style (reanimated/apply-animations-to-style
{:transform [{:translate-y (animated-card-translation-y-reverse scroll-shared-value)}]} {:transform [{:translate-y (animated-card-translation-y-reverse scroll-shared-value)}]}
{:z-index 2 {:z-index 2
:position :absolute :position :absolute
:top 0 :top 0
:right 0 :right 0
:left 0 :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:padding-top (safe-area/get-top)})) :left 0
:padding-top (+ (safe-area/get-top) 8)}))
(defn animated-banner-card (defn animated-banner-card
[scroll-shared-value] [scroll-shared-value]
@ -53,16 +56,17 @@
{})) {}))
(defn banner-card-tabs-layer (defn banner-card-tabs-layer
[scroll-shared-value] [scroll-shared-value theme]
(reanimated/apply-animations-to-style (reanimated/apply-animations-to-style
{:transform [{:translate-y (animated-card-translation-y scroll-shared-value)}]} {:transform [{:translate-y (animated-card-translation-y scroll-shared-value)}]}
{:z-index 3 {:z-index 3
:position :absolute :position :absolute
:top (+ (safe-area/get-top) 192) :top (+ (safe-area/get-top) 192)
:right 0 :right 0
:left 0})) :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:left 0}))
(def banner-card-tabs (def banner-card-tabs
{:padding-horizontal 20 {:padding-horizontal 20
:padding-top 8 :padding-top 12
:padding-bottom 12}) :padding-bottom 16})

42
src/status_im/common/home/banner/view.cljs
View File

@ -3,7 +3,7 @@
[oops.core :as oops] [oops.core :as oops]
[quo.core :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as theme] [quo.theme]
[react-native.blur :as blur] [react-native.blur :as blur]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.platform :as platform] [react-native.platform :as platform]
@ -31,21 +31,22 @@
(defn- banner-card-blur-layer (defn- banner-card-blur-layer
[scroll-shared-value child] [scroll-shared-value child]
(let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)] (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)
[reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value)} theme (quo.theme/use-theme-value)]
[reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value theme)}
[blur/view [blur/view
{:style style/fill-space {:style style/fill-space
:blur-amount (if platform/ios? 20 10) :blur-amount (if platform/ios? 20 10)
:blur-type (theme/theme-value (if platform/ios? :light :xlight) :dark) :blur-type (quo.theme/theme-value (if platform/ios? :light :xlight) :dark)
:overlay-color (if open-sheet? :overlay-color (if open-sheet?
(colors/theme-colors colors/white colors/neutral-95-opa-70) (colors/theme-colors colors/white colors/neutral-95-opa-70)
(theme/theme-value nil colors/neutral-95-opa-70))} (quo.theme/theme-value nil colors/neutral-95-opa-70))}
child]])) child]]))
(defn- banner-card-hiding-layer (defn- banner-card-hiding-layer
[{:keys [title-props card-props scroll-shared-value]}] [{:keys [title-props card-props scroll-shared-value theme]}]
(let [customization-color (rf/sub [:profile/customization-color])] (let [customization-color (rf/sub [:profile/customization-color])]
[reanimated/view {:style (style/banner-card-hiding-layer scroll-shared-value)} [reanimated/view {:style (style/banner-card-hiding-layer scroll-shared-value theme)}
[top-nav/view] [top-nav/view]
[title-column/view (assoc title-props :customization-color customization-color)] [title-column/view (assoc title-props :customization-color customization-color)]
[rn/view {:style {:overflow @card-banner-overflow}} [rn/view {:style {:overflow @card-banner-overflow}}
@ -53,8 +54,8 @@
[quo/discover-card card-props]]]])) [quo/discover-card card-props]]]]))
(defn- banner-card-tabs-layer (defn- banner-card-tabs-layer
[{:keys [selected-tab tabs on-tab-change scroll-ref scroll-shared-value customization-color]}] [{:keys [selected-tab tabs on-tab-change scroll-ref scroll-shared-value customization-color theme]}]
[reanimated/view {:style (style/banner-card-tabs-layer scroll-shared-value)} [reanimated/view {:style (style/banner-card-tabs-layer scroll-shared-value theme)}
^{:key (str "tabs-" selected-tab)} ^{:key (str "tabs-" selected-tab)}
[quo/tabs [quo/tabs
{:style style/banner-card-tabs {:style style/banner-card-tabs
@ -71,16 +72,19 @@
(defn animated-banner (defn animated-banner
[{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}] [{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}]
[:<> (let [theme (quo.theme/use-theme-value)]
[:f> banner-card-blur-layer scroll-shared-value [:<>
[:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]] [:f> banner-card-blur-layer scroll-shared-value
[:f> banner-card-tabs-layer [:f> banner-card-hiding-layer
{:scroll-shared-value scroll-shared-value (assoc content :scroll-shared-value scroll-shared-value :theme theme)]]
:selected-tab selected-tab [:f> banner-card-tabs-layer
:tabs tabs {:scroll-shared-value scroll-shared-value
:on-tab-change on-tab-change :selected-tab selected-tab
:scroll-ref scroll-ref :tabs tabs
:customization-color customization-color}]]) :on-tab-change on-tab-change
:scroll-ref scroll-ref
:customization-color customization-color
:theme theme}]]))
(defn set-scroll-shared-value (defn set-scroll-shared-value
[{:keys [shared-value scroll-input]}] [{:keys [shared-value scroll-input]}]