From 416acd32c4fd435cd0f86805b40afbadb135b089 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Thu, 28 Jun 2018 17:42:55 +0300
Subject: PM styling

---
 vnext/src/components/PM.js | 38 +++++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

(limited to 'vnext/src/components/PM.js')

diff --git a/vnext/src/components/PM.js b/vnext/src/components/PM.js
index 1833f3a3..7684c6ac 100644
--- a/vnext/src/components/PM.js
+++ b/vnext/src/components/PM.js
@@ -6,17 +6,37 @@ import { format } from '../utils/embed';
 export default function PM(props) {
     const { chat } = props;
     return (
-        <li style={chatItemStyle}>
-            <Avatar user={chat.user} />
-            <p dangerouslySetInnerHTML={{ __html: format(chat.body) }} />
+        <li>
+            <div style={chatItemStyle(props.visitor, chat)}>
+                <Avatar user={chat.user} />
+                <div style={bubbleStyle(props.visitor, chat)}>
+                    <p dangerouslySetInnerHTML={{ __html: format(chat.body) }} />
+                </div>
+            </div>
         </li>
     );
 }
 
-const chatItemStyle = {
-    padding: '5px 13px',
-    fontSize: '14px',
-    listStyle: 'none',
-    margin: '10px 0',
-    boxShadow: '0 0 3px rgba(0,0,0, 0.16)'
+function bubbleStyle(me, msg) {
+    const isMe = me.uid === msg.user.uid;
+    const color = isMe ? '#fff' : '#222';
+    const background = isMe ? '#0076ff' : '#eee';
+    return {
+        background: background,
+        color: color,
+        padding: '0 12px'
+    }
+}
+
+function chatItemStyle(me, msg) {
+    const isMe = me.uid === msg.user.uid;
+    const alignment = isMe ? 'flex-end' : 'flex-start';
+    return {
+        padding: '3px 6px',
+        listStyle: 'none',
+        margin: '10px 0',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: alignment
+    }
 }
\ No newline at end of file
-- 
cgit v1.2.3