From 797d8037e0ef6706928b56526fcbfa143d29345f Mon Sep 17 00:00:00 2001
From: Julien Eluard <julien.eluard@gmail.com>
Date: Wed, 19 Jun 2019 17:17:24 +0200
Subject: [PATCH] Improved chat message tapping area

Signed-off-by: Vitaliy Vlasov <siphiuel@gmail.com>
---
 .../ui/screens/chat/message/message.cljs      |  7 +++--
 .../screens/chat/styles/message/message.cljs  | 28 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs
index 5a65a43f91..5fa1324f4d 100644
--- a/src/status_im/ui/screens/chat/message/message.cljs
+++ b/src/status_im/ui/screens/chat/message/message.cljs
@@ -227,14 +227,15 @@
   [react/view (style/group-message-wrapper message)
    [react/view (style/message-body message)
     (when display-photo?
-      [react/view style/message-author
+      [react/view (style/message-author outgoing)
        (when last-in-group?
          [react/touchable-highlight {:on-press #(when-not modal? (re-frame/dispatch [:chat.ui/show-profile from]))}
           [react/view
            [photos/member-photo from]]])])
-    [react/view (style/group-message-view outgoing message-type)
+    [react/view (style/group-message-view outgoing message-type display-photo?)
      (when display-username?
-       [message-author-name from username])
+       [react/touchable-opacity {:on-press #(re-frame/dispatch [:chat.ui/show-profile from])}
+        [message-author-name from username]])
      [react/view {:style (style/timestamp-content-wrapper outgoing message-type)}
       content]]]
    [react/view (style/delivery-status outgoing)
diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs
index c5c022cc8e..879030769a 100644
--- a/src/status_im/ui/screens/chat/styles/message/message.cljs
+++ b/src/status_im/ui/screens/chat/styles/message/message.cljs
@@ -22,15 +22,13 @@
     {:padding-bottom 16}))
 
 (defn message-body
-  [{:keys [outgoing display-photo?] :as message}]
+  [{:keys [outgoing] :as message}]
   (let [align (if outgoing :flex-end :flex-start)
         direction (if outgoing :row-reverse :row)]
-    (merge {:flex-direction direction
-            :padding-top    (message-padding-top message)
-            :align-self     align
-            :align-items    align}
-           (when display-photo?
-             {:padding-left  8}))))
+    {:flex-direction direction
+     :padding-top    (message-padding-top message)
+     :align-self     align
+     :align-items    align}))
 
 (def message-timestamp
   {:font-size  10
@@ -76,14 +74,15 @@
   {:flex-direction (if outgoing :row-reverse :row)})
 
 (defn group-message-view
-  [outgoing message-type]
+  [outgoing message-type display-photo?]
   (let [align (if outgoing :flex-end :flex-start)]
     (merge {:flex-direction :column
             :max-width      (if platform/desktop? 500 320)
             :align-items    align}
            (if outgoing
              {:margin-right 8}
-             {:margin-left 8}))))
+             (when-not display-photo?
+               {:margin-left 8})))))
 
 (defn delivery-status [outgoing]
   (if outgoing
@@ -92,9 +91,14 @@
     {:align-self    :flex-start
      :padding-left  (if platform/desktop? 24 8)}))
 
-(def message-author
-  {:width      photos/default-size
-   :align-self :flex-end})
+(defn message-author [outgoing]
+  (merge
+   {:width      (+ 16 photos/default-size) ;; 16 is for the padding
+    :align-self :flex-end}
+   (if outgoing
+     {:padding-left 8}
+     {:padding-horizontal 8
+      :padding-right 8})))
 
 (def delivery-view
   {:flex-direction :row