Chats: replace avatar with unread counter

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

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>

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;
     }
   }