Update chat messages styling

* Change background color of outgoing messages
* Add more space between public chat messages

src/status_im/chat/styles/message/message.cljs

@@ -48,18 +48,22 @@
             :align-self     align
             :align-items    align})))
 
-(defn message-timestamp [justify-timestamp?]
+(def message-timestamp
-  (merge {:color      colors/gray
+  {:font-size  10
-          :font-size  10
+   :align-self :flex-end
-          :align-self :flex-end
+   :opacity    0.5})
-          :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
+(defn message-timestamp-placeholder-text [outgoing]
-  (assoc (message-timestamp false)
+  (assoc message-timestamp
-         :color styles/color-white))
+         :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
+(def delivery-text
-  {:color      styles/color-gray4
+  {:color       styles/color-gray4
    :margin-left 5
-   :android    {:font-size 13}
+   :font-size   14})
-   :ios        {: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
+  (assoc delivery-text
-         :opacity     1
+         :color styles/color-red
-         :font-size   12
+         :opacity 1
-         :text-align  :right
+         :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
+   :margin-bottom 4
-   :android       {:font-size 13}
+   :font-size     12})
-   :ios           {:font-size 14}})
 
 (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})

src/status_im/chat/views/message/message.cljs

@@ -85,14 +85,14 @@
                       :font  :default}
           (or preview (str params))])])))
 
-(defview message-timestamp [t justify-timestamp?]
+(defview message-timestamp [t justify-timestamp? outgoing]
-  [react/text {:style (style/message-timestamp justify-timestamp?)} t])
+  [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}])

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?

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)