Differentiate chat bubbles

app/soapbox/features/chats/components/chat_window.js

@@ -11,6 +11,7 @@ import { closeChat, toggleChat, fetchChatMessages, sendChatMessage } from 'soapb
 import { List as ImmutableList } from 'immutable';
 
 const mapStateToProps = (state, { pane }) => ({
+  me: state.get('me'),
   chatMessages: state.getIn(['chat_messages', pane.get('chat_id')], ImmutableList()).reverse(),
 });
 
@@ -24,6 +25,7 @@ class ChatWindow extends ImmutablePureComponent {
     pane: ImmutablePropTypes.map.isRequired,
     idx: PropTypes.number,
     chatMessages: ImmutablePropTypes.list,
+    me: PropTypes.node,
   }
 
   static defaultProps = {
@@ -98,7 +100,7 @@ class ChatWindow extends ImmutablePureComponent {
   }
 
   render() {
-    const { pane, idx, chatMessages } = this.props;
+    const { pane, idx, chatMessages, me } = this.props;
     const chat = pane.get('chat');
     const account = pane.getIn(['chat', 'account']);
     if (!chat || !account) return null;
@@ -119,7 +121,7 @@ class ChatWindow extends ImmutablePureComponent {
         <div className='pane__content'>
           <div className='chat-messages'>
             {chatMessages.map(chatMessage => (
-              <div className='chat-message' key={chatMessage.get('id')}>
+              <div className={`chat-message${me === chatMessage.get('account_id') ? ' chat-message--me' : ''}`} key={chatMessage.get('id')}>
                 <span className='chat-message__bubble'>
                   {chatMessage.get('content')}
                 </span>

app/styles/chats.scss

@@ -1,5 +1,5 @@
 .pane {
-  @include standard-panel-shadow;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
   position: fixed;
   bottom: 0;
   right: 20px;
@@ -101,6 +101,7 @@
 
 .chat-message {
   margin: 14px 10px;
+  display: flex;
 
   &__bubble {
     padding: 4px 10px;
@@ -108,4 +109,9 @@
     border-radius: 10px;
     background-color: var(--background-color);
   }
+
+  &--me .chat-message__bubble {
+    margin-left: auto;
+    background-color: hsla(var(--brand-color_hsl), 0.2);
+  }
 }