Finished dark mode! This means re-doing all sass variables in the

variables.scss file and defining css variables in :root and alterting
them based on prefered color scheme. This gives us a mechanism to set
custom color schemes for the entire site from one place and changing
between them just by setting a class to the body element. This is done
by overwriting the css variables and then our scss variables use these
changes and apply them downward. This seems like a really nice setup for
the switching between- and adding color schemes.
Also did a lot of cleanup of unused, duplicate or errors styling
throughout the application.

src/components/Signin.vue

@@ -110,49 +110,27 @@ export default {
 
 <style lang="scss" scoped>
 @import "./src/scss/variables";
-@import "./src/scss/message";
 
-// DUPLICATE CODE
-.settings {
-  padding: 35px;
+section {
+  padding: 1.3rem;
 
-  &__header {
+  @include tablet-min {
+    padding: 4rem;
+  }
+
+  h1 {
     margin: 0;
     line-height: 16px;
-    color: $c-dark;
+    color: $text-color;
     font-weight: 300;
     margin-bottom: 20px;
     text-transform: uppercase;
   }
-}
-.profile__content {
-  padding: 35px;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
 
-.form {
-  > div:last-child {
+  .link {
+    display: block;
+    width: max-content;
     margin-top: 1rem;
   }
-
-  &__group{
-     justify-content: unset;
-     &__input-icon {
-        margin-top: 8px;
-        height: 22px;
-        width: 22px;
-     }
-     &-input {
-        padding: 10px 5px 10px 45px;
-        height: 40px;
-        font-size: 17px;
-        width: 100%;
-        // @include desktop-min {
-        //    width: 400px;
-        // }
-     }
-  }
 }
 </style>