Merge branch 'admin-dashboard' into 'develop'

Soapbox admin

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

app/soapbox/components/icon_with_badge.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
-
-const IconWithBadge = ({ id, count, className }) => {
-  if (count < 1) return null;
-
-  return (
-    <i className='icon-with-badge'>
-      {count > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(count)}</i>}
-    </i>
-  );
-};
-
-IconWithBadge.propTypes = {
-  id: PropTypes.string.isRequired,
-  count: PropTypes.number.isRequired,
-  className: PropTypes.string,
-};
-
-export default IconWithBadge;

app/soapbox/components/icon_with_counter.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'soapbox/components/icon';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
+
+const IconWithCounter = ({ icon, count, fixedWidth }) => {
+  return (
+    <div className='icon-with-counter'>
+      <Icon id={icon} fixedWidth={fixedWidth} />
+      {count > 0 && <i className='icon-with-counter__counter'>
+        {shortNumberFormat(count)}
+      </i>}
+    </div>
+  );
+};
+
+IconWithCounter.propTypes = {
+  icon: PropTypes.string.isRequired,
+  count: PropTypes.number.isRequired,
+  fixedWidth: PropTypes.bool,
+};
+
+export default IconWithCounter;