Update stylesheets and added darkMode variable and toggle.

1 files changed, 56 insertions, 65 deletions

diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 9ad71867c..34bfa1805 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -1,144 +1,135 @@
 @import './config.scss';
 
+.theme__dark.auth {
+  background: $dark-theme-gray-darkest;
+
+  .auth__container {
+    background: $dark-theme-gray-darker;
+    box-shadow: 0 0 50px rgba($dark-theme-black, .2);
+  }
+
+  .auth__logo.auth__logo--sm {
+    border: 4px solid $dark-theme-black;
+    box-shadow: 0 0 6px rgba($dark-theme-black, .5);
+  }
+
+  .auth__links {
+    background: $dark-theme-gray-dark;
+
+    a { color: $dark-theme-gray-lighter; }
+  }
+
+  .legal {
+    color: $dark-theme-gray-lighter;
+
+    a { color: $dark-theme-gray-lightest; }
+  }
+}
+
 .auth {
+  background: $theme-brand-primary;
   display: flex;
   justify-content: center;
-  background: $theme-brand-primary;
 
   .auth__layout {
     width: 100%;
-    &>div>span {
-      width: 100%;
-    }
-    // display: flex;
-    // align-items: center;
-    // justify-content: center;
-    // flex-direction: column;
-
-    // @media only screen and (max-height : 700px) {
-    //   margin: 100px 0;
-    // }
 
-    &>div {
+    & > div {
+      align-items: center;
       display: flex;
       justify-content: center;
-      align-items: center;
 
-      &>span {
+      & > span {
         position: absolute;
+        width: 100%;
       }
     }
   }
 
   .auth__container {
-    position: relative;
-    width: 350px;
-    height: auto;
-    margin: 40px auto 0 auto;
     background: #FFF;
-    // padding: 20px;
     border-radius: $theme-border-radius;
-    box-shadow: 0 0 50px rgba(black, 0.2);
+    box-shadow: 0 0 50px rgba(black, .2);
+    height: auto;
+    margin: 40px auto 0;
+    position: relative;
+    width: 350px;
 
-    &.auth__container--signup {
-      width: 450px;
-      // margin-left: auto;
-      // margin-right: auto;
-    }
+    &.auth__container--signup { width: 450px; }
   }
 
   .auth__logo {
+    border-radius: $theme-border-radius;
     display: block;
-    width: 150px;
     height: auto;
     margin: -105px auto 20px auto;
-    border-radius: $theme-border-radius;
+    width: 150px;
 
     &.auth__logo--sm {
       border: 4px solid #FFF;
-      box-shadow: 0 0 6px rgba(black, 0.5);
       border-radius: 100%;
+      box-shadow: 0 0 6px rgba(black, .5);
     }
   }
 
   .auth__form {
     padding: 20px;
 
-    h1 {
-      text-align: center;
-    }
+    h1 { text-align: center; }
   }
 
   .auth__button {
     width: 100%;
 
-    &.auth__button--skip {
-      margin: 10px auto 0;
-    }
+    &.auth__button--skip { margin: 10px auto 0; }
   }
 
   .auth__links {
-    padding: 20px;
     background: $theme-gray-lighter;
     border-bottom-left-radius: $theme-border-radius;
     border-bottom-right-radius: $theme-border-radius;
+    padding: 20px;
 
     a {
       display: block;
-      text-align: center;
       color: $theme-gray;
       margin-bottom: 8px;
+      text-align: center;
 
-      &:last-of-type {
-        margin-bottom: 0;
-      }
+      &:last-of-type { margin-bottom: 0; }
     }
   }
 
   .auth__adlk {
+    bottom: 15px;
     position: absolute;
     right: 25px;
-    bottom: 15px;
 
-    img {
-      width: 65px;
-    }
+    img { width: 65px; }
   }
 
-  .auth__letter {
-    margin-bottom: 30px;
-  }
-
-  .scroll-container {
-    z-index: 10;
-  }
-
-  .info-bar {
-    position: absolute;
-  }
+  .auth__letter { margin-bottom: 30px; }
+  .scroll-container { z-index: 10; }
+  .info-bar { position: absolute; }
 
   &__scroll-container {
-    overflow: scroll;
-    width: 100%;
     max-height: 100vh;
     padding: 80px 0;
+    overflow: scroll;
+    width: 100%;
   }
 
-  .available-services {
-    margin-bottom: 15px;
-  }
+  .available-services { margin-bottom: 15px; }
 
   .unavailable-services {
     margin: 15px 0;
 
-    p {
-      text-transform: capitalize;
-    }
+    p { text-transform: capitalize; }
   }
 
   .legal {
-    text-align: center;
-    margin-top: 20px;
     color: $theme-gray-light;
+    margin-top: 20px;
+    text-align: center;
   }
 }