PM styling

3 files changed, 30 insertions, 11 deletions

diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
index e7beef35..66e7f804 100644
--- a/vnext/src/components/Chat.js
+++ b/vnext/src/components/Chat.js
@@ -52,7 +52,7 @@ export default class Chat extends React.Component {
                             <ul style={chatStyle} ref="chats">
                                 {
                                     chats.map((chat) =>
-                                        <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} />
+                                        <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} {...this.props} />
                                     )
                                 }
                             </ul>
diff --git a/vnext/src/components/Contacts.js b/vnext/src/components/Contacts.js
index 509db3b3..3f2e7288 100644
--- a/vnext/src/components/Contacts.js
+++ b/vnext/src/components/Contacts.js
@@ -53,7 +53,6 @@ const wrapperStyle = {
 const chatListStyle = {
     boxSizing: 'border-box',
     padding: '0 20px',
-    overflowY: 'scroll',
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'column',
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