Chats: fix unread counter

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

@@ -12,8 +12,8 @@ import { createSelector } from 'reselect';
 import { openChat, launchChat, toggleMainWindow } from 'soapbox/actions/chats';
 import { getSettings } from 'soapbox/actions/settings';
 import AccountSearch from 'soapbox/components/account_search';
+import { Counter } from 'soapbox/components/ui';
 import AudioToggle from 'soapbox/features/chats/components/audio_toggle';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 import ChatList from './chat_list';
 import ChatWindow from './chat_window';
@@ -83,7 +83,11 @@ class ChatPanes extends ImmutablePureComponent {
     const mainWindowPane = (
       <div className={`pane pane--main pane--${mainWindowState}`}>
         <div className='pane__header'>
-          {unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
+          {unreadCount > 0 && (
+            <div className='mr-2 flex-none'>
+              <Counter count={unreadCount} />
+            </div>
+          )}
           <button className='pane__title' onClick={this.handleMainWindowToggle}>
             <FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
           </button>

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

@@ -13,9 +13,9 @@ import {
 import Avatar from 'soapbox/components/avatar';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import IconButton from 'soapbox/components/icon_button';
+import { Counter } from 'soapbox/components/ui';
 import { makeGetChat } from 'soapbox/selectors';
 import { getAcct } from 'soapbox/utils/accounts';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
 import { displayFqn } from 'soapbox/utils/state';
 
 import ChatBox from './chat_box';
@@ -98,9 +98,9 @@ class ChatWindow extends ImmutablePureComponent {
     const unreadCount = chat.get('unread');
 
     const unreadIcon = (
-      <i className='icon-with-badge__badge'>
+      <div className='mr-2 flex-none'>
-        {shortNumberFormat(unreadCount)}
+        <Counter count={unreadCount} />
-      </i>
+      </div>
     );
 
     const avatar = (