From 742c4510007e0f48d8484b2ed06ba559fc72793d Mon Sep 17 00:00:00 2001 From: codemaster <39961806+codemaster115@users.noreply.github.com> Date: Wed, 8 Nov 2023 07:40:26 -0600 Subject: [PATCH] fix: message content text alignment and spacing (#17606) --- src/quo/components/messages/author/style.cljs | 32 ++++---- src/quo/components/messages/author/view.cljs | 80 ++++++++++--------- .../contexts/chat/messages/content/style.cljs | 2 +- .../chat/messages/content/text/style.cljs | 3 +- .../chat/messages/content/text/view.cljs | 7 +- .../chat/messages/navigation/view.cljs | 4 +- 6 files changed, 64 insertions(+), 64 deletions(-) diff --git a/src/quo/components/messages/author/style.cljs b/src/quo/components/messages/author/style.cljs index a771bee596..ca57521230 100644 --- a/src/quo/components/messages/author/style.cljs +++ b/src/quo/components/messages/author/style.cljs @@ -5,23 +5,22 @@ (def container {:flex-wrap :nowrap :flex-direction :row - :align-items :center}) + :align-items :flex-end}) -(defn middle-dot-nickname +(def name-container + {:margin-right 8 + :flex-direction :row + :align-items :flex-end + }) + +(defn middle-dot [theme] {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) - :margin-horizontal 4}) + :margin-horizontal 2}) (defn chat-key-text [theme] - {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) - :margin-left 8 - :padding-top 1}) - -(defn middle-dot-chat-key - [theme] - {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) - :margin-left 4}) + {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}) (defn primary-name [muted? theme] @@ -34,14 +33,13 @@ [theme] {:padding-top 1 :flex-shrink 999999 - :min-width 40 :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) -(def icon-container - {:margin-left 4}) +(defn icon-container + [is-first?] + {:margin-left (if is-first? 4 2) + :margin-bottom 2}) (defn time-text [theme] - {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) - :padding-top 1 - :margin-left 8}) + {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}) diff --git a/src/quo/components/messages/author/view.cljs b/src/quo/components/messages/author/view.cljs index 4cdb35e321..edabe0ea87 100644 --- a/src/quo/components/messages/author/view.cljs +++ b/src/quo/components/messages/author/view.cljs @@ -14,46 +14,48 @@ muted? size theme] :or {size 13}}] [rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})} - [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-nickname 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}]) - (cond - verified? - [icons/icon :main-icons2/verified - {:size 12 - :no-color true - :container-style style/icon-container}] - untrustworthy? - [icons/icon :main-icons2/untrustworthy - {:size 12 - :no-color true - :container-style style/icon-container}]) + [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 - {:monospace true + {:weight :monospace :size :label :number-of-lines 1 :style (style/chat-key-text theme)} @@ -63,7 +65,7 @@ {:monospace true :size :label :number-of-lines 1 - :style (style/middle-dot-chat-key theme)} + :style (style/middle-dot theme)} middle-dot]) (when time-str [text/text diff --git a/src/status_im2/contexts/chat/messages/content/style.cljs b/src/status_im2/contexts/chat/messages/content/style.cljs index 14dd21f859..f1f1fe95d1 100644 --- a/src/status_im2/contexts/chat/messages/content/style.cljs +++ b/src/status_im2/contexts/chat/messages/content/style.cljs @@ -13,7 +13,7 @@ (assoc :background-color colors/primary-50-opa-5 :margin-bottom 4) (and (not in-pinned-view?) (or mentioned pinned-by last-in-group?)) - (assoc :margin-top 8)))) + (assoc :margin-top 4)))) (defn user-message-content [{:keys [first-in-group? outgoing outgoing-status]}] diff --git a/src/status_im2/contexts/chat/messages/content/text/style.cljs b/src/status_im2/contexts/chat/messages/content/text/style.cljs index 82bd476192..065b56ed91 100644 --- a/src/status_im2/contexts/chat/messages/content/text/style.cljs +++ b/src/status_im2/contexts/chat/messages/content/text/style.cljs @@ -26,8 +26,7 @@ {:color (colors/theme-colors colors/primary-50 colors/primary-60) :selection-color :transparent - :suppress-highlighting true - :line-height 21}) + :suppress-highlighting true}) (defn code [] diff --git a/src/status_im2/contexts/chat/messages/content/text/view.cljs b/src/status_im2/contexts/chat/messages/content/text/view.cljs index b5d38387ea..ec29fdc202 100644 --- a/src/status_im2/contexts/chat/messages/content/text/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/text/view.cljs @@ -104,10 +104,11 @@ (fn [acc e] (render-inline acc e chat-id style-override mention-first)) [quo/text - {:style {:size :paragraph-1 - :margin-bottom (if mention-first (if platform/ios? 4 0) 2) + {:size :paragraph-1 + :style {:margin-bottom (if mention-first (if platform/ios? 4 0) 2) :margin-top (if mention-first (if platform/ios? -4 0) -1) - :color (when (seq style-override) colors/white)}}] + :color (when (seq style-override) colors/white) + :line-height 22.75}}] children)]) :edited-block diff --git a/src/status_im2/contexts/chat/messages/navigation/view.cljs b/src/status_im2/contexts/chat/messages/navigation/view.cljs index e1354d0026..af90bbb261 100644 --- a/src/status_im2/contexts/chat/messages/navigation/view.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/view.cljs @@ -81,8 +81,8 @@ (and (not composer-active?) more-than-eight-messages? (= :initial-render @big-name-visible?)) - ;; Keyboard height increasing is different between iOS and Android, That's why we have two - ;; values. + ;; Keyboard height increasing is different between iOS and Android, That's why we have + ;; two values. (and (if platform/ios? more-than-two-messages? more-than-four-messages?) (< title-opacity-interpolation-start (reanimated/get-shared-value scroll-y)) composer-active?)