diff --git a/src/status_im/ui/components/typography.cljs b/src/status_im/ui/components/typography.cljs index 891bf32bc20..520c306a1d7 100644 --- a/src/status_im/ui/components/typography.cljs +++ b/src/status_im/ui/components/typography.cljs @@ -3,9 +3,10 @@ (def default-font-family "Inter") (defn default-style [] - {:color colors/black + {:color colors/black-light :font-weight "400" - :font-size 15}) + :font-size 15 + :line-height 20}) (def typography-styles {:header {:font-weight "700" diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index 7107ecc218a..398e7515b0b 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -308,7 +308,7 @@ (defn message-content-wrapper "Author, userpic and delivery wrapper" - [{:keys [first-in-group? display-photo? display-username? + [{:keys [last-in-group? display-photo? display-username? identicon from outgoing in-popover?] :as message} content {:keys [modal close-modal]}] @@ -317,12 +317,11 @@ :accessibility-label :chat-item} [react/view {:style (style/message-body message) :pointer-events :box-none} - (when display-photo? [react/view (style/message-author-userpic outgoing) - (when first-in-group? + (when last-in-group? [react/touchable-highlight {:on-press #(do (when modal (close-modal)) (re-frame/dispatch [:chat.ui/show-profile from]))} - [photos/member-photo from identicon]])]) + [photos/member-photo from identicon]])] [react/view {:style (style/message-author-wrapper outgoing display-photo? in-popover?)} (when display-username? [react/touchable-opacity {:style style/message-author-touchable @@ -478,8 +477,7 @@ [react/touchable-highlight {:on-press #(swap! collapsed? not) :style {:position :absolute :bottom 0 :left 0 :right 0 :height 72}} - [react/linear-gradient {:colors [(str color "00") color] - :start {:x 0 :y 0} :end {:x 0 :y 0.9}} + [react/view [react/view {:height 72 :align-self :center :justify-content :flex-end :padding-bottom 10} [react/view (style/collapse-button) diff --git a/src/status_im/ui/screens/chat/styles/message/datemark.cljs b/src/status_im/ui/screens/chat/styles/message/datemark.cljs index 50e4d60b9f9..a11c5f2b27a 100644 --- a/src/status_im/ui/screens/chat/styles/message/datemark.cljs +++ b/src/status_im/ui/screens/chat/styles/message/datemark.cljs @@ -3,9 +3,12 @@ (def datemark-mobile {:flex 1 - :align-items :center - :margin-top 16 - :height 22}) + :justify-content :center + :margin-vertical 16 + :padding-left 50}) (defn datemark-text [] - {:color colors/gray}) + {:color colors/gray + :font-size 14 + :line-height 16 + :font-weight "400"}) diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs index 80dcdf28492..2bea8cc67cc 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -65,8 +65,8 @@ (defn message-wrapper [{:keys [outgoing in-popover?]}] (if (and outgoing (not in-popover?)) - {:margin-left 96} - {:margin-right 96})) + {:margin-left 0} + {:margin-right 10})) (defn message-author-wrapper [outgoing display-photo? in-popover?] @@ -145,13 +145,12 @@ {:margin-left 5}) (def message-author-touchable - {:margin-left 12 + {:margin-left 0 :flex-direction :row}) (defn message-author-userpic [outgoing] (merge - {:width (+ 16 photos/default-size) ;; 16 is for the padding - :align-self :flex-end} + {:width (+ 16 photos/default-size)} ;; 16 is for the padding (if outgoing {:padding-left 8} {:padding-horizontal 8 @@ -195,7 +194,7 @@ (defn message-view-wrapper [outgoing] {:align-self :flex-end - :flex-direction (if outgoing :row :row-reverse)}) + :flex-direction :row-reverse}) (defn message-view [{:keys [content-type outgoing group-chat last-in-group? mentioned pinned]}] @@ -204,26 +203,21 @@ :border-top-right-radius 16 :border-bottom-right-radius 16 :border-bottom-left-radius 16 - :padding-top 6 - :padding-horizontal 12 - :border-radius 8 + :padding-top 0 :margin-top (if (and last-in-group? (or outgoing (not group-chat))) 16 0)} - (if outgoing - {:border-bottom-right-radius 4} - {:border-bottom-left-radius 4}) (cond pinned {:background-color colors/pin-background} (= content-type constants/content-type-system-text) nil - outgoing {:background-color colors/blue} + outgoing {:background-color colors/white} mentioned {:background-color colors/mentioned-background :border-color colors/mentioned-border :border-width 1} - :else {:background-color colors/blue-light}) + :else {:background-color colors/white}) (when (= content-type constants/content-type-emoji) {:flex-direction :row}))) diff --git a/src/status_im/ui/screens/chat/utils.cljs b/src/status_im/ui/screens/chat/utils.cljs index 10c7cf9accb..ae34fb0bdc8 100644 --- a/src/status_im/ui/screens/chat/utils.cljs +++ b/src/status_im/ui/screens/chat/utils.cljs @@ -14,21 +14,21 @@ [first-name second-name] (multiaccounts/contact-two-names contact false)] (if (or nickname ens-name) [react/nested-text {:number-of-lines 2 - :style {:color (if modal colors/white-persist colors/blue) + :style {:color (if modal colors/white-persist colors/black-light) :font-size (if profile? 15 13) :line-height (if profile? 22 18) :font-weight "500"}} (subs first-name 0 81) (when you? - [{:style {:color colors/gray :font-weight "400" :font-size 13}} + [{:style {:color colors/black-light :font-weight "500" :font-size 13}} (str " " (i18n/label :t/You))]) (when nickname - [{:style {:color colors/gray :font-weight "400"}} + [{:style {:color colors/black-light :font-weight "500"}} (str " " (subs second-name 0 81))])] - [react/text {:style {:color (if modal colors/white-persist colors/gray) - :font-size (if profile? 15 12) + [react/text {:style {:color (if modal colors/white-persist colors/black-light) + :font-size (if profile? 15 13) :line-height (if profile? 22 18) - :font-weight "400"}} + :font-weight "600"}} first-name])))) (defn format-reply-author [from username current-public-key style outgoing]