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

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

@ -3,7 +3,7 @@
[oops.core :as oops]
[quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.theme :as theme]
[quo.theme]
[react-native.blur :as blur]
[react-native.core :as rn]
[react-native.platform :as platform]
@ -31,21 +31,22 @@
(defn- banner-card-blur-layer
[scroll-shared-value child]
(let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)]
[reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value)}
(let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)
theme (quo.theme/use-theme-value)]
[reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value theme)}
[blur/view
{:style style/fill-space
: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?
(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]]))
(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])]
[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]
[title-column/view (assoc title-props :customization-color customization-color)]
[rn/view {:style {:overflow @card-banner-overflow}}
@ -53,8 +54,8 @@
[quo/discover-card card-props]]]]))
(defn- banner-card-tabs-layer
[{:keys [selected-tab tabs on-tab-change scroll-ref scroll-shared-value customization-color]}]
[reanimated/view {:style (style/banner-card-tabs-layer scroll-shared-value)}
[{: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 theme)}
^{:key (str "tabs-" selected-tab)}
[quo/tabs
{:style style/banner-card-tabs
@ -71,16 +72,19 @@
(defn animated-banner
[{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}]
[:<>
[:f> banner-card-blur-layer scroll-shared-value
[:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]]
[:f> banner-card-tabs-layer
{:scroll-shared-value scroll-shared-value
:selected-tab selected-tab
:tabs tabs
:on-tab-change on-tab-change
:scroll-ref scroll-ref
:customization-color 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 :theme theme)]]
[:f> banner-card-tabs-layer
{:scroll-shared-value scroll-shared-value
:selected-tab selected-tab
:tabs tabs
:on-tab-change on-tab-change
:scroll-ref scroll-ref
:customization-color customization-color
:theme theme}]]))
(defn set-scroll-shared-value
[{:keys [shared-value scroll-input]}]