diff options
Diffstat (limited to 'vnext/src/components/PM.js')
| -rw-r--r-- | vnext/src/components/PM.js | 38 |
1 files changed, 29 insertions, 9 deletions
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 |