From 80bab6d3387ef73ed491b030c024356391aaf985 Mon Sep 17 00:00:00 2001
From: Rahul Pratap <rahulpsingh@users.noreply.github.com>
Date: Tue, 25 Apr 2023 20:47:16 +0530
Subject: [PATCH] Fixed styling issues for mention in the chat text (#15723)

Co-authored-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>
---
 .../chat/messages/content/text/style.cljs      | 17 +++++++++++++++++
 .../chat/messages/content/text/view.cljs       | 18 ++++++++++--------
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/status_im2/contexts/chat/messages/content/text/style.cljs b/src/status_im2/contexts/chat/messages/content/text/style.cljs
index bd94a33fb3..78a28eefd1 100644
--- a/src/status_im2/contexts/chat/messages/content/text/style.cljs
+++ b/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)
diff --git a/src/status_im2/contexts/chat/messages/content/text/view.cljs b/src/status_im2/contexts/chat/messages/content/text/view.cljs
index c67b2b47cb..aba7b6d632 100644
--- a/src/status_im2/contexts/chat/messages/content/text/view.cljs
+++ b/src/status_im2/contexts/chat/messages/content/text/view.cljs
@@ -40,14 +40,16 @@
     :mention
     (conj
      units
-     [rn/touchable-opacity
-      {:active-opacity 1
-       :on-press       #(rf/dispatch [:chat.ui/show-profile literal])
-       :style          (merge style/block {:background-color colors/primary-50-opa-10})}
-      [quo/text
-       {:weight :medium
-        :style  {:color (colors/theme-colors colors/primary-50 colors/primary-60)}}
-       (rf/sub [:messages/resolve-mention literal])]])
+     [rn/view
+      {:style style/mention-tag-wrapper}
+      [rn/touchable-opacity
+       {:active-opacity 1
+        :on-press       #(rf/dispatch [:chat.ui/show-profile literal])
+        :style          style/mention-tag}
+       [quo/text
+        {:weight :medium
+         :style  style/mention-tag-text}
+        (rf/sub [:messages/resolve-mention literal])]]])
 
     :edited
     (conj units