Fix pinned messages context tag style (#19245)

* fix: pinned messages context tag style

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* formatting

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

---------

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

src/quo/components/tags/context_tag/schema.cljs

@@ -8,6 +8,7 @@
      [:enum :default :multiuser :group :channel :community :token :network :multinetwork :account
       :collectible :address :icon :audio]]]
    [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+   [:container-style {:optional true} [:maybe :map]]
    [:theme :schema.common/theme]
    [:blur? {:optional true} [:maybe :boolean]]
    [:state {:optional true} [:maybe [:enum :selected :default]]]])
@@ -38,6 +39,7 @@
 (def ^:private ?channel
   [:map
    [:community-name {:optional true} [:maybe :string]]
+   [:community-logo {:optional true} [:maybe :schema.common/image-source]]
    [:channel-name {:optional true} [:maybe :string]]])
 
 (def ^:private ?community

src/quo/components/tags/context_tag/style.cljs

@@ -36,6 +36,7 @@
                           (colors/custom-color customization-color 60)
                           theme)]
     (cond-> {:padding          2
+             :padding-right    8
              :flex-direction   :row
              :align-items      :center
              :height           size

src/quo/components/tags/context_tag/view.cljs

@@ -12,6 +12,7 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
+    [react-native.fast-image :as fast-image]
     [schema.core :as schema]))
 
 (defn- tag-skeleton
@@ -30,7 +31,7 @@
   (let [text-size (if (= size 24) :paragraph-2 :paragraph-1)
         icon-size (if (= size 24) 16 20)]
     [rn/view {:style (style/tag-container size)}
-     [rn/image {:style (style/circle-logo size) :source community-logo}]
+     [fast-image/fast-image {:style (style/circle-logo size) :source community-logo}]
      [rn/view {:style (style/tag-spacing size)}
       [text/text
        {:style  (style/text theme)
@@ -82,14 +83,14 @@
            type                :default
            state               :default}
     :as   props}]
+  [rn/view {:style (merge {:align-items :flex-start} container-style)}
    [rn/view
-   {:style               (merge (style/container {:theme               theme
+    {:style               (style/container {:theme               theme
                                             :type                type
                                             :size                size
                                             :state               state
                                             :blur?               blur?
                                             :customization-color customization-color})
-                                container-style)
      :accessibility-label :context-tag}
     (case type
       :default
@@ -156,7 +157,7 @@
       :icon
       [icon-tag props]
 
-     nil)])
+      nil)]])
 
 (def view
   (quo.theme/with-theme

src/status_im/contexts/chat/messenger/menus/pinned_messages/style.cljs

@@ -1,6 +1,5 @@
 (ns status-im.contexts.chat.messenger.menus.pinned-messages.style
   (:require
-    [quo.foundations.colors :as colors]
     [react-native.platform :as platform]))
 
 (defn heading
@@ -8,29 +7,8 @@
   {:padding-horizontal 20
    :margin-bottom      (when-not community? 12)})
 
-(defn heading-container
-  []
-  {:flex-direction    :row
-   :background-color  (colors/theme-colors colors/neutral-10 colors/neutral-80)
-   :border-radius     20
-   :align-items       :center
-   :align-self        :flex-start
-   :margin-horizontal 20
-   :padding           4
-   :margin-top        8
-   :margin-bottom     16})
-
-(defn heading-text
-  []
-  {:margin-left  6
-   :margin-right 4
-   :color        (colors/theme-colors colors/neutral-60 colors/neutral-20)})
-
-(defn chat-name-text
-  []
-  {:margin-left  4
-   :margin-right 8
-   :color        (colors/theme-colors colors/neutral-60 colors/neutral-20)})
+(def community-tag-container
+  {:margin-horizontal 20 :margin-top 4 :margin-bottom 12})
 
 (def no-pinned-messages-container
   {:justify-content :center
@@ -38,22 +16,5 @@
    :margin          12
    :margin-bottom   (when platform/android? 12)})
 
-(def no-pinned-messages-icon
-  {:width           80
-   :height          80
-   :justify-content :center
-   :align-items     :center
-   :border-width    1})
-
-(def no-pinned-messages-content
-  {:margin-top 12})
-
-(def no-pinned-messages-title
-  {:text-align :center})
-
-(def no-pinned-messages-text
-  {:text-align :center
-   :margin-top 2})
-
 (def list-footer
   {:height (when platform/android? 12)})

src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs

@@ -1,10 +1,8 @@
 (ns status-im.contexts.chat.messenger.menus.pinned-messages.view
   (:require
     [quo.core :as quo]
-    [quo.foundations.colors :as colors]
     [quo.theme]
     [react-native.core :as rn]
-    [react-native.fast-image :as fast-image]
     [react-native.gesture :as gesture]
     [status-im.common.resources :as resources]
     [status-im.contexts.chat.messenger.menus.pinned-messages.style :as style]
@@ -52,20 +50,13 @@
         :style  (style/heading community)}
        (i18n/label :t/pinned-messages)]
       (when community
-        [rn/view {:style (style/heading-container)}
-         [fast-image/fast-image
-          {:source (community-avatar community-images)
-           :style  {:width         20
-                    :height        20
-                    :border-radius 20}}]
-         [rn/text {:style (style/heading-text)} (:name community)]
-         [quo/icon
-          :i/chevron-right
-          {:color (colors/theme-colors colors/neutral-60 colors/neutral-30)
-           :size  12}]
-         [rn/text
-          {:style (style/chat-name-text)}
-          (str "# " (:chat-name current-chat))]])]
+        [quo/context-tag
+         {:type            :channel
+          :size            24
+          :container-style style/community-tag-container
+          :community-logo  (community-avatar community-images)
+          :community-name  (:name community)
+          :channel-name    (:chat-name current-chat)}])]
      (if (pos? (count pinned))
        [rn/flat-list
         {:data        pinned