Large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*

app/javascript/gabsocial/components/columns_area/columns_area.js

@@ -0,0 +1,42 @@
+import './columns_area.scss';
+
+export default class ColumnsArea extends PureComponent {
+
+  static propTypes = {
+    children: PropTypes.node,
+    layout: PropTypes.object,
+  };
+
+  render () {
+    const { children } = this.props;
+    const layout = this.props.layout || {LEFT:null,RIGHT:null};
+
+    return (
+      <div className='page'>
+        <div className='page__columns'>
+          <div className='columns-area__panels'>
+
+            <div className='columns-area__panels__pane columns-area__panels__pane--left'>
+              <div className='columns-area__panels__pane__inner'>
+                {layout.LEFT}
+              </div>
+            </div>
+
+            <div className='columns-area__panels__main'>
+              <div className='columns-area columns-area--mobile'>
+                {children}
+              </div>
+            </div>
+
+            <div className='columns-area__panels__pane columns-area__panels__pane--right'>
+              <div className='columns-area__panels__pane__inner'>
+                {layout.RIGHT}
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/components/columns_area/columns_area.scss

@@ -0,0 +1,187 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &__top {
+    display: flex;
+    z-index: 105;
+
+    @include size(100%, auto);
+
+    @media (min-width:895px) {
+      top: -290px;
+      position: sticky;
+    }
+  }
+
+  &__columns {
+    display: flex;
+    flex-direction: column;
+
+    @include size(100%);
+  }
+}
+
+.columns-area {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: flex-start;
+  position: relative;
+
+  &__panels {
+    display: flex;
+    justify-content: center;
+
+    @include size(100%);
+
+    &__pane {
+      height: 100%;
+      pointer-events: none;
+      display: flex;
+      justify-content: flex-end;
+      padding-top: 15px;
+
+      &--start {
+        justify-content: flex-start;
+      }
+
+      &__inner {
+        pointer-events: auto;
+
+        @include size(265px, 100%);
+      }
+    }
+
+    &__main {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      width: 100%;
+      max-width: 600px;
+      padding: 0 20px;
+
+      @media screen and (max-width: 375px) {
+        padding: 0 10px;
+      }
+
+      @media screen and (min-width: 895px) {
+        margin: 0 20px;
+        padding: 0;
+      }
+    }
+  }
+}
+
+
+@media screen and (min-width: 631px) {
+  .columns-area {
+    padding: 0;
+  }
+
+  .columns-area>div {
+
+    .column,
+    .drawer {
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+  }
+}
+
+.columns-area--mobile {
+  flex-direction: column;
+  width: 100%;
+
+  @include margin-center;
+
+  .column,
+  .drawer {
+    padding: 0;
+
+    @include size(100%);
+  }
+
+  .search__input {
+    line-height: 18px;
+    font-size: 16px;
+    padding: 15px 30px 15px 15px;
+  }
+
+  .search__icon .fa {
+    top: 15px;
+  }
+
+  @media screen and (min-width: 360px) {
+    padding: 15px 0;
+  }
+
+  @media screen and (min-width: 630px) {
+    .detailed-status {
+      padding: 15px;
+
+      .media-gallery,
+      .video-player {
+        margin-top: 15px;
+      }
+    }
+
+    .account__header__bar {
+      padding: 5px 10px;
+    }
+
+    .navigation-bar,
+    .compose-form {
+      padding: 15px;
+    }
+
+    .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
+      padding-top: 15px;
+    }
+
+    .account {
+      padding: 15px 10px;
+    }
+
+    .notification {
+      &__message {
+        margin-left: 48px + 15px * 2;
+        padding-top: 15px;
+      }
+
+      &__favourite-icon-wrapper {
+        left: -32px;
+      }
+
+      .status {
+        padding-top: 8px;
+      }
+
+      .account {
+        padding-top: 8px;
+      }
+
+      .account__avatar-wrapper {
+        margin-left: 17px;
+        margin-right: 15px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 895px) {
+  .columns-area__panels__pane--left {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 1180px) {
+  .columns-area__panels__pane--right {
+    display: none;
+  }
+}
+
+.columns-area--mobile .column {
+  // @include gab-container-standards();
+}

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

@@ -0,0 +1 @@
+export { default } from './columns_area';