From 26eeb435698a674c7cf4571f414139ddc8962ca8 Mon Sep 17 00:00:00 2001
From: Mohsen Ghafouri <71308738+mohsen-ghafouri@users.noreply.github.com>
Date: Thu, 24 Aug 2023 15:05:31 +0300
Subject: [PATCH] [#16846] fix: resolve glow issue in communities home (#17097)

---
 src/status_im2/common/home/banner/style.cljs | 20 +++++++++++++-------
 src/status_im2/common/home/banner/view.cljs  | 11 ++++++-----
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/status_im2/common/home/banner/style.cljs b/src/status_im2/common/home/banner/style.cljs
index 5a61303611..ac43c417ec 100644
--- a/src/status_im2/common/home/banner/style.cljs
+++ b/src/status_im2/common/home/banner/style.cljs
@@ -17,6 +17,10 @@
   [scroll-shared-value]
   (reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (- max-scroll)] :clamp))
 
+(defn- animated-card-translation-y-reverse
+  [scroll-shared-value]
+  (reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (+ max-scroll)] :clamp))
+
 (defn banner-card-blur-layer
   [scroll-shared-value]
   (reanimated/apply-animations-to-style
@@ -30,13 +34,15 @@
     :height   (+ (safe-area/get-top) 244)}))
 
 (defn banner-card-hiding-layer
-  []
-  {:z-index     2
-   :position    :absolute
-   :top         0
-   :right       0
-   :left        0
-   :padding-top (safe-area/get-top)})
+  [scroll-shared-value]
+  (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)}))
 
 (def animated-banner-card-container {:overflow :hidden})
 
diff --git a/src/status_im2/common/home/banner/view.cljs b/src/status_im2/common/home/banner/view.cljs
index ed1cbb0b43..a9e08949c1 100644
--- a/src/status_im2/common/home/banner/view.cljs
+++ b/src/status_im2/common/home/banner/view.cljs
@@ -24,7 +24,7 @@
     (oops/ocall! scroll-ref "scrollToOffset" #js {:offset 0})))
 
 (defn- banner-card-blur-layer
-  [scroll-shared-value]
+  [scroll-shared-value child]
   (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)]
     [reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value)}
      [blur/view
@@ -33,12 +33,13 @@
        :blur-type     (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))}]]))
+                        (theme/theme-value nil colors/neutral-95-opa-70))}
+      child]]))
 
 (defn- banner-card-hiding-layer
   [{:keys [title-props card-props scroll-shared-value]}]
   (let [customization-color (rf/sub [:profile/customization-color])]
-    [rn/view {:style (style/banner-card-hiding-layer)}
+    [reanimated/view {:style (style/banner-card-hiding-layer scroll-shared-value)}
      [common.home/top-nav {:type :grey}]
      [common.home/title-column (assoc title-props :customization-color customization-color)]
      [rn/view {:style style/animated-banner-card-container}
@@ -65,8 +66,8 @@
 (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-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