diff --git a/src/quo/components/messages/author/style.cljs b/src/quo/components/messages/author/style.cljs index 41a54dc751..203bded4d8 100644 --- a/src/quo/components/messages/author/style.cljs +++ b/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 - {:flex-wrap :nowrap - :flex-direction :row - :align-items :flex-end}) +(defn- primary-name-top-offset + [size] + (when (= size 15) + (cond platform/ios? 1 + platform/android? -0.5 + :else 0))) -(def name-container - {:margin-right 8 - :flex-shrink 1 +(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 :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] - {:color (if muted? - colors/neutral-50 - (colors/theme-colors colors/neutral-100 colors/white theme)) - :flex-shrink 1}) + [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})) (defn secondary-name [theme] @@ -37,8 +61,12 @@ (defn icon-container [is-first?] - {:margin-left (if is-first? 4 2) - :margin-bottom 2}) + {: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)}) (defn time-text [theme] diff --git a/src/quo/components/messages/author/view.cljs b/src/quo/components/messages/author/view.cljs index 7d42696f2c..02a5e3be50 100644 --- a/src/quo/components/messages/author/view.cljs +++ b/src/quo/components/messages/author/view.cljs @@ -14,69 +14,66 @@ muted? size theme] :or {size 13}}] [rn/view - {:style (merge style/container - 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)} - primary-name] - (when (not (string/blank? secondary-name)) - [:<> - [text/text - {:size :label - :number-of-lines 1 - :style (style/middle-dot theme)} - middle-dot] - [text/text - {:weight :medium - :size :label - :number-of-lines 1 - :accessibility-label :author-secondary-name - :style (style/secondary-name theme)} - secondary-name]]) - (when contact? - [icons/icon :main-icons2/contact - {:size 12 - :no-color true - :container-style (style/icon-container true)}]) - (cond - verified? - [icons/icon :main-icons2/verified - {:size 12 - :no-color true - :container-style (style/icon-container contact?)}] - untrustworthy? - [icons/icon :main-icons2/untrustworthy - {:size 12 - :no-color true - :container-style (style/icon-container contact?)}])] - (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])]) + {: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)} + primary-name] + (when (not (string/blank? secondary-name)) + [:<> + [text/text + {:size :label + :number-of-lines 1 + :style (style/middle-dot theme)} + middle-dot] + [text/text + {:weight :medium + :size :label + :number-of-lines 1 + :accessibility-label :author-secondary-name + :style (style/secondary-name theme)} + secondary-name]]) + (when contact? + [icons/icon :main-icons2/contact + {:size 12 + :no-color true + :container-style (style/icon-container true)}]) + (cond + verified? + [icons/icon :main-icons2/verified + {:size 12 + :no-color true + :container-style (style/icon-container contact?)}] + 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])]]) (def view (quo.theme/with-theme internal-view))