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/badge/index.js

@@ -0,0 +1,25 @@
+import './index.scss';
+
+export default class Badge extends PureComponent {
+
+  static propTypes = {
+    type: PropTypes.oneOf([
+      'pro',
+      'donor',
+      'investor',
+    ]).isRequired,
+  };
+
+  render() {
+    const { type } = this.props;
+
+    if (!type) return null;
+
+    return (
+      <span className={`badge badge--${type}`}>
+        {type.toUpperCase()}
+      </span>
+    );
+  }
+
+};

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

@@ -0,0 +1,23 @@
+.badge {
+  text-transform: uppercase;
+  padding: 2px 6px;
+  border-radius: 2px;
+  margin: 0 5px 5px 0;
+
+  @include text-sizing(12px, 600, 1, center);
+
+  &--pro {
+    background-color: blueviolet;
+    color: #fff;
+  }
+
+  &--investor {
+    background-color: gold;
+    color: #000;
+  }
+
+  &--donor {
+    background-color: lightgreen;
+    color: #000;
+  }
+}