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

@@ -0,0 +1,40 @@
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import Icon from '../icon';
+
+import './index.scss';
+
+export default class ColumnBackButton extends PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    slim: PropTypes.bool,
+  };
+
+  handleClick = () => {
+    if (window.history && window.history.length === 1) {
+      this.context.router.history.push('/home'); // homehack
+    } else {
+      this.context.router.history.goBack();
+    }
+  }
+
+  render () {
+    const { slim } = this.props;
+
+    const btnClasses = classNames('column-back-button', {
+      'column-back-button--slim': slim,
+    });
+
+    return (
+      <button className={btnClasses} onClick={this.handleClick}>
+        <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
+        <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
+      </button>
+    );
+  }
+
+}

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

@@ -0,0 +1,32 @@
+.column-back-button {
+  background: lighten($ui-base-color, 4%);
+  color: $highlight-text-color;
+  cursor: pointer;
+  flex: 0 0 auto;
+  border: 0;
+  text-align: unset;
+  padding: 15px;
+  margin: 0;
+  z-index: 3;
+  outline: 0;
+
+  @include text-sizing(16px, 400, 1);
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &--slim {
+    cursor: pointer;
+    flex: 0 0 auto;
+    font-size: 16px;
+    padding: 15px;
+
+    @include abs-position(0, 0);
+  }
+
+  &__icon {
+    display: inline-block;
+    margin-right: 5px;
+  }
+}