Visitor bubbles in Thread

3 files changed, 30 insertions, 28 deletions

diff --git a/vnext/src/ui/PM.js b/vnext/src/ui/PM.js
index e5eddb9e..08db523f 100644
--- a/vnext/src/ui/PM.js
+++ b/vnext/src/ui/PM.js
@@ -4,6 +4,7 @@ import { UserType, MessageType } from './Types';
 
 import Avatar from './Avatar';
 import { format } from '../utils/embed';
+import { bubbleStyle, chatItemStyle } from './helpers/BubbleStyle';
 
 function PM(props) {
     const { chat } = props;
@@ -21,31 +22,6 @@ function PM(props) {
 
 export default React.memo(PM);
 
-function bubbleStyle(me, msg) {
-    const isMe = me.uid === msg.user.uid;
-    const color = isMe ? '#fff' : '#222';
-    const background = isMe ? '#ec4b98' : '#eee';
-    return {
-        background: background,
-        color: color,
-        padding: '12px',
-        display: 'inline-block'
-    };
-}
-
-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
-    };
-}
-
 PM.propTypes = {
     chat: MessageType.isRequired,
     visitor: UserType.isRequired
diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index 6cbb5188..28ad8d39 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -14,6 +14,8 @@ import { format, embedUrls } from '../utils/embed';
 
 import { getMessages, comment, update, markReadTracker, fetchUserUri, updateAvatar } from '../api';
 
+import { bubbleStyle, chatItemStyle } from './helpers/BubbleStyle';
+
 import './Thread.css';
 
 let isMounted;
@@ -44,8 +46,8 @@ function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postC
     };
   }, [author.uri]);
   return (
-    <div>
-      <div className="msg-header" style={{ padding: '6px', display: 'flex', alignItems: 'flex-start' }}>
+    <div style={chatItemStyle(visitor, msg)}>
+      <div className="msg-header">
         <Avatar user={author} link={author.uri}>
           <div className="msg-ts">
             {msg.replyto > 0 &&
@@ -75,7 +77,7 @@ function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postC
           }
         </div>
       </div>
-      <div className="msg-bubble">
+      <div style={bubbleStyle(visitor, msg)}>
         {
           msg.html ? <div dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} />
             :
diff --git a/vnext/src/ui/helpers/BubbleStyle.js b/vnext/src/ui/helpers/BubbleStyle.js
new file mode 100644
index 00000000..570b7337
--- /dev/null
+++ b/vnext/src/ui/helpers/BubbleStyle.js
@@ -0,0 +1,24 @@
+export function bubbleStyle(me, msg) {
+    const isMe = me.uid === msg.user.uid;
+    const color = isMe ? '#fff' : '#222';
+    const background = isMe ? '#ec4b98' : '#eee';
+    return {
+        background: background,
+        color: color,
+        padding: '12px',
+        display: 'inline-block'
+    };
+}
+
+export 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
+    };
+}