fix(author): align icons

Signed-off-by: yqrashawn <namy.19@gmail.com>
status-im · May 17, 2024 · 654d756 · 654d756
1 parent 2918910
commit 654d756
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 70 deletions.
diff --git a/src/quo/components/messages/author/style.cljs b/src/quo/components/messages/author/style.cljs
@@ -3,39 +3,14 @@
     [quo.foundations.colors :as colors]
     [react-native.platform :as platform]))
 
-(defn- primary-name-top-offset
-  [size]
-  (when (= size 15)
-    (cond platform/ios?     1
-          platform/android? -0.5
-          :else             0)))
-
-(defn- primary-name-margin-bottom-offset
-  [size]
-  (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    :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})
+  (cond->
+    {:flex-shrink    1
+     :flex-wrap      :nowrap
+     :flex-direction :row
+     :align-items    :center
+     :height         (if (= size 15) 22 18)}))
 
 (defn middle-dot
   [theme]
@@ -48,25 +23,23 @@
 
 (defn primary-name
   [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}))
+  {:color           (if muted?
+                      colors/neutral-50
+                      (colors/theme-colors colors/neutral-100 colors/white theme))
+   ;; iOS: primary-name height is 22.3 / 18.7
+   ;; Android: primary-name height is 21.8 / 18.5
+   :margin-vertical (if (= size 15) (if platform/ios? -0.15 0) (if platform/ios? -0.35 -0.25))
+   :flex-shrink     1})
 
 (defn secondary-name
   [theme]
   {:flex-shrink 999999
    :color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
 
 (defn icon-container
-  [is-first?]
+  [is-first? size]
   {:margin-left (if is-first? 4 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)})
+   :padding-top (if (= size 15) 6 4)})
 
 (defn time-text
   [theme]

diff --git a/src/quo/components/messages/author/view.cljs b/src/quo/components/messages/author/view.cljs
@@ -13,7 +13,35 @@
   [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
            muted? size]
     :or   {size 13}}]
-  (let [theme (quo.theme/use-theme)]
+  (let [theme (quo.theme/use-theme)
+
+        short-chat-key-component
+        (when (and (not verified?) short-chat-key)
+          [text/text
+           {:weight          :monospace
+            :size            :label
+            :number-of-lines 1
+            :style           (style/chat-key-text theme)}
+           short-chat-key])
+
+        time-str-component
+        (when time-str
+          [text/text
+           {:monospace           true
+            :size                :label
+            :accessibility-label :message-timestamp
+            :number-of-lines     1
+            :style               (style/time-text theme)}
+           time-str])
+
+        middle-dot-seperator-component
+        (when (and short-chat-key-component time-str-component)
+          [text/text
+           {:monospace       true
+            :size            :label
+            :number-of-lines 1
+            :style           (style/middle-dot theme)}
+           middle-dot])]
     [rn/view
      {:style (merge (style/container size) style)}
      [text/text
@@ -23,7 +51,7 @@
        :accessibility-label :author-primary-name
        :style               (style/primary-name muted? theme size)}
       primary-name]
-     (when (not (string/blank? secondary-name))
+     (when-not (string/blank? secondary-name)
        [:<>
         [text/text
          {:size            :label
@@ -41,38 +69,22 @@
        [icons/icon :main-icons2/contact
         {:size            12
          :no-color        true
-         :container-style (style/icon-container true)}])
+         :container-style (style/icon-container true size)}])
      (cond
        verified?
        [icons/icon :main-icons2/verified
         {:size            12
          :no-color        true
-         :container-style (style/icon-container contact?)}]
+         :container-style (style/icon-container contact? size)}]
        untrustworthy?
        [icons/icon :main-icons2/untrustworthy
         {:size            12
          :no-color        true
-         :container-style (style/icon-container contact?)}])
-     [rn/view {:style style/details-container}
-      (when (and (not verified?) short-chat-key)
-        [text/text
-         {:weight          :monospace
-          :size            :label
-          :number-of-lines 1
-          :style           (style/chat-key-text theme)}
-         short-chat-key])
-      (when (and (not verified?) time-str short-chat-key)
-        [text/text
-         {:monospace       true
-          :size            :label
-          :number-of-lines 1
-          :style           (style/middle-dot theme)}
-         middle-dot])
-      (when time-str
-        [text/text
-         {:monospace           true
-          :size                :label
-          :accessibility-label :message-timestamp
-          :number-of-lines     1
-          :style               (style/time-text theme)}
-         time-str])]]))
+         :container-style (style/icon-container contact? size)}])
+
+     (when (or short-chat-key-component time-str-component)
+       [rn/view {:style {:width 8}}])
+
+     short-chat-key-component
+     middle-dot-seperator-component
+     time-str-component]))