Visitor bubbles in Thread

1 files changed, 24 insertions, 0 deletions

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
+    };
+}