From 0826ef57f21458a2193c5bd1471e4c7eac441368 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Fri, 21 Oct 2022 10:06:53 +0100 Subject: [PATCH] feat: add leave community feature to redesign (#14169) --- src/quo2/components/navigation/page_nav.cljs | 178 +++++++++++------- src/quo2/screens/navigation/page_nav.cljs | 45 ++--- .../communities_list_redesign.cljs | 83 ++++---- .../community_options_bottom_sheet.cljs | 89 +++++++++ .../community_overview_redesign.cljs | 102 ++++++---- src/status_im/ui/screens/screens.cljs | 2 +- translations/en.json | 17 +- 7 files changed, 348 insertions(+), 168 deletions(-) create mode 100644 src/status_im/ui/screens/communities/community_options_bottom_sheet.cljs diff --git a/src/quo2/components/navigation/page_nav.cljs b/src/quo2/components/navigation/page_nav.cljs index c504fd7bda..a589952136 100644 --- a/src/quo2/components/navigation/page_nav.cljs +++ b/src/quo2/components/navigation/page_nav.cljs @@ -26,21 +26,33 @@ 20 16)}} (if-not (string/blank? color) - {:color color} + {:color color} {:no-color true}))) +(defn render-left-section [{:keys [on-press icon + icon-color icon-background-color]} + put-middle-section-on-left?] + [rn/view {:style (merge + icon-styles + {:background-color icon-background-color + :width 32 + :height 32} + (when put-middle-section-on-left? {:margin-right 5}))} + [rn/touchable-opacity {:on-press on-press} + [icons/icon icon (icon-props icon-color :big)]]]) + (defn- mid-section-comp - [{:keys [mid-section-description-user-icon horizontal-description? text-secondary-color align-mid? text-color mid-section-icon mid-section-main-text mid-section-type mid-section-description]}] + [{:keys [description-user-icon horizontal-description? text-secondary-color align-mid? text-color icon main-text type description]}] [rn/view {:style (assoc centrify-style :flex-direction :row :margin-horizontal 2)} (when (or (and (not horizontal-description?) align-mid? - (not= :text-with-description mid-section-type)) - (and mid-section-description-user-icon - (not mid-section-icon))) - [rn/image {:source {:uri mid-section-description-user-icon} + (not= :text-with-description type)) + (and description-user-icon + (not icon))) + [rn/image {:source {:uri description-user-icon} :style {:width 32 :height 32 :border-radius 32 @@ -52,21 +64,22 @@ :weight :semi-bold :style {:color text-color :line-height 21}} - mid-section-main-text] - (when mid-section-description + main-text] + (when description [text/text {:size :paragraph-2 :weight :medium :style (cond-> {:padding-right 4 :color text-secondary-color :line-height 18} horizontal-description? (assoc :margin-left 4 :margin-top 2))} - mid-section-description])]]) + description])]]) -(defn- mid-section - [{:keys [horizontal-description? one-icon-align-left? mid-section-type left-align? mid-section-main-text mid-section-right-icon mid-section-main-text-icon-color mid-section-left-icon] :as mid-section-props}] +(defn- render-mid-section + [{:keys [horizontal-description? one-icon-align-left? type left-align? + main-text right-icon main-text-icon-color left-icon] :as props}] (let [text-color (if (colors/dark?) colors/neutral-5 colors/neutral-95) text-secondary-color (if (colors/dark?) colors/neutral-40 colors/neutral-50) - mid-section-comp-instance [mid-section-comp (assoc mid-section-props :text-secondary-color text-secondary-color)]] + component-instance [mid-section-comp (assoc props :text-secondary-color text-secondary-color)]] [rn/view {:style (merge (if left-align? align-left @@ -74,37 +87,37 @@ {:flex 1 :margin-left 4 :text-align-vertical :center})} - (case mid-section-type + (case type :text-only [text/text {:size :paragraph-1 :weight :semi-bold :style {:color text-color}} - mid-section-main-text] + main-text] :text-with-two-icons [rn/view {:style (assoc centrify-style :flex-direction :row)} - [icons/icon mid-section-left-icon - (icon-props mid-section-main-text-icon-color :big)] + [icons/icon left-icon + (icon-props main-text-icon-color :big)] [text/text {:size :paragraph-1 :weight :semi-bold :style {:padding-horizontal 4 :color text-color}} - mid-section-main-text] + main-text] - [icons/icon mid-section-right-icon - (icon-props mid-section-main-text-icon-color :big)]] + [icons/icon right-icon + (icon-props main-text-icon-color :big)]] :text-with-one-icon [rn/view {:style {:flex-direction :row}} (if one-icon-align-left? [rn/view {:style {:flex-direction :row :align-items :center}} (when horizontal-description? - [icons/icon mid-section-left-icon - (icon-props mid-section-main-text-icon-color :big)]) - mid-section-comp-instance] + [icons/icon left-icon + (icon-props main-text-icon-color :big)]) + component-instance] [rn/view {:style {:flex-direction :row :align-items :center}} - mid-section-comp-instance + component-instance (when horizontal-description? - [icons/icon mid-section-left-icon - (icon-props mid-section-main-text-icon-color :big)])])] - :text-with-description mid-section-comp-instance)])) + [icons/icon left-icon + (icon-props main-text-icon-color :big)])])] + :text-with-description component-instance)])) (defn- right-section-icon [{:keys [background-color icon icon-color push-to-the-left?] :or {push-to-the-left? false}}] @@ -116,19 +129,74 @@ :margin-right (if push-to-the-left? 8 0))} [icons/icon icon (icon-props icon-color :big)]]) +(defn- render-right-section [right-section-buttons] + [rn/view {:style (assoc + centrify-style + :flex-direction :row + :flex 1 + :justify-content :flex-end)} + (let [last-icon-index (-> right-section-buttons count dec)] + (map-indexed (fn [index {:keys [icon background-color icon-color on-press]}] + ^{:key index} + [rn/touchable-opacity {:on-press on-press} + [right-section-icon + {:icon icon + :background-color background-color + :icon-color icon-color + :push-to-the-left? (not= index last-icon-index)}]]) + right-section-buttons))]) + (defn page-nav - [{:keys [one-icon-align-left? horizontal-description? align-mid? page-nav-color page-nav-background-uri mid-section-type mid-section-icon mid-section-main-text mid-section-left-icon mid-section-right-icon mid-section-description mid-section-description-color mid-section-description-icon mid-section-description-user-icon mid-section-main-text-icon-color left-section-icon left-section-icon-color left-section-icon-background-color right-section-icons]}] + "[page-nav opts] + opts + { :one-icon-align-left? true/false + :horizontal-description? true/false + :align-mid? true/false + :page-nav-color color + :page-nav-background-uri image-uri + :mid-section + {:type one-of :text-only :text-with-two-icons :text-with-one-icon :text-with-description + :icon icon + :main-text string + :left-icon icon + :right-icon icon + :description string + :description-color color + :description-icon icon + :description-user-icon icon + :main-text-icon-color color + } + :left-section + {:on-press event + :icon icon + :icon-color color + :icon-background-color color + } + :right-section-buttons vector of + {:on-press event + :icon icon + :icon-color color + :icon-background-color color + } + } + " + [{:keys [one-icon-align-left? horizontal-description? align-mid? + page-nav-color page-nav-background-uri + mid-section + left-section + right-section-buttons]}] (let [{:keys [height width]} (dimensions/window) put-middle-section-on-left? (or align-mid? - (> (count right-section-icons) 1)) - mid-section-props {:mid-section-type mid-section-type - :horizontal-description? horizontal-description? - :mid-section-main-text mid-section-main-text - :one-icon-align-left? one-icon-align-left? - :mid-section-right-icon mid-section-right-icon - :mid-section-icon mid-section-icon - :mid-section-main-text-icon-color mid-section-main-text-icon-color - :mid-section-left-icon mid-section-left-icon}] + (> (count right-section-buttons) 1)) + mid-section-props + {:type (:type mid-section) + :horizontal-description? horizontal-description? + :main-text (:main-text mid-section) + :main-text-icon-color (:main-text-icon-color mid-section) + :one-icon-align-left? one-icon-align-left? + :right-icon (:right-icon mid-section) + :icon (:icon mid-section) + :left-icon (:left-icon mid-section)}] [rn/view {:style (cond-> {:display :flex :flex-direction :row @@ -143,33 +211,15 @@ [rn/view {:style {:flex 1 :flex-direction :row :align-items :center}} - [rn/view {:style (merge - icon-styles - {:background-color left-section-icon-background-color - :width 32 - :height 32} - (when put-middle-section-on-left? {:margin-right 5}))} - [icons/icon left-section-icon (icon-props left-section-icon-color :big)]] + (render-left-section left-section put-middle-section-on-left?) (when put-middle-section-on-left? - [mid-section (assoc mid-section-props - :left-align? true - :mid-section-description mid-section-description - :mid-section-description-color mid-section-description-color - :mid-section-description-icon mid-section-description-icon - :align-mid? align-mid? - :mid-section-description-user-icon mid-section-description-user-icon)])] + [render-mid-section (assoc mid-section-props + :left-align? true + :description (:description mid-section) + :description-color (:description-color mid-section) + :description-icon (:description-icon mid-section) + :align-mid? align-mid? + :description-user-icon (:description-user-icon mid-section))])] (when-not put-middle-section-on-left? - [mid-section mid-section-props]) - [rn/view {:style (assoc - centrify-style - :flex-direction :row - :flex 1 - :justify-content :flex-end)} - (let [last-icon-index (- (count right-section-icons) 1)] - (map-indexed (fn [index {:keys [icon background-color icon-color]}] - ^{:key index} - [right-section-icon {:icon icon - :background-color background-color - :icon-color icon-color - :push-to-the-left? (if (= index last-icon-index) false true)}]) - right-section-icons))]])) + [render-mid-section mid-section-props]) + (render-right-section right-section-buttons)])) diff --git a/src/quo2/screens/navigation/page_nav.cljs b/src/quo2/screens/navigation/page_nav.cljs index 284d218686..b343e6f0c0 100644 --- a/src/quo2/screens/navigation/page_nav.cljs +++ b/src/quo2/screens/navigation/page_nav.cljs @@ -44,46 +44,47 @@ (let [right-icon {:background-color (if (colors/dark?) colors/neutral-80 colors/neutral-20) - :icon :main-icons/placeholder + :icon :main-icons2/placeholder :icon-color nil} base-props {:horizontal-description? true :one-icon-align-left? true :align-mid? false :page-nav-color :transparent :page-nav-background-uri "" - :mid-section-type :text-with-description - :mid-section-icon :main-icons/placeholder - :mid-section-main-text "Status" - :mid-section-left-icon :main-icons/placeholder - :mid-section-right-icon :main-icons/placeholder - :mid-section-description "SNT" - :mid-section-description-color "black" - :mid-section-description-icon :main-icons/placeholder - :mid-section-description-user-icon "https://i.picsum.photos/id/810/200/300.jpg?hmac=HgwlXd-OaLOAqhGyCiZDUb_75EgUI4u0GtS7nfgxd8s" - :left-section-icon :main-icons/unlocked - :left-section-icon-background-color (if (colors/dark?) - colors/neutral-80 - colors/neutral-20)} - create-variation #(merge %1 %2) + :mid-section {:type :text-with-description + :icon :main-icons2/placeholder + :main-text "Status" + :left-icon :main-icons2/placeholder + :right-icon :main-icons2/placeholder + :description "SNT" + :description-color "black" + :description-icon :main-icons2/placeholder + :description-user-icon "https://i.picsum.photos/id/810/200/300.jpg?hmac=HgwlXd-OaLOAqhGyCiZDUb_75EgUI4u0GtS7nfgxd8s"} + :left-section + {:icon :main-icons2/unlocked + :icon-background-color (if (colors/dark?) + colors/neutral-80 + colors/neutral-20)}} + create-variation #(merge %1 %2 {:mid-section (merge (:mid-section %1) (:mid-section %2))}) variations {:text-only? base-props :align-left? (create-variation base-props {:align-mid? true}) :one-icon-align-left? (create-variation base-props {:one-icon-align-left? true - :mid-section-type :text-with-one-icon}) + :mid-section {:type :text-with-one-icon}}) :one-icon-align-right? (create-variation base-props {:one-icon-align-left? false - :mid-section-type :text-with-one-icon}) - :two-icons? (create-variation base-props {:mid-section-type :text-with-two-icons}) + :mid-section {:type :text-with-one-icon}}) + :two-icons? (create-variation base-props {:mid-section {:type :text-with-two-icons}}) :user-icon? (create-variation base-props {:align-mid? true :horizontal-description? false - :mid-section-type :text-with-one-icon}) + :mid-section {:type :text-with-one-icon}}) :empty? (create-variation base-props {:mid-section-main-text "" :mid-section-description ""}) :align-left-with-icon? (create-variation base-props {:align-mid? true - :mid-section-type :text-with-one-icon}) + :mid-section {:type :text-with-one-icon}}) :align-left-top-down-text? (create-variation base-props {:align-mid? true :horizontal-description? false - :mid-section-type :text-with-description})} + :mid-section {:type :text-with-description}})} state (reagent/atom (-> (get variations (:selected-variation @selected-variation)) - (assoc :right-section-icons (repeat (:number-of-right-icons @selected-variation) right-icon))))] + (assoc :right-section-buttons (repeat (:number-of-right-icons @selected-variation) right-icon))))] (fn [] [rn/view {:margin-bottom 50 :padding 16} diff --git a/src/status_im/ui/screens/communities/communities_list_redesign.cljs b/src/status_im/ui/screens/communities/communities_list_redesign.cljs index 6b876cdd1b..093848bc18 100644 --- a/src/status_im/ui/screens/communities/communities_list_redesign.cljs +++ b/src/status_im/ui/screens/communities/communities_list_redesign.cljs @@ -3,7 +3,7 @@ [reagent.core :as reagent] [status-im.i18n.i18n :as i18n] [status-im.ui.components.list.views :as list] - [status-im.ui.components.react :as react] + [quo.react-native :as rn] [quo2.components.separator :as separator] [quo2.components.markdown.text :as quo2.text] [quo2.components.buttons.button :as quo2.button] @@ -28,7 +28,8 @@ (def sort-list-by (reagent/atom :name)) (def mock-community-item-data ;; TODO: remove once communities are loaded with this data. - {:data {:status :gated + {:data {:community-color "#0052FF" + :status :gated :locked true :cover (resources/get-image :community-cover) :tokens [{:id 1 @@ -70,14 +71,14 @@ #js {:length 64 :offset (* 64 index) :index index}) (defn community-segments [] - [react/view {:flex 1 - :margin-bottom 8 - :padding-horizontal 20} - [react/view {:flex-direction :row - :padding-top 20 - :padding-bottom 8 - :height 60} - [react/view {:flex 1} + [rn/view {:flex 1 + :margin-bottom 8 + :padding-horizontal 20} + [rn/view {:flex-direction :row + :padding-top 20 + :padding-bottom 8 + :height 60} + [rn/view {:flex 1} [quo2.tabs/tabs {:size 32 :on-change #(reset! selected-tab %) :default-active selected-tab @@ -87,7 +88,7 @@ :label (i18n/label :t/open)} {:id :gated :label (i18n/label :t/gated)}]}]] - [react/view {:flex-direction :row} + [rn/view {:flex-direction :row} [quo2.button/button {:icon true :type :outline @@ -141,14 +142,14 @@ (defn featured-communities-section [communities] (let [count (reagent/atom {:value (count communities) :type :grey})] - [react/view {:flex 1} - [react/view {:flex-direction :row - :height 30 - :padding-top 8 - :justify-content :space-between - :padding-horizontal 20} - [react/view {:flex-direction :row - :align-items :center} + [rn/view {:flex 1} + [rn/view {:flex-direction :row + :height 30 + :padding-top 8 + :justify-content :space-between + :padding-horizontal 20} + [rn/view {:flex-direction :row + :align-items :center} [quo2.text/text {:accessibility-label :featured-communities-title :weight :semi-bold :size :paragraph-1 @@ -162,18 +163,18 @@ :color (quo2.colors/theme-colors quo2.colors/neutral-50 quo2.colors/neutral-40)}]] - [react/view {:margin-top 8 - :padding-left 20} + [rn/view {:margin-top 8 + :padding-left 20} [featured-communities communities]]])) (defn title-column [] - [react/view + [rn/view {:flex-direction :row :align-items :center :height 56 :padding-vertical 12 :padding-horizontal 20} - [react/view + [rn/view {:flex 1} [quo2.text/text {:accessibility-label :communities-screen-title :margin-right 6 @@ -187,13 +188,13 @@ {:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)} {:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)} {:id 4 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]] - [react/scroll-view {:horizontal true - :height 48 - :shows-horizontal-scroll-indicator false - :scroll-event-throttle 64 - :padding-top 4 - :padding-bottom 12 - :padding-horizontal 20} + [rn/scroll-view {:horizontal true + :height 48 + :shows-horizontal-scroll-indicator false + :scroll-event-throttle 64 + :padding-top 4 + :padding-bottom 12 + :padding-horizontal 20} [tags/tags {:data filters :labelled true :type :emoji @@ -208,31 +209,31 @@ [safe-area/consumer (fn [insets] - [react/view {:style {:flex 1 - :padding-top (:top insets) - :background-color (quo2.colors/theme-colors - quo2.colors/neutral-5 - quo2.colors/neutral-95)}} + [rn/view {:style {:flex 1 + :padding-top (:top insets) + :background-color (quo2.colors/theme-colors + quo2.colors/neutral-5 + quo2.colors/neutral-95)}} [topbar/topbar {:navigation :none - :left-component [react/view {:margin-left 16} + :left-component [rn/view {:margin-left 16} [photos/photo (multiaccounts/displayed-photo multiaccount) {:size 32}]] - :right-component [react/view {:flex-direction :row - :margin-right 16} + :right-component [rn/view {:flex-direction :row + :margin-right 16} [topnav/qr-scanner] [topnav/qr-code] [topnav/notifications-button]] :new-ui? true :border-bottom false}] [title-column] - [react/scroll-view + [rn/scroll-view [community-filter-tags] [featured-communities-section featured-communities] (when communities [:<> - [react/view {:margin-vertical 4 - :padding-horizontal 20} + [rn/view {:margin-vertical 4 + :padding-horizontal 20} [separator/separator]] [community-segments]]) [community-segments-view communities]]])])) diff --git a/src/status_im/ui/screens/communities/community_options_bottom_sheet.cljs b/src/status_im/ui/screens/communities/community_options_bottom_sheet.cljs new file mode 100644 index 0000000000..6dc871066c --- /dev/null +++ b/src/status_im/ui/screens/communities/community_options_bottom_sheet.cljs @@ -0,0 +1,89 @@ +(ns status-im.ui.screens.communities.community-options-bottom-sheet + (:require [status-im.i18n.i18n :as i18n] + [quo.react-native :as rn] [quo2.components.markdown.text :as text] + [quo2.components.buttons.button :as button] + [quo2.components.drawers.action-drawers :as action-drawers] + [quo2.components.tags.context-tags :as context-tags] + [status-im.react-native.resources :as resources] + [status-im.utils.handlers :refer [evt]] + [status-im.communities.core :as communities])) + +(def not-joined-options [{:icon :main-icons2/members + :label (i18n/label :t/view-members)} + {:icon :main-icons2/bullet-list + :right-icon :main-icons2/chevron-right + :label (i18n/label :t/view-community-rules)} + {:icon :main-icons2/add-user + :label (i18n/label :t/invite-contacts)} + {:icon :main-icons2/qr-code + :label (i18n/label :t/show-qr)} + {:icon :main-icons2/share + :label (i18n/label :t/share-community)}]) + +(def joined-options [{:icon :main-icons2/members + :label (i18n/label :t/view-members)} + {:icon :main-icons2/bullet-list + :right-icon :main-icons2/chevron-right + :label (i18n/label :t/view-community-rules)} + {:icon :main-icons2/up-to-date + :label (i18n/label :t/mark-as-read)} + {:icon :main-icons2/muted + :label (i18n/label :t/mute-community) + :right-icon :main-icons2/chevron-right} + {:icon :main-icons2/notifications + :label (i18n/label :t/community-notification-settings) + :right-icon :main-icons2/chevron-right} + {:icon :main-icons2/add-user + :label (i18n/label :t/invite-contacts)} + {:icon :main-icons2/qr-code + :label (i18n/label :t/show-qr)} + {:icon :main-icons2/share + :label (i18n/label :t/share-community)}]) + +(defn leave-sheet [community] + [rn/view {:style {:flex 1 :margin-left 20 :margin-right 20 :margin-bottom 20}} + [rn/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :space-between}} + + [text/text {:accessibility-label :communities-join-community + :weight :semi-bold + :size :heading-1} + (i18n/label :t/leave-community?)]] + ;; TODO get tag image from community data + [context-tags/context-tag + {:style + {:margin-right :auto + :margin-top 8}} + (resources/get-image :status-logo) (:name community)] + [text/text {:accessibility-label :communities-join-community + :size :paragraph-1 + :style {:margin-top 16}} + (i18n/label :t/leave-community-message)] + [rn/view {:style {:width "100%" + :margin-top 16 :margin-bottom 16 + :flex 1 + :flex-direction :row + :align-items :center + :justify-content :space-evenly}} + [button/button {:on-press #(>evt [:bottom-sheet/hide]) + :type :grey :style {:flex 1 :margin-right 12}} (i18n/label :t/cancel)] + [button/button + {:on-press (fn [] + (>evt [::communities/leave (:id community)]) + (>evt [:bottom-sheet/hide])) + :style {:flex 1}} (i18n/label :t/leave-community)]]]) + +(defn options-menu [] + (let [community-mock (evt [:bottom-sheet/show-sheet + {:content (constantly [leave-sheet community]) + :content-height 300}])}])}])) + + diff --git a/src/status_im/ui/screens/communities/community_overview_redesign.cljs b/src/status_im/ui/screens/communities/community_overview_redesign.cljs index f52906bfac..9649394653 100644 --- a/src/status_im/ui/screens/communities/community_overview_redesign.cljs +++ b/src/status_im/ui/screens/communities/community_overview_redesign.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.communities.community-overview-redesign (:require [status-im.i18n.i18n :as i18n] - [status-im.ui.components.react :as react] + [quo.react-native :as rn] [quo2.components.markdown.text :as text] [quo2.components.buttons.button :as button] [quo2.components.list-items.preview-list :as preview-list] @@ -9,10 +9,12 @@ [quo2.components.community.community-view :as community-view] [quo2.components.tags.status-tags :as status-tags] [status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign :as request-to-join] + [status-im.ui.screens.communities.community-options-bottom-sheet :as options-menu] [status-im.ui.components.list.views :as list] [status-im.utils.handlers :refer [evt]] [status-im.ui.screens.communities.styles :as styles] [quo2.foundations.colors :as colors] + [quo2.components.navigation.page-nav :as page-nav] [status-im.ui.screens.communities.icon :as communities.icon])) ;; Mocked list items @@ -23,9 +25,9 @@ {:full-name "STU VWX"}]) (defn preview-user-list [] - [react/view {:style {:flex-direction :row - :align-items :center - :margin-top 20}} + [rn/view {:style {:flex-direction :row + :align-items :center + :margin-top 20}} [preview-list/preview-list {:type :user :user user-list :list-size 4 :size 24}] [text/text {:accessibility-label :communities-screen-title @@ -49,65 +51,89 @@ :emoji "👽"}]}) (defn channel-list-component [] - [react/scroll-view {:style {:margin-top 20}} + [rn/scroll-view {:style {:margin-top 20}} [:<> {:style {:flex 1}} (map (fn [category] ^{:key (get category 0)} - [react/view {:flex 1} + [rn/view {:flex 1} [divider-label/divider-label {:label (first category) :chevron-position :left}] - [react/view + [rn/view {:margin-left 8 :margin-top 10 :margin-bottom 8} [list/flat-list {:shows-horizontal-scroll-indicator false - :separator [react/view {:margin-top 4}] + :separator [rn/view {:margin-top 4}] :data ((first category) list-of-channels) :render-fn channel/list-item}]]]) list-of-channels)]]) +(defn icon-color [] + (colors/theme-colors + colors/white-opa-40 + colors/neutral-80-opa-40)) + (defn community-card-page-view [{:keys [name description locked joined - status tokens cover tags] :as community}] - [react/view + status tokens cover tags community-color] :as community}] + [rn/view {:style {:flex 1 :border-radius 20}} - [react/view (styles/community-cover-container 148) - [react/image + [rn/view (styles/community-cover-container 148) + + [rn/image {:source cover - :style {:position :relative - :flex 1}}]] - [react/view {:flex 1 - :height 20 - :border-radius 16 - :background-color (colors/theme-colors - colors/white - colors/neutral-90)} - [react/view {:padding-horizontal 20} - [react/view {:border-radius 40 - :border-width 1 - :border-color colors/white - :position :absolute - :top (- (/ 80 2)) - :left (/ 70 4) - :padding 2 - :background-color (colors/theme-colors - colors/white - colors/neutral-90)} + :style {:position :absolute + :flex 1}}] + [rn/view {:style {:margin-top 26}} + [page-nav/page-nav + {:horizontal-description? true + :one-icon-align-left? true + :align-mid? false + :page-nav-color :transparent + :page-nav-background-uri "" + :mid-section {:type :text-with-description} + :right-section-buttons [{:icon :main-icons2/search + :background-color (icon-color)} + {:icon :main-icons2/options + :background-color (icon-color) + :on-press #(>evt [:bottom-sheet/show-sheet + {:content (constantly [options-menu/options-menu community]) + :content-height 400}])}] + :left-section {:icon :main-icons2/close + :icon-background-color (icon-color) + :on-press #(>evt [:navigate-back])}}]]] + [rn/view {:flex 1 + :height 20 + :border-radius 16 + :background-color (colors/theme-colors + colors/white + colors/neutral-90)} + [rn/view {:padding-horizontal 20} + [rn/view {:border-radius 40 + :border-width 1 + :border-color colors/white + :position :absolute + :top (- (/ 80 2)) + :left (/ 70 4) + :padding 2 + :background-color (colors/theme-colors + colors/white + colors/neutral-90)} [communities.icon/community-icon-redesign community 80]] (when (and (not joined) (= status :gated)) - [react/view (styles/permission-tag-styles) + [rn/view (styles/permission-tag-styles) [community-view/permission-tag-container {:locked locked :status status :tokens tokens}]]) (when joined - [react/view {:position :absolute - :top 12 - :right 12} + [rn/view {:position :absolute + :top 12 + :right 12} [status-tags/status-tag {:status {:type :positive} :label (i18n/label :joined)}]]) [community-view/community-title {:title name @@ -121,6 +147,7 @@ {:on-press #(>evt [:bottom-sheet/show-sheet {:content (constantly [request-to-join/request-to-join community]) :content-height 300}]) + :override-background-color community-color :style {:width "100%" :margin-top 20 @@ -133,8 +160,9 @@ (defn overview [] (let [community-mock (