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.
This commit is contained in:
Icaro Motta 2023-06-19 09:49:34 -03:00 committed by GitHub
parent 472a013cd0
commit 60a39a58a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 31 deletions

View File

@ -39,4 +39,4 @@
[community-view/community-stats-column [community-view/community-stats-column
{:type :card-view}]] {:type :card-view}]]
[rn/view {:style (style/community-tags-position)} [rn/view {:style (style/community-tags-position)}
[community-view/community-tags tags]]]]]]]) [community-view/community-tags {:tags tags}]]]]]]])

View File

@ -41,19 +41,27 @@
:icon-color icon-color}]])) :icon-color icon-color}]]))
(defn community-tags (defn community-tags
[tags] [{:keys [tags container-style last-item-style]}]
[gesture-handler/scroll-view [gesture-handler/scroll-view
{:shows-horizontal-scroll-indicator false {:shows-horizontal-scroll-indicator false
:horizontal true} :horizontal true
(for [{:keys [name emoji]} tags] :style container-style}
^{:key name} (let [last-index (max 0 (dec (count tags)))]
[rn/view {:margin-right 8} (map-indexed
[tag/tag (fn [index {tag-name :name emoji :emoji}]
{:size 24 (let [last? (= index last-index)]
:label name [rn/view
:type :emoji {:key tag-name
:labelled? true :style (if last?
:resource emoji}]])]) last-item-style
{:margin-right 8})}
[tag/tag
{:size 24
:label tag-name
:type :emoji
:labelled? true
:resource emoji}]]))
tags))])
(defn community-title (defn community-title
[{:keys [title description size] :or {size :small}}] [{:keys [title description size] :or {size :small}}]

View File

@ -1,6 +1,19 @@
(ns status-im2.contexts.communities.overview.style (ns status-im2.contexts.communities.overview.style
(:require [quo2.foundations.colors :as colors])) (: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 (def preview-user
{:flex-direction :row {:flex-direction :row
:align-items :center :align-items :center
@ -14,12 +27,6 @@
:left 0 :left 0
:flex 1}) :flex 1})
(def join-button
{:width "100%"
:margin-top 20
:margin-left :auto
:margin-right :auto})
(def review-notice (def review-notice
{:color colors/neutral-50 {:color colors/neutral-50
:margin-top 12 :margin-top 12

View File

@ -255,14 +255,14 @@
{:keys [on-category-layout on-first-channel-height-changed]}] {:keys [on-category-layout on-first-channel-height-changed]}]
(let [chats-by-category (rf/sub [:communities/categorized-channels id])] (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] [status-tag pending? joined]
[community-header name] [community-header name]
[community-description description] [community-description description]
;; [quo/community-stats-column :card-view] not implemented [quo/community-tags
[rn/view {:margin-top 12}] {:tags tags
[quo/community-tags tags] :last-item-style style/last-community-tag
;;[preview-user-list users] not implemented :container-style style/community-tag-container}]
[join-community community pending?]] [join-community community pending?]]
[channel-list-component [channel-list-component
{:on-category-layout on-category-layout {:on-category-layout on-category-layout
@ -320,13 +320,8 @@
:name name :name name
:on-scroll #(reset! scroll-height %) :on-scroll #(reset! scroll-height %)
:navigate-back? true :navigate-back? true
:background-color (colors/theme-colors :background-color (colors/theme-colors colors/white colors/neutral-90)
colors/white :height (if platform/ios? 100 148)}
colors/neutral-90)
:height (if platform/ios?
100
148)}
[sticky-category-header [sticky-category-header
{:enabled (> @scroll-height @first-channel-height) {:enabled (> @scroll-height @first-channel-height)
:label (pick-first-category-by-height :label (pick-first-category-by-height

View File

@ -1203,7 +1203,7 @@
"repeat-pin": "Repeat new 6-digit passcode", "repeat-pin": "Repeat new 6-digit passcode",
"repeat-puk": "Repeat new 12-digit PUK", "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", "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-disclaimer": "Joining the community will reveal your public addresses to the owner",
"request-to-join": "Request to join", "request-to-join": "Request to join",
"request-to-join-community": "Request to join Community", "request-to-join-community": "Request to join Community",