From 59c20295351f68797d28c225746a0761ca5183a4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 27 Aug 2020 12:50:08 -0500
Subject: [PATCH] Chats: style pending messages

---
 .../features/chats/components/chat_message_list.js       | 9 ++++++++-
 app/styles/chats.scss                                    | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index d0b2a005f..5f5f4db9e 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -6,6 +6,7 @@ import { injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { List as ImmutableList } from 'immutable';
 import emojify from 'soapbox/features/emoji/emoji';
+import classNames from 'classnames';
 
 const mapStateToProps = (state, { chatMessageIds }) => ({
   me: state.get('me'),
@@ -52,7 +53,13 @@ class ChatMessageList extends ImmutablePureComponent {
     return (
       <div className='chat-messages'>
         {chatMessages.map(chatMessage => (
-          <div className={`chat-message${me === chatMessage.get('account_id') ? ' chat-message--me' : ''}`} key={chatMessage.get('id')}>
+          <div
+            className={classNames('chat-message', {
+              'chat-message--me': chatMessage.get('account_id') === me,
+              'chat-message--pending': chatMessage.get('pending', false) === true,
+            })}
+            key={chatMessage.get('id')}
+          >
             <span
               className='chat-message__bubble'
               dangerouslySetInnerHTML={{ __html: emojify(chatMessage.get('content')) }}
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 3d5609a7e..727387499 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -122,4 +122,8 @@
     margin-left: auto;
     background-color: hsla(var(--brand-color_hsl), 0.2);
   }
+
+  &--pending .chat-message__bubble {
+    opacity: 0.5;
+  }
 }