From f8981ab6cb240b9184879c94a0f896e4c8621483 Mon Sep 17 00:00:00 2001 From: Dmitry Novotochinov Date: Fri, 25 May 2018 19:32:24 +0300 Subject: [PATCH] Update chat messages styling * Change background color of outgoing messages * Add more space between public chat messages --- .../chat/styles/message/message.cljs | 64 +++++++++++-------- src/status_im/chat/views/message/message.cljs | 12 ++-- .../chat/views/message/request_message.cljs | 4 +- src/status_im/ui/components/colors.cljs | 2 + 4 files changed, 47 insertions(+), 35 deletions(-) diff --git a/src/status_im/chat/styles/message/message.cljs b/src/status_im/chat/styles/message/message.cljs index c1163d2784..7ffdb5cae2 100644 --- a/src/status_im/chat/styles/message/message.cljs +++ b/src/status_im/chat/styles/message/message.cljs @@ -48,18 +48,22 @@ :align-self align :align-items align}))) -(defn message-timestamp [justify-timestamp?] - (merge {:color colors/gray - :font-size 10 - :align-self :flex-end - :opacity 0.5} +(def message-timestamp + {:font-size 10 + :align-self :flex-end + :opacity 0.5}) + +(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 10 :right 12}))) -(def message-timestamp-placeholder - (assoc (message-timestamp false) - :color styles/color-white)) +(defn message-timestamp-placeholder-text [outgoing] + (assoc message-timestamp + :color + (if outgoing colors/hawkes-blue styles/color-white))) (def message-expand-button {:color colors/gray @@ -105,22 +109,23 @@ :margin-top 2 :opacity 0.5}) -(defstyle delivery-text - {:color styles/color-gray4 +(def delivery-text + {:color styles/color-gray4 :margin-left 5 - :android {:font-size 13} - :ios {:font-size 14}}) + :font-size 14}) (def not-sent-view - (assoc delivery-view :opacity 1 + (assoc delivery-view + :opacity 1 :margin-bottom 2 - :padding-top 2)) + :padding-top 2)) (def not-sent-text - (assoc delivery-text :color styles/color-red - :opacity 1 - :font-size 12 - :text-align :right + (assoc delivery-text + :color styles/color-red + :opacity 1 + :font-size 12 + :text-align :right :padding-top 4)) (def not-sent-icon @@ -145,31 +150,35 @@ :margin-top (if incoming-group 4 0)}) (defn message-view - [{:keys [content-type outgoing group-chat selected]}] + [{:keys [content-type outgoing group-chat first-in-group?]}] (merge {:padding-top 6 :padding-horizontal 12 :padding-bottom 8 - :border-radius 8} + :border-radius 8 + :margin-top (if (and first-in-group? + (or outgoing + (not group-chat))) + 16 + 4)} (when-not (= content-type constants/content-type-emoji) - {:background-color styles/color-white}) + {:background-color (if outgoing colors/hawkes-blue styles/color-white)}) (when (= content-type constants/content-type-command) {:padding-top 10 :padding-bottom 14}))) -(defstyle author +(def author {:color styles/color-gray4 - :margin-bottom 5 - :android {:font-size 13} - :ios {:font-size 14}}) + :margin-bottom 4 + :font-size 12}) (def command-request-view {:padding-right 16}) -(def command-request-message-view +(defn command-request-message-view [outgoing] {:border-radius 14 :padding-vertical 10 :padding-right 28 - :background-color styles/color-white}) + :background-color (if outgoing colors/hawkes-blue styles/color-white)}) (def command-request-from-text (merge style-sub-text {:margin-bottom 2})) @@ -311,5 +320,6 @@ (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 a049c3ee7d..07875ed384 100644 --- a/src/status_im/chat/views/message/message.cljs +++ b/src/status_im/chat/views/message/message.cljs @@ -85,14 +85,14 @@ :font :default} (or preview (str params))])]))) -(defview message-timestamp [t justify-timestamp?] - [react/text {:style (style/message-timestamp justify-timestamp?)} t]) +(defview message-timestamp [t justify-timestamp? outgoing] + [react/text {:style (style/message-timestamp-text justify-timestamp? outgoing)} t]) (defn message-view - [{:keys [timestamp-str] :as message} content {:keys [justify-timestamp?]}] + [{:keys [timestamp-str outgoing] :as message} content {:keys [justify-timestamp?]}] [react/view (style/message-view message) content - [message-timestamp timestamp-str justify-timestamp?]]) + [message-timestamp timestamp-str justify-timestamp? outgoing]]) (def replacements {"\\*[^*]+\\*" {:font-weight :bold} @@ -192,7 +192,7 @@ (i18n/label (if @collapsed? :show-more :show-less))]) (defn text-message - [{:keys [content timestamp-str group-chat] :as message}] + [{:keys [content timestamp-str group-chat outgoing] :as message}] [message-view message (let [parsed-text (cached-parse-text content :browse-link-from-message) ref (reagent/atom nil) @@ -211,7 +211,7 @@ :ref (partial reset! ref) :on-press on-press} parsed-text - [react/text {:style style/message-timestamp-placeholder} (timestamp-with-padding timestamp-str)]] + [react/text {:style (style/message-timestamp-placeholder-text outgoing)} (timestamp-with-padding timestamp-str)]] (when collapsible? [expand-button collapsed? on-press])]) {:justify-timestamp? true}]) diff --git a/src/status_im/chat/views/message/request_message.cljs b/src/status_im/chat/views/message/request_message.cljs index b41d33b93b..f4d7e6aebe 100644 --- a/src/status_im/chat/views/message/request_message.cljs +++ b/src/status_im/chat/views/message/request_message.cljs @@ -74,7 +74,7 @@ [icon command-icon st/command-request-image])]]))}))) (defview message-content-command-request - [{:keys [message-id content] :as message}] + [{:keys [message-id content outgoing] :as message}] (letsubs [command [:get-command (:request-command-ref content)] answered? [:is-request-answered? message-id] status-initialized? [:get :status-module-initialized?] @@ -94,7 +94,7 @@ [view st/command-request-view [touchable-highlight {:on-press on-press-handler} - [view st/command-request-message-view + [view (st/command-request-message-view outgoing) (if (:markup preview) [view (commands-utils/generate-hiccup (:markup preview)) (when network-mismatch? diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs index 1728bc0345..583d9409cf 100644 --- a/src/status_im/ui/components/colors.cljs +++ b/src/status_im/ui/components/colors.cljs @@ -17,6 +17,8 @@ (def gray-border "#ececf0") (def blue "#4360df") ;; Used as main wallet color, and ios home add button (def blue-dark "#3147ac") ;; Used as secondary wallet color (icon background) +(def hawkes-blue "#dce2fb") ;; Outgoing chat messages background +(def wild-blue-yonder "#707caf") ;; Text color for outgoing messages timestamp (def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions (def red-light "#ffe5ea") ;; error tooltip (def text-light-gray "#212121") ;; Used for labels (home items)