diff --git a/src/quo2/components/community/banner/style.cljs b/src/quo2/components/community/banner/style.cljs index 8c05dac580..3f8d37e4bb 100644 --- a/src/quo2/components/community/banner/style.cljs +++ b/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 diff --git a/src/quo2/components/community/community_list_view.cljs b/src/quo2/components/community/community_list_view.cljs index 5218264a92..a7a6fee4a2 100644 --- a/src/quo2/components/community/community_list_view.cljs +++ b/src/quo2/components/community/community_list_view.cljs @@ -16,25 +16,26 @@ unread-messages? unread-mentions-count customization-color]}] - (cond - muted? - [icons/icon :i/muted - {:container-style {:align-items :center - :justify-content :center} - :resize-mode :center - :size 20 - :color (colors/theme-colors - colors/neutral-50 - colors/neutral-40 - theme)}] - (pos? unread-mentions-count) - [counter/view - {:customization-color customization-color - :type :default} - unread-mentions-count] + [rn/view {:style style/notification-container} + (cond + muted? + [icons/icon :i/muted + {:container-style {:align-items :center + :justify-content :center} + :resize-mode :center + :size 20 + :color (colors/theme-colors + colors/neutral-50 + colors/neutral-40 + theme)}] + (pos? unread-mentions-count) + [counter/view + {:customization-color customization-color + :type :default} + unread-mentions-count] - unread-messages? - [unread-grey-dot :unviewed-messages-public])) + unread-messages? + [unread-grey-dot :unviewed-messages-public])]) (defn- communities-list-view-item-internal [{:keys [theme customization-color] :as props} diff --git a/src/quo2/components/community/style.cljs b/src/quo2/components/community/style.cljs index ee0472991f..379b9ac594 100644 --- a/src/quo2/components/community/style.cljs +++ b/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}) diff --git a/src/quo2/foundations/shadows.cljs b/src/quo2/foundations/shadows.cljs index 28c12e8d65..c171d554e4 100644 --- a/src/quo2/foundations/shadows.cljs +++ b/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) diff --git a/src/status_im2/common/home/banner/style.cljs b/src/status_im2/common/home/banner/style.cljs index ac43c417ec..e6dd817eaa 100644 --- a/src/status_im2/common/home/banner/style.cljs +++ b/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 diff --git a/src/status_im2/common/home/banner/view.cljs b/src/status_im2/common/home/banner/view.cljs index a9e08949c1..1f5a582bc6 100644 --- a/src/status_im2/common/home/banner/view.cljs +++ b/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)))) diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index 26180780ef..bd66f6b312 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/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