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/media_modal/media_modal.js

@@ -9,6 +9,8 @@ import IconButton from '../../icon_button';
 import ImageLoader from '../../image_loader';
 import Icon from '../../icon';
 
+import './media_modal.scss';
+
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
   previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },

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

@@ -0,0 +1,103 @@
+.media-modal {
+  position: relative;
+
+  @include size(100%);
+
+  &__closer {
+    @include abs-position(0, 0, 0, 0);
+  }
+
+  &__navigation {
+    pointer-events: none;
+    transition: opacity 0.3s linear;
+    will-change: opacity;
+
+    @include abs-position(0, 0, 0, 0);
+
+    * {
+      pointer-events: auto;
+    }
+
+    &.media-modal__navigation--hidden {
+      opacity: 0;
+
+      * {
+        pointer-events: none;
+      }
+    }
+  }
+
+  &__nav {
+    background: rgba($base-overlay-background, 0.5);
+    box-sizing: border-box;
+    border: 0;
+    color: $primary-text-color;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    height: 20vmax;
+    margin: auto 0;
+    padding: 30px 15px;
+
+    @include abs-position(0, auto, 0, auto);
+
+    &--left {
+      left: 0;
+    }
+
+    &--right {
+      right: 0;
+    }
+  }
+
+  &__meta,
+  &__pagination {
+    width: 100%;
+    text-align: center;
+    pointer-events: none;
+
+    @include abs-position(auto, auto, 20px, 0);
+  }
+
+  &__meta {
+    &--shifted {
+      bottom: 62px;
+    }
+
+    a {
+      text-decoration: none;
+      font-weight: 500;
+      color: $ui-secondary-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__page-dot {
+    display: inline-block;
+  }
+
+  &__button {
+    background-color: $primary-text-color;
+    border-radius: 6px;
+    margin: 10px;
+    padding: 0;
+    border: 0;
+    font-size: 0;
+
+    @include size(12px);
+
+    &--active {
+      background-color: $highlight-text-color;
+    }
+  }
+
+  &__close {
+    @include abs-position(8px, 8px);
+  }
+}