From 416acd32c4fd435cd0f86805b40afbadb135b089 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Thu, 28 Jun 2018 17:42:55 +0300 Subject: PM styling --- vnext/src/components/Chat.js | 2 +- vnext/src/components/Contacts.js | 1 - vnext/src/components/PM.js | 38 +++++++++++++++++++++++++++++--------- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js index e7beef35..66e7f804 100644 --- a/vnext/src/components/Chat.js +++ b/vnext/src/components/Chat.js @@ -52,7 +52,7 @@ export default class Chat extends React.Component { diff --git a/vnext/src/components/Contacts.js b/vnext/src/components/Contacts.js index 509db3b3..3f2e7288 100644 --- a/vnext/src/components/Contacts.js +++ b/vnext/src/components/Contacts.js @@ -53,7 +53,6 @@ const wrapperStyle = { const chatListStyle = { boxSizing: 'border-box', padding: '0 20px', - overflowY: 'scroll', display: 'flex', alignItems: 'center', flexDirection: 'column', 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 ( -
  • - -

    +

  • +
    + +
    +

    +

    +
  • ); } -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 -- cgit v1.2.3