Chat messages layout fixes

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>

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

@@ -1,4 +1,5 @@
 (ns status-im.chat.styles.message.datemark
+  (:require-macros [status-im.utils.styles :refer [defstyle]])
   (:require [status-im.ui.components.styles :as common]))
 
 (def datemark-wrapper
@@ -9,7 +10,7 @@
   {:margin-top       16
    :height           22})
 
-(def datemark-text
+(defstyle datemark-text
   {:color     common/color-gray4
-   :letter-spacing -0.2
+   :ios       {:letter-spacing -0.2}
    :font-size 15})

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

@@ -10,7 +10,7 @@
    :color          styles/text1-color
    :letter-spacing -0.2
    :android        {:line-height 22}
-   :ios            {:line-height 23}})
+   :ios            {:line-height 22}})
 
 (def style-sub-text
   {:top         -2
@@ -23,31 +23,29 @@
   [{:keys [first-in-group? display-username?]}]
   (if (and display-username?
            first-in-group?)
-    8
+    6
-    4))
+    2))
 
 (def message-empty-spacing
   {:height 16})
 
-(def message-body-base
-  {:padding-right 10
-   :padding-left  10})
-
 (defn last-message-padding
   [{:keys [last? typing]}]
   (when (and last? (not typing))
     {:padding-bottom 16}))
 
 (defn message-body
-  [{:keys [outgoing] :as message}]
+  [{:keys [outgoing display-photo?] :as message}]
   (let [align (if outgoing :flex-end :flex-start)
         direction (if outgoing :row-reverse :row)]
-    (merge message-body-base
+    (merge {:flex-direction direction
-           {:flex-direction direction
             :width          230
             :padding-top    (message-padding-top message)
             :align-self     align
-            :align-items    align})))
+            :align-items    align}
+           (when display-photo?
+             {:padding-right 8
+              :padding-left  8}))))
 
 (def message-timestamp
   {:font-size      10
@@ -89,17 +87,17 @@
   [outgoing]
   (let [align (if outgoing :flex-end :flex-start)]
     {:flex-direction :column
-     :width          260
+     :width          230
-     :padding-left   10
+     :padding-left   8
-     :padding-right  10
+     :padding-right  8
      :align-items    align}))
 
 (defn delivery-status [outgoing]
   (if outgoing
     {:align-self    :flex-end
-     :padding-right 22}
+     :padding-right 8}
     {:align-self    :flex-start
-     :padding-left  16}))
+     :padding-left  8}))
 
 (def message-author
   {:width      photos/default-size

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

@@ -79,6 +79,7 @@
   (letsubs [network [:network-name]]
     (let [{{:keys [amount fiat-amount tx-hash asset] send-network :network} :params} content
           recipient-name (get-in content [:params :bot-db :public :recipient])
+          amount-text-long? (< 10 (count amount))
           network-mismatch? (and (seq send-network) (not= network send-network))]
       [react/view style/command-send-message-view
        [react/view
@@ -88,7 +89,7 @@
                        :font  :medium}
            amount
            [react/text {:style (style/command-amount-currency-separator outgoing)}
-            "."]
+            (if amount-text-long? "\n" ".")]
            [react/text {:style (style/command-send-currency-text outgoing)
                         :font  :default}
             asset]]]]