From d300e880627c1333c1258c6ab27c1d259143f727 Mon Sep 17 00:00:00 2001 From: Icaro Motta Date: Thu, 22 Jun 2023 11:51:06 +0000 Subject: [PATCH] Fix incorrect background color in Community Overview screen (#16348) Fixes the main issue #16313, but also other correlated bugs. - Fix: quo2 component navigation.page-nav does not stretch out to the maximum available height when there are only 1 to ~6 community channels. - Fix: options menu button didn't use the correct background color (it should have 40% transparency). - Fix: Remove bottom-left & bottom-right rounded borders from the bottom of the page-nav container. - Fix: Remove top-left & top-right rounded borders from the screen's header. - Fix: Use correct background color in the page-nav, now neutral-95 instead of neutral-90. --- src/quo2/components/navigation/page_nav.cljs | 26 ++++++----- src/status_im2/common/scroll_page/style.cljs | 45 +++++++++---------- src/status_im2/common/scroll_page/view.cljs | 8 ++-- .../contexts/communities/overview/view.cljs | 25 ++++++----- 4 files changed, 51 insertions(+), 53 deletions(-) diff --git a/src/quo2/components/navigation/page_nav.cljs b/src/quo2/components/navigation/page_nav.cljs index 7ceded5a23..8b145e1f4a 100644 --- a/src/quo2/components/navigation/page_nav.cljs +++ b/src/quo2/components/navigation/page_nav.cljs @@ -152,7 +152,8 @@ :justify-content :flex-end)} (let [last-icon-index (-> right-section-buttons count dec)] (map-indexed (fn [index - {:keys [icon on-press type style icon-override-theme accessibility-label label] + {:keys [icon on-press type style icon-override-theme icon-background-color + accessibility-label label] :or {type :grey}}] ^{:key index} [rn/view @@ -162,12 +163,13 @@ accessibility-label (assoc :accessibility-label accessibility-label :accessible true)) [button/button - {:on-press on-press - :icon (not label) - :type type - :before (when label icon) - :size 32 - :override-theme icon-override-theme} + {:on-press on-press + :icon (not label) + :type type + :before (when label icon) + :size 32 + :override-theme icon-override-theme + :override-background-color icon-background-color} (if label label icon)]]) right-section-buttons))]) @@ -179,12 +181,12 @@ :align-mid? true/false :page-nav-color color :page-nav-background-uri image-uri - :mid-section + :mid-section {:type one-of :text-only :text-with-two-icons :text-with-one-icon :text-with-description :user-avatar :icon icon :main-text string - :left-icon icon - :right-icon icon + :left-icon icon + :right-icon icon :description string :description-color color :description-icon icon @@ -192,13 +194,13 @@ :description-img a render prop which will be used in place of :description-user-icon :main-text-icon-color color } - :left-section + :left-section {:type button-type :on-press event :icon icon :icon-override-theme :light/:dark } - :right-section-buttons vector of + :right-section-buttons vector of {:type button-type :on-press event :icon icon diff --git a/src/status_im2/common/scroll_page/style.cljs b/src/status_im2/common/scroll_page/style.cljs index 1b96e8c3f7..597b0f354f 100644 --- a/src/status_im2/common/scroll_page/style.cljs +++ b/src/status_im2/common/scroll_page/style.cljs @@ -27,16 +27,6 @@ colors/neutral-95-opa-70) :transparent)})) -(defn scroll-view-container - [border-radius] - {:flex 1 - :position :absolute - :top (if platform/ios? -48 0) - :left 0 - :right 0 - :overflow :scroll - :border-radius border-radius}) - (defn sticky-header-title [animation] (reanimated/apply-animations-to-style @@ -55,24 +45,29 @@ :height 24 :margin-right 8}) +(defn children-container + [{:keys [border-radius background-color]}] + {:flex 1 + :border-top-left-radius border-radius + :border-top-right-radius border-radius + :background-color background-color}) + +(def picture-radius 40) +(def picture-diameter (* 2 picture-radius)) +(def picture-border-width 4) + (defn display-picture-container [animation] (reanimated/apply-animations-to-style {:transform [{:scale animation}]} - {:border-radius 50 - :border-width 1 - :border-color colors/white - :position :absolute - :top -40 - :left 17 - :padding 2 - :background-color (colors/theme-colors - colors/white - colors/neutral-90)})) + {:border-radius picture-diameter + :border-width picture-border-width + :border-color (colors/theme-colors colors/white colors/neutral-95) + :position :absolute + :top (- (+ picture-radius picture-border-width)) + :left (- (/ picture-radius 2) picture-border-width)})) (def display-picture - {:border-radius 50 - :border-width 0 - :border-color :transparent - :width 80 - :height 80}) + {:border-radius picture-diameter + :width picture-diameter + :height picture-diameter}) diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs index c8da330e36..92bbfad6f6 100644 --- a/src/status_im2/common/scroll_page/view.cljs +++ b/src/status_im2/common/scroll_page/view.cljs @@ -118,8 +118,7 @@ [:f> f-scroll-page-header @scroll-height height name page-nav-right-section-buttons logo sticky-header top-nav title-colum navigate-back?] [rn/scroll-view - {:content-container-style (style/scroll-view-container - (diff-with-max-min @scroll-height 16 0)) + {:content-container-style {:flex-grow 1} :shows-vertical-scroll-indicator false :scroll-event-throttle 16 :on-scroll (fn [^js event] @@ -140,9 +139,8 @@ :flex 1}}]]) (when children [rn/view - {:flex 1 - :border-radius (diff-with-max-min @scroll-height 16 0) - :background-color background-color} + {:style (style/children-container {:border-radius (diff-with-max-min @scroll-height 16 0) + :background-color background-color})} (when cover-image [:f> f-display-picture @scroll-height logo]) children])]]))) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index f57c5a3378..d867ddc314 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -10,6 +10,7 @@ [status-im2.common.home.actions.view :as actions] [status-im2.common.password-authentication.view :as password-authentication] [status-im2.common.scroll-page.view :as scroll-page] + [status-im2.common.scroll-page.style :as scroll-page.style] [status-im2.constants :as constants] [status-im2.contexts.communities.actions.community-options.view :as options] [status-im2.contexts.communities.overview.style :as style] @@ -250,7 +251,9 @@ :ellipsize-mode :tail :weight :semi-bold :size :heading-1 - :style {:margin-top 56}} + :style {:margin-top (+ scroll-page.style/picture-radius + scroll-page.style/picture-border-width + 12)}} name]) (defn community-description @@ -301,13 +304,13 @@ (defn page-nav-right-section-buttons [id] - [{:icon :i/options - :background-color (scroll-page/icon-color) - :accessibility-label :community-options-for-community - :on-press #(rf/dispatch - [:show-bottom-sheet - {:content (fn [] - [options/community-options-bottom-sheet id])}])}]) + [{:icon :i/options + :icon-background-color (scroll-page/icon-color) + :accessibility-label :community-options-for-community + :on-press #(rf/dispatch + [:show-bottom-sheet + {:content (fn [] + [options/community-options-bottom-sheet id])}])}]) (defn pick-first-category-by-height [scroll-height first-channel-height categories-heights] @@ -336,7 +339,7 @@ :name name :on-scroll #(reset! scroll-height %) :navigate-back? true - :background-color (colors/theme-colors colors/white colors/neutral-90) + :background-color (colors/theme-colors colors/white colors/neutral-95) :height (if platform/ios? 100 148)} [sticky-category-header {:enabled (> @scroll-height @first-channel-height) @@ -350,8 +353,8 @@ pending? {:on-category-layout (partial add-category-height categories-heights) :on-first-channel-height-changed - ;; Here we set the height of the component - ;; and we filter out the categories, as some might have been removed + ;; Here we set the height of the component and we filter out the + ;; categories, as some might have been removed (fn [height categories] (swap! categories-heights select-keys categories) (reset! first-channel-height height))}]]))))