fix: communities review (#18634)

* fix: community tag emoji size

* fix: hide channel category sticky header for none

* fix line wrap

* fix formatting

* refactor emoji component for tags

---------

Co-authored-by: Lungu Cristian <lungucristian95@gmail.com>

src/quo/components/tags/tag.cljs

@@ -27,6 +27,19 @@
                       :blurred-border-color colors/white-opa-10
                       :text-color           {:style {:color colors/white}}}}})
 
+(defn- emoji-comp
+  [size resource]
+  (let [dimension (case size
+                    32 20
+                    24 12
+                    nil)]
+    (if (string? resource)
+      [rn/text {:style {:margin-right 4 :font-size dimension}}
+       resource]
+      [rn/image
+       {:source resource
+        :style  {:margin-right 4 :width dimension :height dimension}}])))
+
 (defn tag-resources
   [size type resource icon-color label text-color labelled?]
   [rn/view
@@ -47,13 +60,7 @@
                           24 12)
        :color           icon-color}])
    (when (= type :emoji)
-     [text/text
+     [emoji-comp size resource])
-      {:style {:margin-right 4}
-       :size  (case size
-                32 :paragraph-1
-                24 :paragraph-2
-                nil)}
-      resource])
    (when labelled?
      [text/text
       (merge {:size            (case size
@@ -73,7 +80,7 @@
     :size         32/24
     :on-press     fn
     :blurred?     true/false
-    :resource     icon/image
+    :resource     icon/image/text(emojis)
     :labelled?    true/false
     :disabled?    true/false}
 
@@ -107,4 +114,3 @@
       [tag-resources size type resource icon-color label text-color labelled?]]]))
 
 (def tag (quo.theme/with-theme tag-internal))
-

src/quo/components/text_combinations/view.cljs

@@ -21,6 +21,7 @@
 (defn view-internal
   [{:keys [container-style
            title
+           title-number-of-lines
            avatar
            title-accessibility-label
            description
@@ -28,7 +29,8 @@
            button-icon
            button-on-press
            customization-color
-           emoji-hash]}]
+           emoji-hash]
+    :or   {title-number-of-lines 1}}]
   [rn/view {:style container-style}
    [rn/view
     {:style {:flex-direction  :row
@@ -41,7 +43,7 @@
       {:accessibility-label title-accessibility-label
        :weight              :semi-bold
        :ellipsize-mode      :tail
-       :number-of-lines     1
+       :number-of-lines     title-number-of-lines
        :size                :heading-1}
       title]]
     (when button-icon

src/status_im/contexts/communities/overview/view.cljs

@@ -71,7 +71,7 @@
       {:key       category-id
        ;; on-layout fires only when the component re-renders, so
        ;; in case the category hasn't changed, it will not be fired
-       :on-layout #(on-category-layout name (int (layout-y %)))}
+       :on-layout #(on-category-layout name category-id (int (layout-y %)))}
       (when-not (= constants/empty-category-id category-id)
         [quo/divider-label
          {:on-press        #(collapse-category community-id category-id collapsed?)
@@ -238,18 +238,18 @@
 (defn- community-header
   [title logo description]
   [quo/text-combinations
-   {:container-style
+   {:container-style                 {:margin-top
-    {:margin-top
+                                      (if logo
-     (if logo
+                                        12
-       12
+                                        (+ scroll-page.style/picture-radius
-       (+ scroll-page.style/picture-radius
+                                           scroll-page.style/picture-border-width
-          scroll-page.style/picture-border-width
+                                           12))
-          12))
+                                      :margin-bottom 12}
-     :margin-bottom 12}
+    :avatar                          logo
-    :avatar logo
+    :title                           title
-    :title title
+    :title-number-of-lines           2
-    :description description
+    :description                     description
-    :title-accessibility-label :community-title
+    :title-accessibility-label       :community-title
     :description-accessibility-label :community-description}])
 
 (defn- community-content
@@ -328,10 +328,14 @@
                                           (swap! categories-heights select-keys categories)
                                           (reset! first-channel-height height))]
     (fn [id joined name images]
-      (let [cover          {:uri (get-in images [:banner :uri])}
+      (let [cover                 {:uri (get-in images [:banner :uri])}
-            logo           {:uri (get-in images [:thumbnail :uri])}
+            logo                  {:uri (get-in images [:thumbnail :uri])}
-            collapsed?     (and initial-joined? joined)
+            collapsed?            (and initial-joined? joined)
-            overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))]
+            first-category-height (->> @categories-heights
+                                       vals
+                                       (apply min)
+                                       (+ @first-channel-height))
+            overlay-shown?        (boolean (:sheets (rf/sub [:bottom-sheet])))]
         [scroll-page/scroll-page
          {:cover-image      cover
           :collapsed?       collapsed?
@@ -347,7 +351,8 @@
                              :community-name name
                              :community-logo logo}
           :sticky-header    [sticky-category-header
-                             {:enabled (> @scroll-height @first-channel-height)
+                             {:enabled (> @scroll-height
+                                          first-category-height)
                               :label   (pick-first-category-by-height
                                         @scroll-height
                                         @first-channel-height

src/status_im/contexts/preview/quo/community/community_card_view.cljs

@@ -15,15 +15,15 @@
    :community-icon (resources/get-mock-image :status-logo)
    :customization-color :blue
    :tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}]
-   :tags [{:id        1
+   :tags [{:id    1
-           :tag-label (i18n/label :t/music)
+           :name  (i18n/label :t/music)
-           :emoji     (resources/get-image :music)}
+           :emoji (resources/get-image :music)}
-          {:id        2
+          {:id    2
-           :tag-label (i18n/label :t/lifestyle)
+           :name  (i18n/label :t/lifestyle)
-           :emoji     (resources/get-image :lifestyle)}
+           :emoji "🧩"}
-          {:id        3
+          {:id    3
-           :tag-label (i18n/label :t/podcasts)
+           :name  (i18n/label :t/podcasts)
-           :emoji     (resources/get-image :podcasts)}]})
+           :emoji "🎶"}]})
 
 (def descriptor
   [{:key     :status