Visitor bubbles in Thread

1 files changed, 5 insertions, 3 deletions

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} />
             :