diff --git a/src/status_im/chat/styles/message/datemark.cljs b/src/status_im/chat/styles/message/datemark.cljs index a4aea47a5f..3fcc3dd22d 100644 --- a/src/status_im/chat/styles/message/datemark.cljs +++ b/src/status_im/chat/styles/message/datemark.cljs @@ -6,10 +6,10 @@ :align-items :center}) (def datemark - {:opacity 0.5 - :margin-top 16 - :height 20}) + {:margin-top 16 + :height 22}) (def datemark-text - {:color common/color-gray4 - :font-size 15}) + {:color common/color-gray4 + :letter-spacing -0.2 + :font-size 15}) diff --git a/src/status_im/chat/styles/message/message.cljs b/src/status_im/chat/styles/message/message.cljs index 48243d9f14..ccb14d3917 100644 --- a/src/status_im/chat/styles/message/message.cljs +++ b/src/status_im/chat/styles/message/message.cljs @@ -6,10 +6,11 @@ [status-im.constants :as constants])) (defstyle style-message-text - {:font-size 15 - :color styles/text1-color - :android {:line-height 22} - :ios {:line-height 23}}) + {:font-size 15 + :color styles/text1-color + :letter-spacing -0.2 + :android {:line-height 22} + :ios {:line-height 23}}) (def style-sub-text {:top -2 @@ -49,14 +50,15 @@ :align-items align}))) (def message-timestamp - {:font-size 10 - :align-self :flex-end}) + {:font-size 10 + :letter-spacing 0.1 + :align-self :flex-end}) (defn message-timestamp-text [justify-timestamp? outgoing] (merge message-timestamp {:color (if outgoing colors/wild-blue-yonder colors/gray)} (when justify-timestamp? {:position :absolute - :bottom 6 + :bottom 8 :right 12}))) (defn message-timestamp-placeholder-text [outgoing] @@ -105,25 +107,20 @@ (def delivery-view {:flex-direction :row - :margin-top 4 - :opacity 0.5}) + :margin-top 2}) (def delivery-text {:color styles/color-gray4 - :margin-left 5 :font-size 12}) (def not-sent-view (assoc delivery-view - :opacity 1 :margin-bottom 2 :padding-top 2)) (def not-sent-text (assoc delivery-text :color styles/color-red - :opacity 1 - :font-size 12 :text-align :right :padding-top 4)) @@ -135,10 +132,8 @@ {:padding-top 4}) (defn text-message - [{:keys [incoming-group]} collapsed?] - (merge style-message-text - {:margin-top (if incoming-group 4 0) - :margin-bottom (if collapsed? 2 0)})) + [collapsed?] + (assoc style-message-text :margin-bottom (if collapsed? 2 0))) (defnstyle emoji-message [{:keys [incoming-group]}] @@ -150,9 +145,8 @@ (defn message-view [{:keys [content-type outgoing group-chat first-in-group?]}] - (merge {:padding-top 6 + (merge {:padding-vertical 6 :padding-horizontal 12 - :padding-bottom 8 :border-radius 8 :margin-top (if (and first-in-group? (or outgoing @@ -440,7 +434,5 @@ (def message-author-name {:font-size 12 - :letter-spacing -0.2 :padding-top 6 - :padding-bottom 4 :color colors/gray}) diff --git a/src/status_im/chat/views/message/message.cljs b/src/status_im/chat/views/message/message.cljs index 52c0778b21..3f21d4e6b1 100644 --- a/src/status_im/chat/views/message/message.cljs +++ b/src/status_im/chat/views/message/message.cljs @@ -264,7 +264,7 @@ number-of-lines)})) (reset! collapsed? (not @collapsed?))))] [react/view - [react/text {:style (style/text-message message collapsible?) + [react/text {:style (style/text-message collapsible?) :number-of-lines (when collapsible? number-of-lines) :ref (partial reset! ref)} parsed-text