Fixed styling issues for mention in the chat text

status-im · Apr 24, 2023 · 904c1e7 · 904c1e7
1 parent 8f3fbc2
commit 904c1e7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 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
@@ -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
@@ -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