[WIP] Replace message bubble with discord style redesign

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"

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)

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"})

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})))

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]