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

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

app/javascript/gabsocial/components/upload_area/upload_area.js

@@ -0,0 +1,52 @@
+import Motion from '../../features/ui/util/optional_motion';
+import spring from 'react-motion/lib/spring';
+import { FormattedMessage } from 'react-intl';
+
+import './upload_area.scss';
+
+export default class UploadArea extends PureComponent {
+
+  static propTypes = {
+    active: PropTypes.bool,
+    onClose: PropTypes.func,
+  };
+
+  handleKeyUp = (e) => {
+    if (!this.props.active) return;
+
+    const keyCode = e.keyCode;
+    switch(keyCode) {
+    case 27:
+      e.preventDefault();
+      e.stopPropagation();
+      this.props.onClose();
+      break;
+    }
+  }
+
+  componentDidMount () {
+    window.addEventListener('keyup', this.handleKeyUp, false);
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('keyup', this.handleKeyUp);
+  }
+
+  render () {
+    const { active } = this.props;
+
+    return (
+      <Motion defaultStyle={{ backgroundOpacity: 0, backgroundScale: 0.95 }} style={{ backgroundOpacity: spring(active ? 1 : 0, { stiffness: 150, damping: 15 }), backgroundScale: spring(active ? 1 : 0.95, { stiffness: 200, damping: 3 }) }}>
+        {({ backgroundOpacity, backgroundScale }) => (
+          <div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}>
+            <div className='upload-area__drop'>
+              <div className='upload-area__background' style={{ transform: `scale(${backgroundScale})` }} />
+              <div className='upload-area__content'><FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' /></div>
+            </div>
+          </div>
+        )}
+      </Motion>
+    );
+  }
+
+}

app/javascript/gabsocial/components/upload_area/upload_area.scss

@@ -0,0 +1,42 @@
+.upload-area {
+  background: rgba($base-overlay-background, 0.8);
+  opacity: 0;
+  visibility: hidden;
+  z-index: 9999;
+
+  @include flex(center, center);
+  @include size(100%);
+  @include abs-position(0, auto, auto, 0);
+
+  * {
+    pointer-events: none;
+  }
+
+  &__drop {
+    display: flex;
+    box-sizing: border-box;
+    position: relative;
+    padding: 8px;
+
+    @include size(320px, 160px);
+  }
+
+  &__background {
+    z-index: -1;
+    border-radius: 4px;
+    background: $ui-base-color;
+    box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
+
+    @include abs-position(0, 0, 0, 0);
+  }
+
+  &__content {
+    flex: 1;
+    color: $secondary-text-color;
+    border: 2px dashed $ui-base-lighter-color;
+    border-radius: 4px;
+
+    @include flex(center, center);
+    @include text-sizing(18px, 500);
+  }
+}