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

@@ -0,0 +1,47 @@
+import classNames from 'classnames';
+
+export default class Button extends PureComponent {
+
+  static propTypes = {
+    text: PropTypes.node,
+    onClick: PropTypes.func,
+    disabled: PropTypes.bool,
+    block: PropTypes.bool,
+    secondary: PropTypes.bool,
+    className: PropTypes.string,
+    children: PropTypes.node,
+  };
+
+  handleClick = (e) => {
+    if (!this.props.disabled && this.props.onClick) {
+      this.props.onClick(e);
+    }
+  }
+
+  setRef = (c) => {
+    this.node = c;
+  }
+
+  focus() {
+    this.node.focus();
+  }
+
+  render () {
+    const className = classNames('button', this.props.className, {
+      'button--secondary': this.props.secondary,
+      'button--block': this.props.block,
+    });
+
+    return (
+      <button
+        className={className}
+        disabled={this.props.disabled}
+        onClick={this.handleClick}
+        ref={this.setRef}
+      >
+        {this.props.text || this.props.children}
+      </button>
+    );
+  }
+
+}

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

@@ -0,0 +1,93 @@
+.button {
+  display: inline-block;
+  font-family: inherit;
+  padding: 0 16px;
+  position: relative;
+  text-decoration: none;
+  background-color: $ui-highlight-color;
+  box-sizing: border-box;
+  color: $primary-text-color;
+  cursor: pointer;
+
+  @include border-design(transparent, 10px, 4px);
+  @include text-sizing(14px, 500, 36px, center);
+  @include size(auto, 36px);
+  @include text-overflow(nowrap);
+
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: lighten($ui-highlight-color, 10%);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: $ui-primary-color;
+    cursor: default;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
+    outline: 0 !important;
+  }
+
+  &--block {
+    display: block;
+    width: 100%;
+  }
+
+  &--destructive {
+    transition: none;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: $error-red;
+      transition: none;
+    }
+  }
+
+  &--alternative {
+    color: $inverted-text-color;
+    background: $ui-primary-color;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: lighten($ui-primary-color, 4%);
+    }
+  }
+
+  &--alternative-2 {
+    background: $ui-base-lighter-color;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: lighten($ui-base-lighter-color, 4%);
+    }
+  }
+
+  &--secondary {
+    color: $darker-text-color;
+    background: transparent;
+    padding: 3px 15px;
+    border: 1px solid $ui-primary-color;
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: lighten($ui-primary-color, 4%);
+      color: lighten($darker-text-color, 4%);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+}