PM styling

1 files changed, 29 insertions, 9 deletions

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