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

@@ -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

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})

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])]])))

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))}]]))))