Tweak layout of quo/author component to use flex-baseline (#19489)

* tweak: re-structure layout of quo/author component to use flex-baseline for alignment

* tweak: use top on container to balance layout while using top to offset primary-name

* tidy: remove margin-bottom: 0

* tweak: add comments and fix layout glitch

src/quo/components/messages/author/style.cljs

@@ -1,18 +1,41 @@
 (ns quo.components.messages.author.style
   (:require
-    [quo.foundations.colors :as colors]))
+    [quo.foundations.colors :as colors]
+    [react-native.platform :as platform]))
 
-(def container
+(defn- primary-name-top-offset
-  {:flex-wrap      :nowrap
+  [size]
-   :flex-direction :row
+  (when (= size 15)
-   :align-items    :flex-end})
+    (cond platform/ios?     1
+          platform/android? -0.5
+          :else             0)))
 
-(def name-container
+(defn- primary-name-margin-bottom-offset
-  {:margin-right   8
+  [size]
-   :flex-shrink    1
+  (when (and (= size 15)
+             (or platform/ios? platform/android?))
+    -0.25))
+
+(defn- primary-name-layout-offsets
+  [size]
+  ;; NOTE(seanstrom): We need to sometimes offset the primary-name to align the baseline of the text
+  ;; while avoiding shifting elements downward.
+  {:top           (primary-name-top-offset size)
+   :margin-bottom (primary-name-margin-bottom-offset size)})
+
+(defn container
+  [size]
+  {:flex-shrink    1
+   :flex-wrap      :nowrap
    :flex-direction :row
-   :align-items    :flex-end
+   :align-items    :baseline
-  })
+   ;; NOTE(seanstrom): Because we're offseting the primary-name we need to inverse the offset on the
+   ;; container to avoid shifting elements downward
+   :top            (* -1 (primary-name-top-offset size))})
+
+(def details-container
+  {:flex-direction :row
+   :margin-left    8})
 
 (defn middle-dot
   [theme]
@@ -24,11 +47,12 @@
   {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
 
 (defn primary-name
-  [muted? theme]
+  [muted? theme size]
+  (merge (primary-name-layout-offsets size)
          {:color       (if muted?
                          colors/neutral-50
                          (colors/theme-colors colors/neutral-100 colors/white theme))
-   :flex-shrink 1})
+          :flex-shrink 1}))
 
 (defn secondary-name
   [theme]
@@ -38,7 +62,11 @@
 (defn icon-container
   [is-first?]
   {:margin-left (if is-first? 4 2)
-   :margin-bottom 2})
+   ;; NOTE(seanstrom): Because we're using flex baseline to align elements
+   ;; we need to offset the icon container to match the designs.
+   :top         (cond platform/ios?     1
+                      platform/android? 2
+                      :else             0)})
 
 (defn time-text
   [theme]

src/quo/components/messages/author/view.cljs

@@ -14,17 +14,13 @@
            muted? size theme]
     :or   {size 13}}]
   [rn/view
-   {:style (merge style/container
+   {:style (merge (style/container size) style)}
-                  style
-                  {:height         (if (= size 15) 21.75 18.2)
-                   :padding-bottom (if (= size 15) 2 0.5)})}
-   [rn/view {:style style/name-container}
    [text/text
     {:weight              :semi-bold
      :size                (if (= size 15) :paragraph-1 :paragraph-2)
      :number-of-lines     1
      :accessibility-label :author-primary-name
-      :style               (style/primary-name muted? theme)}
+     :style               (style/primary-name muted? theme size)}
     primary-name]
    (when (not (string/blank? secondary-name))
      [:<>
@@ -55,7 +51,8 @@
      [icons/icon :main-icons2/untrustworthy
       {:size            12
        :no-color        true
-        :container-style (style/icon-container contact?)}])]
+       :container-style (style/icon-container contact?)}])
+   [rn/view {:style style/details-container}
     (when (and (not verified?) short-chat-key)
       [text/text
        {:weight          :monospace
@@ -77,6 +74,6 @@
         :accessibility-label :message-timestamp
         :number-of-lines     1
         :style               (style/time-text theme)}
-      time-str])])
+       time-str])]])
 
 (def view (quo.theme/with-theme internal-view))