Restyle chat messages

Update the rounded corners on all messages

Update paddings and margin for message author

Move timestamp 3pt from bottom

Fix miss-placed padding in message author name

Add margin between emoji and timestamp

Change reply icon

Decrese font size of emoji message

Remove extra space in style map

Remove extra margin between author and message

Replace reply icon with glymph

Update Inter font to support new glyphs

Update paddings for reply author

Update timestamp padding from bottom

Added line-height explicitly to support it cross platform. Otherwise android and ios use different size.

Remove margin right space on usernames

Remove hardcoded width of messages

Use same line-height for all types of names

Add background to emoji

Bug in RN emoji cropped on smaller line-height https://github.com/facebook/react-native/issues/18559

Fix reply on user with ens name

Fix message margin top should be always 4

Add minimal fix for ui in ens name screen

Remove extra computations for timestamp position

Update e2e test

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>

desktop/js_files/package.json

@@ -203,7 +203,6 @@
     "../../../../../desktop/resources/tiny_new_contact.png",
     "../../../../../desktop/resources/tiny_pending.png",
     "../../../../../desktop/resources/tiny_public.png",
-    "../../../../../desktop/resources/tiny_reply.png",
     "../../../../../desktop/resources/tiny_settings.png",
     "../../../../../desktop/resources/tiny_tribute_to_talk.png",
     "../../../../../desktop/resources/tribute_to_talk.png",

ios/StatusIm/Images.xcassets/tiny-reply.imageset/Contents.json

@@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "tiny-reply.png",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "tiny-reply@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "tiny-reply@3x.png",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

src/status_im/ui/screens/chat/input/input.cljs

@@ -125,10 +125,6 @@
             current-public-key [:multiaccount/public-key]]
     [react/scroll-view {:style style/reply-message-content}
      [react/view {:style style/reply-message-to-container}
-      [vector-icons/tiny-icon :tiny-icons/tiny-reply {:container-style style/reply-icon
-                                                      :accessibility-label :tiny-reply-icon
-                                                      :width 20
-                                                      :color colors/gray}]
       (chat-utils/format-reply-author from alias ens-name current-public-key style/reply-message-author)]
      [react/text {:style (assoc (message-style/style-message-text false) :font-size 14) :number-of-lines 3} message-text]]))
 

src/status_im/ui/screens/chat/message/message.cljs

@@ -50,12 +50,10 @@
     (when (or quote text)
       [react/view {:style (style/quoted-message-container outgoing)}
        [react/view {:style style/quoted-message-author-container}
-        [vector-icons/tiny-icon :tiny-icons/tiny-reply
+        [chat.utils/format-reply-author
-         {:color (if outgoing colors/white-transparent colors/gray)}]
-        (chat.utils/format-reply-author
          (or from (:from quote))
          alias ens-name current-public-key
-         (partial style/quoted-message-author outgoing))]
+         (partial style/quoted-message-author outgoing)]]
 
        [react/text {:style           (style/quoted-message-text outgoing)
                     :number-of-lines 5}
@@ -66,7 +64,7 @@
                :on-press #(re-frame/dispatch [:chat.ui/message-expand-toggled chat-id message-id])}
    (i18n/label (if expanded? :show-less :show-more))])
 
