From 22063ae3c8c648eafdd954553e54a3915e9203ef Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 27 Aug 2020 16:41:24 -0500
Subject: [PATCH] Chats: replace avatar with unread counter

---
 app/soapbox/features/chats/components/chat_panes.js  | 2 +-
 app/soapbox/features/chats/components/chat_window.js | 6 ++++--
 app/styles/chats.scss                                | 6 ++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js
index 321c0796d..3ddf4ab58 100644
--- a/app/soapbox/features/chats/components/chat_panes.js
+++ b/app/soapbox/features/chats/components/chat_panes.js
@@ -59,10 +59,10 @@ class ChatPanes extends ImmutablePureComponent {
     const mainWindowPane = (
       <div className={`pane pane--main pane--${mainWindow}`}>
         <div className='pane__header'>
+          {unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
           <button className='pane__title' onClick={this.handleMainWindowToggle}>
             <FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
           </button>
-          {unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
         </div>
         <div className='pane__content'>
           <ChatList
diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js
index 6448e4a67..fed5cb525 100644
--- a/app/soapbox/features/chats/components/chat_window.js
+++ b/app/soapbox/features/chats/components/chat_window.js
@@ -112,11 +112,13 @@ class ChatWindow extends ImmutablePureComponent {
     return (
       <div className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }} onMouseOver={this.handleReadChat}>
         <div className='pane__header'>
-          <Avatar account={account} size={18} />
+          {unreadCount > 0
+            ? <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>
+            : <Avatar account={account} size={18} />
+          }
           <button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>
             @{acctFull(account)}
           </button>
-          {unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
           <div className='pane__close'>
             <IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
           </div>
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 410769b8d..cb498e628 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -71,6 +71,12 @@
     .icon-with-badge__badge {
       position: static;
       pointer-events: none;
+      width: 18px;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 7px;
     }
   }