Channel name update in Context Tag (#14578)

* [Update][#14555] Channel name update in Context Tag

* [Update][#14555] Changes requested on Context Tag Component

* [Update][#14555] Changes requested on Context Tag Component

src/quo2/components/tags/context_tags.cljs

@@ -1,5 +1,6 @@
 (ns quo2.components.tags.context-tags
   (:require [quo2.components.avatars.group-avatar :as group-avatar]
+            [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as quo2.theme]
@@ -57,20 +58,31 @@
       (trim-public-key public-key)]]))
 
 (defn context-tag
-  [params photo name]
+  [_ _]
-  (let [text-style (params :text-style)]
+  (fn [params photo name channel-name]
-    [base-tag (assoc-in params [:style :padding-left] 3)
+    (let [text-style  (:text-style params)
-     [rn/image
+          text-params {:weight :medium
-      {:style  {:width            20
+                       :size   :paragraph-2
-                :border-radius    10
+                       :style  (assoc text-style :justify-content :center)}
-                :background-color :white
+          icon-color  (colors/theme-colors colors/neutral-50 colors/neutral-40)]
-                :height           20}
+      [base-tag (assoc-in params [:style :padding-left] 3)
-       :source photo}]
+       [rn/image
-     [text/text
+        {:style {:width 20
-      (merge {:weight :medium
+                 :border-radius 10
-              :size   :paragraph-2}
+                 :background-color :white
-             {:style text-style})
+                 :height 20}
-      (str " " name)]]))
+         :source photo}]
+       [rn/view
+        {:style {:align-items :center
+                 :flex-direction :row}}
+        [text/text text-params (str " " name)]
+        (when channel-name
+          [:<>
+           [icons/icon
+            :i/chevron-right
+            {:color icon-color
+             :size  16}]
+           [text/text text-params (str "# " channel-name)]])]])))
 
 (defn user-avatar-tag
   []

src/status_im2/contexts/quo_preview/tags/context_tags.cljs

@@ -28,11 +28,22 @@
               {:key   :avatar
                :value "Avatar"}
               {:key   :group-avatar
-               :value "Group avatar"}]}])
+               :value "Group avatar"}
+              {:key   :context-tag
+               :value "Context tag"}]}])
+
+(def context-tag-descriptor
+  [{:label "Label"
+    :key   :label
+    :type  :text}
+   {:label "Channel Name"
+    :key   :channel-name
+    :type  :text}])
 
 (defn cool-preview
   []
   (let [state (reagent/atom {:label "Name"
+                             :channel-name "Channel"
                              :type  :group-avatar})]
     (fn []
       (let [contacts             {example-pk  {:public-key example-pk
@@ -56,6 +67,7 @@
                                    "Please select a user")
             descriptor
             (cond
+              (= (:type @state) :context-tag)  (into main-descriptor context-tag-descriptor)
               (= (:type @state) :group-avatar) (conj main-descriptor
                                                      {:label "Label"
                                                       :key   :label
@@ -80,6 +92,8 @@
             :flex-direction   :row
             :justify-content  :center}
            (case (:type @state)
+             :context-tag
+             [quo2/context-tag group-avatar-default-params {:uri example-photo2}  (:label @state) (:channel-name @state)]
              :group-avatar
              [quo2/group-avatar-tag (:label @state) group-avatar-default-params]
              :public-key