-(defn render-inline [message-text outgoing acc {:keys [type literal destination] :as node}]
+(defn render-inline [message-text outgoing acc {:keys [type literal destination]}]
   (case type
     ""
     (conj acc literal)
@@ -177,12 +175,12 @@
    {:justify-timestamp? true}])
 
 (defn emoji-message
-  [{:keys [content current-public-key alias] :as message}]
+  [{:keys [content current-public-key alias outgoing] :as message}]
   (let [response-to (:response-to content)]
     [message-view message
-     [react/view {:style (style/style-message-text false)}
+     [react/view {:style (style/style-message-text outgoing)}
       (when response-to
-        [quoted-message response-to (:quoted-message message) alias false current-public-key])
+        [quoted-message response-to (:quoted-message message) alias outgoing current-public-key])
       [react/text {:style (style/emoji-message message)}
        (:text content)]]]))
 
@@ -504,7 +502,8 @@
            from
            outgoing
            modal?
-           content] :as message} child]
+           content]
+    :as   message} child]
   [react/view (style/group-message-wrapper message)
    [react/view (style/message-body message)
     (when display-photo?
@@ -515,7 +514,8 @@
            [photos/member-photo from identicon]]])])
     [react/view (style/group-message-view outgoing display-photo?)
      (when display-username?
-       [react/touchable-opacity {:on-press #(re-frame/dispatch [:chat.ui/show-profile from])}
+       [react/touchable-opacity {:style    style/message-author-touchable
+                                 :on-press #(re-frame/dispatch [:chat.ui/show-profile from])}
         [message-author-name from alias]])
      [react/view {:style (style/timestamp-content-wrapper outgoing)}
       child]]]

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

@@ -11,13 +11,6 @@
   [outgoing]
   {:color (if outgoing colors/white colors/text)})
 
-(defn message-padding-top
-  [{:keys [last-in-group? display-username?]}]
-  (if (and display-username?
-           last-in-group?)
-    6
-    2))
-
 (defn last-message-padding
   [{:keys [first? typing]}]
   (when (and first? (not typing))
@@ -25,10 +18,10 @@
 
 (defn message-body
   [{:keys [outgoing] :as message}]
-  (let [align (if outgoing :flex-end :flex-start)
+  (let [align     (if outgoing :flex-end :flex-start)
         direction (if outgoing :row-reverse :row)]
     {:flex-direction direction
-     :padding-top    (message-padding-top message)
+     :margin-top     4
      :align-self     align
      :align-items    align}))
 
@@ -46,11 +39,12 @@
 (defn message-timestamp-text
   [justify-timestamp? outgoing rtl? emoji?]
   (merge message-timestamp
-         {:color (if (and outgoing (not emoji?))
+         {:line-height 10
-                   colors/white-transparent-70
+          :color       (if outgoing
-                   colors/gray)}
+                         colors/white-transparent-70
+                         colors/gray)}
          (when justify-timestamp? {:position              :absolute
-                                   :bottom                7
+                                   :bottom                9 ; 6 Bubble bottom, 3 message baseline
                                    (if rtl? :left :right) 12})))
 
 (def message-expand-button
@@ -66,10 +60,10 @@
    :color       colors/text-gray})
 
 (defn group-message-wrapper [{:keys [outgoing] :as message}]
-  (merge {:flex-direction :column}
+  (merge {:flex-direction   :column}
          (if outgoing
-           {:margin-left 64}
+           {:margin-left 96}
-           {:margin-right 64})
+           {:margin-right 52})
          (last-message-padding message)))
 
 (defn timestamp-content-wrapper [outgoing]
@@ -79,7 +73,7 @@
   [outgoing display-photo?]
   (let [align (if outgoing :flex-end :flex-start)]
     (merge {:flex-direction :column
-            :max-width      (if platform/desktop? 500 320)
+            :flex-shrink    1
             :align-items    align}
            (if outgoing
              {:margin-right 8}
@@ -93,6 +87,10 @@
     {:align-self    :flex-start
      :padding-left  (if platform/desktop? 24 8)}))
 
+(def message-author-touchable
+  {:margin-left      12
+   :padding-vertical 2})
+
 (defn message-author [outgoing]
   (merge
    {:width      (+ 16 photos/default-size) ;; 16 is for the padding
@@ -134,25 +132,35 @@
          :line-height 22
          :margin-bottom (if collapsed? 2 0)))
 
-(styles/defn emoji-message
+(defn emoji-message
   [{:keys [incoming-group]}]
-  {:font-size 40
+  {:font-size    28
-   :desktop   {:line-height 46}
+   :line-height  34                     ;TODO: Smaller crops the icon on the top
-   :margin-top (if incoming-group 4 0)})
+   :margin-right 12
+   :margin-top   (if incoming-group 4 0)})
 
 (defn message-view
   [{:keys [content-type outgoing group-chat last-in-group?]}]
-  (merge {:padding-vertical   6
+  (merge
-          :padding-horizontal 12
+   {:border-top-left-radius     16
-          :border-radius      8
+    :border-top-right-radius    16
-          :margin-top         (if (and last-in-group?
+    :border-bottom-right-radius 16
-                                       (or outgoing
+    :border-bottom-left-radius  16
-                                           (not group-chat)))
+    :padding-vertical           6
-                                16
+    :padding-horizontal         12
-                                4)}
+    :border-radius              8
-         (if (= content-type constants/content-type-emoji)
+    :margin-top                 (if (and last-in-group?
-           {:flex-direction :row}
+                                         (or outgoing
-           {:background-color (if outgoing colors/blue colors/blue-light)})))
+                                             (not group-chat)))
+                                  16
+                                  0)}
+   (if outgoing
+     {:border-bottom-right-radius 4}
+     {:border-bottom-left-radius 4})
+
+   {:background-color (if outgoing colors/blue colors/blue-light)}
+   (when (= content-type constants/content-type-emoji)
+     {:flex-direction :row})))
 
 (def play-image
   {:width  33
@@ -175,8 +183,6 @@
    :font-weight         (if chosen? "500" "400")
    :padding-top         6
    :padding-left        12
-   :padding-right       16
-   :margin-right        12
    :text-align-vertical :center})
 
 (def message-author-name-container
@@ -203,9 +209,11 @@
 
 (defn quoted-message-author [outgoing chosen?]
   (assoc (message-author-name chosen?)
-         :padding-bottom  5
+         :padding-bottom  6
-         :padding-top     4
+         :padding-top     0
-         :padding-left    6
+         :padding-left    0
+         :line-height     18
+         :font-weight    "500"
          :color           (if outgoing
                             colors/white-transparent-70
                             colors/gray)))

src/status_im/ui/screens/chat/utils.cljs

@@ -14,16 +14,28 @@
 (defn format-author [alias style name]
   (let [additional-styles (style false)]
     (if name
-      [react/text {:style (merge {:color colors/blue :font-size 13 :font-weight "500"} additional-styles)}
+      [react/text {:style (merge {:color       colors/blue
+                                  :font-size   13
+                                  :line-height 18
+                                  :font-weight "500"} additional-styles)}
        (str "@" (or (stateofus/username name) name))]
-      [react/text {:style (merge {:color colors/gray :font-size 12 :font-weight "400"} additional-styles)}
+      [react/text {:style (merge {:color       colors/gray
+                                  :font-size   12
+                                  :line-height 18
+                                  :font-weight "400"} additional-styles)}
        alias])))
 
+(def ^:private reply-symbol "↪ ")
+
 (defn format-reply-author [from alias username current-public-key style]
-  (or (and (= from current-public-key)
+  (let [reply-name (or (some->> username
-           [react/text {:style (style true)}
+                                (str "@")
-            (i18n/label :t/You)])
+                                (str reply-symbol))
-      (format-author alias style username)))
+                       (str reply-symbol alias))]
+    (or (and (= from current-public-key)
+             [react/text {:style (style true)}
+              (str reply-symbol (i18n/label :t/You))])
+        (format-author reply-name style false))))
 
 (def ^:private styling->prop
   {:bold      {:style {:font-weight "700"}}

src/status_im/ui/screens/ens/views.cljs

@@ -648,7 +648,7 @@
                    :content-type constants/content-type-text
                    :timestamp-str "9:41 AM"}]
       [react/view
-       [react/view {:padding-left 60}
+       [react/view {:padding-left 72}
         [message/message-author-name public-key]]
        [react/view {:flex-direction :row}
         [react/view {:padding-left 16 :padding-right 8 :padding-top 4}

test/appium/views/chat_view.py

@@ -337,7 +337,7 @@ class ChatElementByText(BaseText):
         class Username(BaseText):
             def __init__(self, driver, parent_locator):
                 super(Username, self).__init__(driver)
-                self.locator = self.Locator.xpath_selector(parent_locator + "/*[1]/android.widget.TextView")
+                self.locator = self.Locator.xpath_selector(parent_locator + "/*[2]/android.widget.TextView")
 
         return Username(self.driver, self.locator.value)