Another 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 group page components.

app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.js

@@ -5,6 +5,8 @@ import { changeUploadCompose } from '../../../actions/compose';
 import { getPointerPosition } from '../../../utils/element_position';
 import ImageLoader from '../../image_loader';
 
+import './focal_point_modal.scss';
+
 const mapStateToProps = (state, { id }) => ({
   media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
 });
@@ -101,7 +103,7 @@ class FocalPointModal extends ImmutablePureComponent {
     const height = media.getIn(['meta', 'original', 'height']) || null;
 
     return (
-      <div className='modal-root__modal video-modal focal-point-modal'>
+      <div className='modal-root__modal focal-point-modal'>
         <div className={classNames('focal-point', { dragging })} ref={this.setRef}>
           <ImageLoader
             previewSrc={media.get('preview_url')}

app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.scss

@@ -0,0 +1,36 @@
+.focal-point-modal {
+  position: relative;
+
+  @include max-size(80vw, 80vh);
+}
+
+.focal-point {
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+
+  &.dragging {
+    cursor: move;
+  }
+
+  img {
+    margin: auto;
+
+    @include max-size(80vw, 80vh);
+    @include size(auto);
+  }
+
+  &__reticle {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    background: url('/assets/images/reticle.png') no-repeat 0 0;
+    box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
+
+    @include circle(100px);
+  }
+
+  &__overlay {
+    @include size(100%);
+    @include abs-position(0, auto, auto, 0);
+  }
+}