[#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]))
-
-(def spacing-between-blocks 0)
+  (:require [quo2.foundations.colors :as colors]
+            [quo.platform :as platform]))
 
 (def block
   {:border-radius      6
@@ -13,17 +12,14 @@
    :border-left-color colors/neutral-40})
 
 (defn mention-tag-wrapper
-  []
-  {:flex-direction :row
-   :align-items    :center
-   :height         22})
-
-(def mention-tag
-  {:background-color   colors/primary-50-opa-10
+  [first-child-mention]
+  {:flex-direction     :row
+   :align-items        :center
+   :height             (if platform/ios? 22 21)
+   :background-color   colors/primary-50-opa-10
    :padding-horizontal 3
    :border-radius      6
-   :margin-bottom      -3
-   :height             22})
+   :transform          [{:translateY (if platform/ios? (if first-child-mention 4.5 3) 4.5)}]})
 
 (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
-        {: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
-           :size   :paragraph-1}
-          (rf/sub [:messages/resolve-mention literal])]]])
+       [rn/pressable
+        {:on-press #(rf/dispatch [:chat.ui/show-profile literal])
+         :style    (style/mention-tag-wrapper first-child-mention)}
+        [quo/text
+         {:weight :medium
+          :style  style/mention-tag-text
+          :size   :paragraph-1}
+         (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,39 +86,47 @@
 
       (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]
-  (case (keyword type)
-    :paragraph
-    (conj blocks
-          [rn/view
-           (reduce
-            (fn [acc e]
-              (render-inline acc e chat-id style-override))
-            [quo/text
-             {:style {:size  :paragraph-1
-                      :color (when (seq style-override) colors/white)}}]
-            children)])
+  (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 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)])
 
-    :edited-block
-    (conj blocks
-          (reduce
-           (fn [acc e]
-             (render-inline acc e chat-id style-override))
-           [quo/text {:size :paragraph-1}]
-           children))
+      :edited-block
+      (conj blocks
+            (reduce
+             (fn [acc e]
+               (render-inline acc e chat-id style-override first-child-mention))
+             [quo/text {:size :paragraph-1}]
+             children))
 
-    :blockquote
-    (conj blocks
-          [rn/view {:style style/quote}
-           [quo/text literal]])
+      :blockquote
+      (conj blocks
+            [rn/view {:style style/quote}
+             [quo/text literal]])
 
-    :codeblock
-    (conj blocks
-          [rn/view {:style (merge style/block (style/code))}
-           [quo/text (subs literal 0 (dec (count literal)))]])
-    blocks))
+      :codeblock
+      (conj blocks
+            [rn/view {:style (merge style/block (style/code))}
+             [quo/text (subs literal 0 (dec (count literal)))]])
+      blocks)))
 
 (def edited-tag
   {:literal (str "(" (i18n/label :t/edited) ")")