fix(author): align icons

Signed-off-by: yqrashawn <namy.19@gmail.com>
status-im · May 16, 2024 · 92fba98 · 92fba98
1 parent a5be3e2
commit 92fba98
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 75 deletions.
diff --git a/src/quo/components/messages/author/style.cljs b/src/quo/components/messages/author/style.cljs
@@ -1,41 +1,18 @@
 (ns quo.components.messages.author.style
   (:require
-    [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)})
+    [quo.foundations.colors :as colors]))
 
 (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    :baseline
+     :height         (if (= size 15) 22 18.2)}
+    ;; according to Figma, when size = 13, height is 18 but line-height is 18.2
+    (= size 13)
+    (assoc :margin-vertical -0.1)))
 
 (defn middle-dot
   [theme]
@@ -47,26 +24,21 @@
   {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
 
 (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}))
+  [muted? theme]
+  {:color       (if muted?
+                  colors/neutral-50
+                  (colors/theme-colors colors/neutral-100 colors/white theme))
+   :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?]
-  {: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)})
+  [is-first? size]
+  {:margin-left    (if is-first? 4 2)
+   :padding-bottom (if (= size 15) 4 2)})
 
 (defn time-text
   [theme]

diff --git a/src/quo/components/messages/author/view.cljs b/src/quo/components/messages/author/view.cljs
@@ -13,17 +13,45 @@
   [{: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
       {: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 size)}
+       :style               (style/primary-name muted? theme)}
       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]))