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

@@ -0,0 +1,53 @@
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import classNames from 'classnames';
+import Icon from '../icon';
+
+import './index.scss';
+
+const messages = defineMessages({
+  load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
+});
+
+export default @injectIntl
+class LoadMore extends PureComponent {
+
+  static propTypes = {
+    onClick: PropTypes.func,
+    disabled: PropTypes.bool,
+    visible: PropTypes.bool,
+    maxId: PropTypes.string,
+    gap: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+  }
+
+  static defaultProps = {
+    visible: true,
+  }
+
+  handleClick = () => {
+    const { gap, maxId } = this.props;
+    this.props.onClick(gap ? maxId : undefined);
+  }
+
+  render() {
+    const { disabled, visible, gap, intl } = this.props;
+
+    const btnClasses = classNames('load-more', {
+      'load-more--gap': gap,
+    });
+
+    return (
+      <button
+        className={btnClasses}
+        disabled={disabled || !visible}
+        style={{ visibility: visible ? 'visible' : 'hidden' }}
+        onClick={this.handleClick}
+        aria-label={intl.formatMessage(messages.load_more)}
+      >
+        {!gap && <FormattedMessage id='status.load_more' defaultMessage='Load more' />}
+        {gap && <Icon id='ellipsis-h' />}
+      </button>
+    );
+  }
+
+}

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

@@ -0,0 +1,22 @@
+.load-more {
+  display: block;
+  color: $dark-text-color;
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  padding: 15px;
+  box-sizing: border-box;
+  width: 100%;
+  clear: both;
+  text-decoration: none;
+
+  @include text-sizing(14px, 400, 1.2, center);
+
+  &:hover {
+    background: lighten($ui-base-color, 2%);
+  }
+
+  &--gap {
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+  }
+}