Skip to content

Commit

Permalink
fix(author): align icons
Browse files Browse the repository at this point in the history
Signed-off-by: yqrashawn <namy.19@gmail.com>
  • Loading branch information
yqrashawn committed May 16, 2024
1 parent a5be3e2 commit 554f824
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 72 deletions.
59 changes: 16 additions & 43 deletions src/quo/components/messages/author/style.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,17 @@
[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 :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]
Expand All @@ -47,26 +25,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?]
[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)})
:top (if (= size 15) 4 2)})

(defn time-text
[theme]
Expand Down
70 changes: 41 additions & 29 deletions src/quo/components/messages/author/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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]))

0 comments on commit 554f824

Please sign in to comment.