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
{:type :card-view}]]
[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}]]))
(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}
: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 name
:label tag-name
:type :emoji
:labelled? true
:resource emoji}]])])
:resource emoji}]]))
tags))])
(defn community-title
[{:keys [title description size] :or {size :small}}]

View File

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

View File

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

View File

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