Get rid of unused DrawerLoading component

app/soapbox/features/ui/components/drawer_loading.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-const DrawerLoading = () => (
-  <div className='drawer'>
-    <div className='drawer__pager'>
-      <div className='drawer__inner' />
-    </div>
-  </div>
-);
-
-export default DrawerLoading;

app/styles/application.scss

@@ -58,7 +58,6 @@
 @import 'components/react-toggle';
 @import 'components/getting-started';
 @import 'components/promo-panel';
-@import 'components/drawer';
 @import 'components/still-image';
 @import 'components/timeline-queue-header';
 @import 'components/badge';

app/styles/components/columns.scss

@@ -61,6 +61,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  flex: 1 1 100%;
 }
 
 @media screen and (min-width: 631px) {
@@ -68,8 +69,7 @@
     padding: 0;
   }
 
-  .column,
+  .column {
-  .drawer {
     flex: 0 0 auto;
     padding: 10px;
     padding-left: 5px;
@@ -85,8 +85,7 @@
   }
 
   .columns-area > div {
-    .column,
+    .column {
-    .drawer {
       padding-left: 5px;
       padding-right: 5px;
     }
@@ -100,8 +99,7 @@
   margin: 0 auto;
   padding: 15px 0;
 
-  .column,
+  .column {
-  .drawer {
     width: 100%;
     height: 100%;
     padding: 0;
@@ -893,3 +891,28 @@
     border-top-right-radius: 0;
   }
 }
+
+// TODO: Get rid of whatever a "drawer" is
+// Probably rename to column-something
+.drawer__pager {
+  box-sizing: border-box;
+  padding: 0;
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+}
+
+.drawer__inner {
+  top: 0;
+  left: 0;
+  background: var(--foreground-color);
+  box-sizing: border-box;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+}

app/styles/components/drawer.scss

@@ -1,80 +0,0 @@
-.drawer {
-  width: 300px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-}
-
-.drawer__tab {
-  display: block;
-  flex: 1 1 auto;
-  padding: 15px 5px 13px;
-  color: var(--primary-text-color--faint);
-  text-decoration: none;
-  text-align: center;
-  font-size: 16px;
-  border-bottom: 2px solid transparent;
-}
-
-.column,
-.drawer {
-  flex: 1 1 100%;
-}
-
-.drawer__pager {
-  box-sizing: border-box;
-  padding: 0;
-  flex-grow: 1;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-}
-
-.drawer__inner {
-  top: 0;
-  left: 0;
-  background: var(--foreground-color);
-  box-sizing: border-box;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.pseudo-drawer {
-  background: var(--background-color);
-  font-size: 13px;
-  text-align: left;
-}
-
-.drawer__header {
-  flex: 0 0 auto;
-  font-size: 16px;
-  background: var(--brand-color--med);
-  margin-bottom: 10px;
-  display: flex;
-  flex-direction: row;
-
-  a {
-    transition: background 100ms ease-in;
-
-    &:hover {
-      background: var(--background-color);
-      transition: background 200ms ease-out;
-    }
-  }
-}
-
-.drawer__backdrop {
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba($base-overlay-background, 0.5);
-}

app/styles/rtl.scss

@@ -228,8 +228,7 @@ body.rtl {
   }
 
   @media screen and (min-width: 631px) {
-    .column,
+    .column {
-    .drawer {
       padding-left: 5px;
       padding-right: 5px;
 
@@ -240,8 +239,7 @@ body.rtl {
     }
 
     .columns-area > div {
-      .column,
+      .column {
-      .drawer {
         padding-left: 5px;
         padding-right: 5px;
       }

app/styles/ui.scss

@@ -318,7 +318,6 @@
 .react-swipeable-view-container {
   &,
   .columns-area,
-  .drawer,
   .column {
     height: 100%;
   }