Updated all basic components

removed unnecessary components, combined where necessary
added each component to a folder, added individual css style modules
optimized some component rendering flows
removed functional components in favor of pure components
linted and formatted all of the files

app/javascript/gabsocial/components/notification_counter/index.js

@@ -0,0 +1,27 @@
+import { shortNumberFormat } from '../../utils/numbers';
+
+import './index.scss';
+
+const mapStateToProps = state => ({
+  count: state.getIn(['notifications', 'unread']),
+});
+
+class NotificationCounter extends PureComponent {
+
+	static propTypes = {
+	  count: PropTypes.number.isRequired,
+	};
+
+	render() {
+	  const { count } = this.props;
+
+	  if (count < 1) return null;
+
+	  return (
+	    <span className='notification-counter'>{shortNumberFormat(count)}</span>
+	  );
+	}
+
+}
+
+export default connect(mapStateToProps)(NotificationCounter);

app/javascript/gabsocial/components/notification_counter/index.scss

@@ -0,0 +1,21 @@
+.notification-counter {
+  box-sizing: border-box;
+  min-width: 16px;
+  height: 16px;
+  padding: 1px 3px 0;
+  border-radius: 8px;
+  // @include font-montserrat();
+  color: #fff;
+  background: $gab-alert-red;
+
+  @include text-sizing(14px, 400, 14px, center);
+  @include abs-position(-14px, auto, auto, -16px);
+
+  @media screen and (max-width: $nav-breakpoint-1) {
+    @include abs-position(0, auto, auto, 27px, false);
+  }
+}
+
+.column-link--transparent .notification-counter {
+  border-color: darken($ui-base-color, 8%);
+}