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.

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

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}
+    :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
   [{:keys [title description size] :or {size :small}}]

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

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
+      [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?]]
      [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
+          :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
           {:enabled (> @scroll-height @first-channel-height)
            :label   (pick-first-category-by-height

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