Merge branch 'chats-counter' into 'develop'

Chats style fixes

See merge request soapbox-pub/soapbox-fe!1465

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'>
-        {shortNumberFormat(unreadCount)}
-      </i>
+      <div className='mr-2 flex-none'>
+        <Counter count={unreadCount} />
+      </div>
     );
 
     const avatar = (

app/styles/chats.scss

@@ -104,25 +104,20 @@
   }
 
   .audio-toggle .react-toggle-thumb {
-    height: 14px;
-    width: 14px;
-    border: 1px solid var(--brand-color--med);
+    @apply w-3.5 h-3.5 border border-solid border-primary-400;
   }
 
   .audio-toggle .react-toggle {
-    height: 16px;
-    top: 4px;
+    @apply top-1;
   }
 
   .audio-toggle .react-toggle-track {
-    height: 16px;
-    width: 34px;
-    background-color: var(--accent-color);
+    @apply h-4 w-8 bg-accent-500;
   }
 
   .audio-toggle .react-toggle-track-check {
-    left: 2px;
-    bottom: 5px;
+    left: 4px;
+    bottom: 0;
   }
 
   .react-toggle--checked .react-toggle-thumb {
@@ -130,8 +125,8 @@
   }
 
   .audio-toggle .react-toggle-track-x {
-    right: 8px;
-    bottom: 5px;
+    right: 5px;
+    bottom: 0;
   }
 
   .fa {