[#16846] fix: resolve communities home design feedbacks (#17089)

* [#16846] fix: resolve communities home design feedbacks

* [#16846] fix: ios card shadow cutoff, re #17098

src/quo2/components/community/banner/style.cljs

@@ -1,13 +1,11 @@
 (ns quo2.components.community.banner.style
-  (:require [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]
+            [quo2.foundations.shadows :as shadows]))
 
 (defn community-card
   [theme]
-  {:shadow-offset     {:width 0 :height 2}
-   :shadow-radius     16
-   :shadow-opacity    1
-   :shadow-color      colors/shadow
-   :elevation         1
+  (assoc
+   (shadows/get 2 theme)
    :border-radius     16
    :justify-content   :space-between
    :background-color  (colors/theme-colors colors/white colors/neutral-90 theme)
@@ -16,7 +14,7 @@
    :margin-top        8
    :margin-bottom     8
    :height            56
-   :padding-right     12})
+   :padding-right     12))
 
 (def banner-content
   {:flex           1

src/quo2/components/community/community_list_view.cljs

@@ -16,6 +16,7 @@
            unread-messages?
            unread-mentions-count
            customization-color]}]
+  [rn/view {:style style/notification-container}
    (cond
      muted?
      [icons/icon :i/muted
@@ -34,7 +35,7 @@
       unread-mentions-count]
 
      unread-messages?
-    [unread-grey-dot :unviewed-messages-public]))
+     [unread-grey-dot :unviewed-messages-public])])
 
 (defn- communities-list-view-item-internal
   [{:keys [theme customization-color] :as props}

src/quo2/components/community/style.cljs

@@ -252,3 +252,8 @@
    :margin-top       margin-top})
 
 (def loading-card-content-container {:margin-top 36})
+
+(def notification-container
+  {:width       20
+   :display     :flex
+   :align-items :center})

src/quo2/foundations/shadows.cljs

@@ -36,12 +36,12 @@
                                   :shadow-radius  16}
                                2 {:shadow-color   (colors/alpha colors/neutral-100 0.08)
                                   :shadow-offset  {:width 0 :height 4}
-                                  :elevation      2
+                                  :elevation      6
                                   :shadow-opacity 1
                                   :shadow-radius  16}
                                3 {:shadow-color   (colors/alpha colors/neutral-100 0.12)
                                   :shadow-offset  {:width 0 :height 12}
-                                  :elevation      5
+                                  :elevation      8
                                   :shadow-opacity 1
                                   :shadow-radius  16}
                                4 {:shadow-color   (colors/alpha colors/neutral-100 0.16)

src/status_im2/common/home/banner/style.cljs

@@ -44,8 +44,6 @@
     :left        0
     :padding-top (safe-area/get-top)}))
 
-(def animated-banner-card-container {:overflow :hidden})
-
 (defn animated-banner-card
   [scroll-shared-value]
   (reanimated/apply-animations-to-style

src/status_im2/common/home/banner/view.cljs

@@ -3,6 +3,7 @@
             [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as theme]
+            [reagent.core :as reagent]
             [react-native.blur :as blur]
             [react-native.core :as rn]
             [react-native.platform :as platform]
@@ -11,6 +12,9 @@
             [status-im2.common.home.view :as common.home]
             [utils.re-frame :as rf]))
 
+(def card-banner-overflow-threshold 3)
+(def card-banner-overflow (reagent/atom :visible))
+
 (defn- reset-banner-animation
   [scroll-shared-value]
   (reanimated/animate-shared-value-with-timing scroll-shared-value 0 200 :easing3))
@@ -42,7 +46,7 @@
     [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}
+     [rn/view {:style {:overflow @card-banner-overflow}}
       [reanimated/view {:style (style/animated-banner-card scroll-shared-value)}
        [quo/discover-card card-props]]]]))
 
@@ -78,4 +82,7 @@
 
 (defn set-scroll-shared-value
   [{:keys [shared-value scroll-input]}]
-  (reanimated/set-shared-value shared-value scroll-input))
+  (reanimated/set-shared-value shared-value scroll-input)
+  (let [new-overflow (if (<= scroll-input card-banner-overflow-threshold) :visible :hidden)]
+    (when-not (= new-overflow @card-banner-overflow)
+      (reset! card-banner-overflow new-overflow))))

src/status_im2/contexts/communities/home/view.cljs

@@ -21,7 +21,7 @@
         item                (merge item unviewed-counts)]
     [quo/communities-membership-list-item
      {:customization-color customization-color
-      :style               {:padding-horizontal 18}
+      :style               {:padding-horizontal 20}
       :on-press            #(debounce/dispatch-and-chill [:navigate-to :community-overview id] 500)
       :on-long-press       #(rf/dispatch
                              [:show-bottom-sheet
@@ -99,6 +99,7 @@
              :content-inset-adjustment-behavior :never
              :header                            [common.home/header-spacing]
              :render-fn                         item-render
+             :style                             {:margin-top -1}
              :data                              selected-items
              :scroll-event-throttle             8
              :on-scroll                         #(common.home.banner/set-scroll-shared-value