[#17207] fix: incorrect mentions alignment in messages (#17212)

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

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.chat.messages.content.text.style
-  (:require [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]
-
+            [quo.platform :as platform]))
-(def spacing-between-blocks 0)
 
 (def block
   {:border-radius      6
@@ -13,17 +12,14 @@
    :border-left-color colors/neutral-40})
 
 (defn mention-tag-wrapper
-  []
+  [first-child-mention]
   {:flex-direction     :row
    :align-items        :center
-   :height         22})
+   :height             (if platform/ios? 22 21)
-
+   :background-color   colors/primary-50-opa-10
-(def mention-tag
-  {:background-color   colors/primary-50-opa-10
    :padding-horizontal 3
    :border-radius      6
-   :margin-bottom      -3
+   :transform          [{:translateY (if platform/ios? (if first-child-mention 4.5 3) 4.5)}]})
-   :height             22})
 
 (def mention-tag-text
   {:color                 (colors/theme-colors colors/primary-50

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

@@ -9,7 +9,7 @@
     [utils.re-frame :as rf]))
 
 (defn render-inline
-  [units {:keys [type literal destination]} chat-id style-override]
+  [units {:keys [type literal destination]} chat-id style-override first-child-mention]
   (let [show-as-plain-text? (seq style-override)]
     (case (keyword type)
       :code
@@ -55,21 +55,17 @@
       :mention
       (conj
        units
-       [rn/view
+       [rn/pressable
-        {:style style/mention-tag-wrapper}
+        {:on-press #(rf/dispatch [:chat.ui/show-profile literal])
-        [rn/touchable-opacity
+         :style    (style/mention-tag-wrapper first-child-mention)}
-         {: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
           :size   :paragraph-1}
-          (rf/sub [:messages/resolve-mention literal])]]])
+         (rf/sub [:messages/resolve-mention literal])]])
 
       :edited
       (conj units
-
             [quo/text
              {:weight :medium
               :style  {:font-size 11 ; Font-size must be used instead of props or the
@@ -90,18 +86,26 @@
 
       (conj units literal))))
 
+(defn first-child-mention
+  [children]
+  (and (> (count children) 0)
+       (= (keyword (:type (second children))) :mention)
+       (empty? (get-in children [0 :literal]))))
 
 (defn render-block
   [blocks {:keys [type literal children]} chat-id style-override]
+  (let [mention-first (first-child-mention children)]
     (case (keyword type)
       :paragraph
       (conj blocks
             [rn/view
              (reduce
               (fn [acc e]
-              (render-inline acc e chat-id style-override))
+                (render-inline acc e chat-id style-override mention-first))
               [quo/text
                {:style {:size          :paragraph-1
+                        :margin-bottom (if mention-first (if quo.platform/ios? 4 0) 2)
+                        :margin-top    (if mention-first (if quo.platform/ios? -4 0) 2)
                         :color         (when (seq style-override) colors/white)}}]
               children)])
 
@@ -109,7 +113,7 @@
       (conj blocks
             (reduce
              (fn [acc e]
-             (render-inline acc e chat-id style-override))
+               (render-inline acc e chat-id style-override first-child-mention))
              [quo/text {:size :paragraph-1}]
              children))
 
@@ -122,7 +126,7 @@
       (conj blocks
             [rn/view {:style (merge style/block (style/code))}
              [quo/text (subs literal 0 (dec (count literal)))]])
-    blocks))
+      blocks)))
 
 (def edited-tag
   {:literal (str "(" (i18n/label :t/edited) ")")