fix: more sass cleanup

stylesheets/_global.scss

@@ -4,7 +4,8 @@
 
 html {
   height: 100%;
-  background-color: white;
+  // Default theme is Classic Dark
+  background-color: black;
 }
 
 body {
@@ -40,15 +41,6 @@ audio {
   max-width: 100%;
 }
 
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: ' ';
-}
-.clearfix:after {
-  clear: both;
-}
-
 .hide {
   display: none;
 }
@@ -67,118 +59,12 @@ button {
     }
   }
 }
-button.grey {
-  border-radius: $border-radius;
-  border: solid 1px var(--color-light-gray-color);
-  cursor: pointer;
-  margin: 1em auto;
-  padding: 1em;
-  font-family: inherit;
-  color: var(--color-gray-color);
-  background: var(--color-lightest-gray-color);
-  box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5);
-
-  &:hover {
-    box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7);
-  }
-
-  &[disabled='disabled'] {
-    &,
-    &:hover {
-      opacity: 0.5;
-      box-shadow: none;
-      cursor: default;
-    }
-  }
-}
 
 a {
   cursor: pointer;
   user-select: text;
 }
 
-.file-input {
-  position: relative;
-  .choose-file {
-    cursor: pointer;
-  }
-
-  input[type='file'] {
-    // Must be displayed in order to programmatically
-    // insert file paths)
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    cursor: pointer;
-    z-index: -100;
-  }
-}
-
-.banner {
-  z-index: 100;
-
-  // what's the right color?
-  background-color: var(--color-light-blue-color);
-  color: black;
-  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
-
-  position: absolute;
-  top: 25px;
-  right: 30px;
-  left: 30px;
-
-  padding: 5px 25px 5px 10px;
-
-  text-align: center;
-  border-radius: 10px;
-
-  cursor: pointer;
-
-  .warning {
-    width: 18px;
-    height: 18px;
-    display: inline-block;
-    vertical-align: text-bottom;
-    @include color-svg('../images/warning.svg', black);
-  }
-
-  .dismiss {
-    position: absolute;
-    right: 3px;
-    top: 3px;
-
-    height: 23px;
-    width: 23px;
-    @include color-svg('../images/x.svg', black);
-  }
-}
-
-$loading-height: 16px;
-
-.loading {
-  position: relative;
-  &::before {
-    display: block;
-    margin: 0px auto;
-    content: ' ';
-    height: $loading-height;
-    width: $loading-height;
-    border-radius: 2 * $loading-height;
-    border: solid 3px;
-    border-color: var(--color-light-blue-color) var(--color-light-blue-color)
-      var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
-    animation: rotate 1s linear infinite;
-  }
-
-  @keyframes rotate {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
-
 @keyframes loading {
   50% {
     transform: scale(1);
@@ -199,7 +85,7 @@ $loading-height: 16px;
   display: flex;
   align-items: center;
   user-select: none;
-  // force this to black, to stay consistent with the password prompt being in dark mode too.
+  // Default theme is Classic Dark so we force this for the password prompt
   background-color: black;
 
   .content {

stylesheets/_mixins.scss

@@ -1,30 +1,5 @@
-@mixin button-reset {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-}
-
 @mixin color-svg($svg, $color) {
   -webkit-mask: url($svg) no-repeat center;
   -webkit-mask-size: 100%;
   background-color: $color;
 }
-
-@mixin header-icon-white($svg) {
-  @include color-svg($svg, rgba(255, 255, 255, 0.8));
-  &:focus,
-  &:hover {
-    @include color-svg($svg, white);
-  }
-}
-@mixin header-icon-black($svg) {
-  @include color-svg($svg, rgba(0, 0, 0, 0.5));
-  &:focus,
-  &:hover {
-    @include color-svg($svg, black);
-  }
-}

stylesheets/_modal.scss

@@ -15,7 +15,7 @@
     margin: 100px auto;
     padding: 1em;
     background-color: var(--modal-background-content-color);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow: auto;
     box-shadow: var(--modal-drop-shadow);
   }
@@ -101,7 +101,7 @@
     min-width: 60%;
     padding: 1em;
     background: var(--modal-background-content-color);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow: auto;
     box-shadow: 0px 0px 15px 0px var(--modal-background-color);
   }

stylesheets/_session_theme.scss

@@ -87,7 +87,6 @@
   @include fontAccentBold();
 }
 
-// TODO Theming - Confirm this works
 h1 {
   @include session-h-title;
   color: var(--text-secondary-color);

stylesheets/_variables.scss

@@ -1,9 +0,0 @@
-// A few layout variables used cross-file
-
-$header-height: 55px;
-$button-height: 24px;
-
-$border-radius: 5px;
-
-$font-size: 14px;
-$font-size-small: calc(13 / 14) + em;

stylesheets/manifest.scss

@@ -7,9 +7,8 @@
 @import '../node_modules/sanitize.css/forms.css';
 @import '../node_modules/sanitize.css/typography.css';
 
-// Global Settings, Variables, and Mixins
+// Global Settings and Mixins
 @import 'session_constants';
-@import 'variables';
 @import 'mixins';
 @import 'global';
 

ts/themes/SessionTheme.tsx

@@ -70,6 +70,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     --padding-message-content: 7px 13px;
     --padding-link-preview: -7px -13px 7px -13px; // bottom has positive value because a link preview has always a body below
     --border-radius-message-box: 16px;
+    --border-radius: 5px;
 
     /* SIZES */
     --main-view-header-height: 63px;