Break Counter into its own component

app/soapbox/components/dropdown_menu.tsx

@@ -6,7 +6,7 @@ import { spring } from 'react-motion';
 import Overlay from 'react-overlays/lib/Overlay';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { IconButton } from 'soapbox/components/ui';
+import { IconButton, Counter } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import Motion from 'soapbox/features/ui/util/optional_motion';
 
@@ -196,8 +196,8 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
           <span className='truncate'>{text}</span>
 
           {count ? (
-            <span className='ml-auto h-5 w-5 flex-none block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
+            <span className='ml-auto h-5 w-5 flex-none'>
-              {count}
+              <Counter count={count} />
             </span>
           ) : null}
         </a>

app/soapbox/components/icon_with_counter.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Icon from 'soapbox/components/icon';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { Counter } from 'soapbox/components/ui';
 
 interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
   count: number,
@@ -14,9 +14,11 @@ const IconWithCounter: React.FC<IIconWithCounter> = ({ icon, count, ...rest }) =
     <div className='relative'>
       <Icon id={icon} {...rest} />
 
-      {count > 0 && <i className='absolute -top-2 -right-2 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
+      {count > 0 && (
-        {shortNumberFormat(count)}
+        <i className='absolute -top-2 -right-2'>
-      </i>}
+          <Counter count={count} />
+        </i>
+      )}
     </div>
   );
 };

app/soapbox/components/sidebar-navigation-link.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
-import { Icon, Text } from './ui';
+import { Icon, Text, Counter } from './ui';
 
 interface ISidebarNavigationLink {
   count?: number,
@@ -44,8 +44,8 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       })}
       >
         {withCounter && count > 0 ? (
-          <span className='absolute -top-2 -right-2 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
+          <span className='absolute -top-2 -right-2'>
-            {count}
+            <Counter count={count} />
           </span>
         ) : null}
 

app/soapbox/components/ui/counter/counter.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { shortNumberFormat } from 'soapbox/utils/numbers';
+
+interface ICounter {
+  count: number,
+}
+
+/** A simple counter for notifications, etc. */
+const Counter: React.FC<ICounter> = ({ count }) => {
+  return (
+    <span className='block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
+      {shortNumberFormat(count)}
+    </span>
+  );
+};
+
+export default Counter;

app/soapbox/components/ui/icon/icon.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 
+import Counter from '../counter/counter';
+
 import SvgIcon from './svg-icon';
 
+
 interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   className?: string,
   count?: number,
@@ -13,8 +16,8 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
 const Icon = ({ src, alt, count, size, ...filteredProps }: IIcon): JSX.Element => (
   <div className='relative' data-testid='icon'>
     {count ? (
-      <span className='absolute -top-2 -right-3 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
+      <span className='absolute -top-2 -right-3'>
-        {count}
+        <Counter count={count} />
       </span>
     ) : null}
 

app/soapbox/components/ui/index.ts

@@ -2,6 +2,7 @@ export { default as Avatar } from './avatar/avatar';
 export { default as Button } from './button/button';
 export { Card, CardBody, CardHeader, CardTitle } from './card/card';
 export { default as Column } from './column/column';
+export { default as Counter } from './counter/counter';
 export { default as Emoji } from './emoji/emoji';
 export { default as EmojiSelector } from './emoji-selector/emoji-selector';
 export { default as Form } from './form/form';

app/soapbox/components/ui/tabs/tabs.tsx

@@ -9,6 +9,8 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
+import Counter from '../counter/counter';
+
 import './tabs.css';
 
 const HORIZONTAL_PADDING = 8;
@@ -132,8 +134,8 @@ const Tabs = ({ items, activeItem }: ITabs) => {
       >
         <div className='relative'>
           {count ? (
-            <span className='absolute -top-2 left-full ml-1 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
+            <span className='absolute -top-2 left-full ml-1'>
-              {count}
+              <Counter count={count} />
             </span>
           ) : null}