From 60a39a58a66d84dc9b961e4c4db5b64481207dff Mon Sep 17 00:00:00 2001 From: Icaro Motta Date: Mon, 19 Jun 2023 09:49:34 -0300 Subject: [PATCH] Fix community tags and button spacing (#16292) Linked to https://github.com/status-im/status-mobile/issues/16119, fixes these issues: - Clipped community tags. They should extend to the edge of the screen. - Outdated information box message. Updated according suggestion in Figma https://www.figma.com/file/h9wo4GipgZURbqqr1vShFN/Communities-for-Mobile?type=design&node-id=7035-462899&t=wED97E4Mtv9v6OXf-0 - Add correct padding between community tags and the Request to join Community button. --- .../community/community_card_view.cljs | 2 +- .../components/community/community_view.cljs | 30 ++++++++++++------- .../contexts/communities/overview/style.cljs | 19 ++++++++---- .../contexts/communities/overview/view.cljs | 19 +++++------- translations/en.json | 2 +- 5 files changed, 41 insertions(+), 31 deletions(-) diff --git a/src/quo2/components/community/community_card_view.cljs b/src/quo2/components/community/community_card_view.cljs index e7928663d3..ce0bd83376 100644 --- a/src/quo2/components/community/community_card_view.cljs +++ b/src/quo2/components/community/community_card_view.cljs @@ -39,4 +39,4 @@ [community-view/community-stats-column {:type :card-view}]] [rn/view {:style (style/community-tags-position)} - [community-view/community-tags tags]]]]]]]) + [community-view/community-tags {:tags tags}]]]]]]]) diff --git a/src/quo2/components/community/community_view.cljs b/src/quo2/components/community/community_view.cljs index 199bf731be..cb015c013c 100644 --- a/src/quo2/components/community/community_view.cljs +++ b/src/quo2/components/community/community_view.cljs @@ -41,19 +41,27 @@ :icon-color icon-color}]])) (defn community-tags - [tags] + [{:keys [tags container-style last-item-style]}] [gesture-handler/scroll-view {:shows-horizontal-scroll-indicator false - :horizontal true} - (for [{:keys [name emoji]} tags] - ^{:key name} - [rn/view {:margin-right 8} - [tag/tag - {:size 24 - :label name - :type :emoji - :labelled? true - :resource emoji}]])]) + :horizontal true + :style container-style} + (let [last-index (max 0 (dec (count tags)))] + (map-indexed + (fn [index {tag-name :name emoji :emoji}] + (let [last? (= index last-index)] + [rn/view + {:key tag-name + :style (if last? + last-item-style + {:margin-right 8})} + [tag/tag + {:size 24 + :label tag-name + :type :emoji + :labelled? true + :resource emoji}]])) + tags))]) (defn community-title [{:keys [title description size] :or {size :small}}] diff --git a/src/status_im2/contexts/communities/overview/style.cljs b/src/status_im2/contexts/communities/overview/style.cljs index 2bbb1f73e7..4216be989a 100644 --- a/src/status_im2/contexts/communities/overview/style.cljs +++ b/src/status_im2/contexts/communities/overview/style.cljs @@ -1,6 +1,19 @@ (ns status-im2.contexts.communities.overview.style (:require [quo2.foundations.colors :as colors])) +(def screen-horizontal-padding 20) + +(def last-community-tag + {:margin-right (* 2 screen-horizontal-padding)}) + +(def community-tag-container + {:padding-horizontal screen-horizontal-padding + :margin-horizontal (- screen-horizontal-padding) + :margin-bottom 20}) + +(def community-content-container + {:padding-horizontal screen-horizontal-padding}) + (def preview-user {:flex-direction :row :align-items :center @@ -14,12 +27,6 @@ :left 0 :flex 1}) -(def join-button - {:width "100%" - :margin-top 20 - :margin-left :auto - :margin-right :auto}) - (def review-notice {:color colors/neutral-50 :margin-top 12 diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 7efaaf7f5e..2e4b748f6e 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -255,14 +255,14 @@ {:keys [on-category-layout on-first-channel-height-changed]}] (let [chats-by-category (rf/sub [:communities/categorized-channels id])] [:<> - [rn/view {:padding-horizontal 20} + [rn/view {:style style/community-content-container} [status-tag pending? joined] [community-header name] [community-description description] - ;; [quo/community-stats-column :card-view] not implemented - [rn/view {:margin-top 12}] - [quo/community-tags tags] - ;;[preview-user-list users] not implemented + [quo/community-tags + {:tags tags + :last-item-style style/last-community-tag + :container-style style/community-tag-container}] [join-community community pending?]] [channel-list-component {:on-category-layout on-category-layout @@ -320,13 +320,8 @@ :name name :on-scroll #(reset! scroll-height %) :navigate-back? true - :background-color (colors/theme-colors - colors/white - colors/neutral-90) - :height (if platform/ios? - 100 - 148)} - + :background-color (colors/theme-colors colors/white colors/neutral-90) + :height (if platform/ios? 100 148)} [sticky-category-header {:enabled (> @scroll-height @first-channel-height) :label (pick-first-category-by-height diff --git a/translations/en.json b/translations/en.json index dbdc24091c..6193892ef4 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1203,7 +1203,7 @@ "repeat-pin": "Repeat new 6-digit passcode", "repeat-puk": "Repeat new 12-digit PUK", "report-bug-email-template": "1. Issue Description\n{{description}}\n\n\n2. Steps to reproduce\n{{steps}}\n\n\n3. Attach screenshots that can demo the problem, please\n", - "request-processed-after-node-online": "Your request will be processed once the community owner node is back online.", + "request-processed-after-node-online": "Community control node is offline. Request will be processed once it's back online.", "request-to-join-disclaimer": "Joining the community will reveal your public addresses to the owner", "request-to-join": "Request to join", "request-to-join-community": "Request to join Community",