Fixed styling issues for mention in the chat text (#15723)

Co-authored-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>

src/status_im2/contexts/chat/messages/content/text/style.cljs

@@ -20,6 +20,23 @@
    :padding-left      10
    :border-left-color colors/neutral-40})
 
+(defn mention-tag-wrapper
+  []
+  {:flex-direction :row
+   :align-items    :center})
+
+(def mention-tag
+  {:background-color   colors/primary-50-opa-10
+   :padding-horizontal 3
+   :border-radius      6
+   :margin-bottom      -3})
+
+(def mention-tag-text
+  {:color                 (colors/theme-colors colors/primary-50
+                                               colors/primary-60)
+   :selection-color       :transparent
+   :suppress-highlighting true})
+
 (defn code
   []
   {:background-color (colors/theme-colors colors/neutral-5 colors/white-opa-5)

src/status_im2/contexts/chat/messages/content/text/view.cljs

@@ -40,14 +40,16 @@
     :mention
     (conj
      units
-     [rn/touchable-opacity
+     [rn/view
-      {:active-opacity 1
+      {:style style/mention-tag-wrapper}
-       :on-press       #(rf/dispatch [:chat.ui/show-profile literal])
+      [rn/touchable-opacity
-       :style          (merge style/block {:background-color colors/primary-50-opa-10})}
+       {:active-opacity 1
-      [quo/text
+        :on-press       #(rf/dispatch [:chat.ui/show-profile literal])
-       {:weight :medium
+        :style          style/mention-tag}
-        :style  {:color (colors/theme-colors colors/primary-50 colors/primary-60)}}
+       [quo/text
-       (rf/sub [:messages/resolve-mention literal])]])
+        {:weight :medium
+         :style  style/mention-tag-text}
+        (rf/sub [:messages/resolve-mention literal])]]])
 
     :edited
     (conj units