Visitor bubbles in Thread

1 files changed, 1 insertions, 25 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