1 files changed, 144 insertions, 0 deletions

diff --git a/src/styles/auth.scss b/src/styles/auth.scss
new file mode 100644
index 000000000..9ad71867c
--- /dev/null
+++ b/src/styles/auth.scss
@@ -0,0 +1,144 @@
+@import './config.scss';
+
+.auth {
+  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 {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &>span {
+        position: absolute;
+      }
+    }
+  }
+
+  .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);
+
+    &.auth__container--signup {
+      width: 450px;
+      // margin-left: auto;
+      // margin-right: auto;
+    }
+  }
+
+  .auth__logo {
+    display: block;
+    width: 150px;
+    height: auto;
+    margin: -105px auto 20px auto;
+    border-radius: $theme-border-radius;
+
+    &.auth__logo--sm {
+      border: 4px solid #FFF;
+      box-shadow: 0 0 6px rgba(black, 0.5);
+      border-radius: 100%;
+    }
+  }
+
+  .auth__form {
+    padding: 20px;
+
+    h1 {
+      text-align: center;
+    }
+  }
+
+  .auth__button {
+    width: 100%;
+
+    &.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;
+
+    a {
+      display: block;
+      text-align: center;
+      color: $theme-gray;
+      margin-bottom: 8px;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .auth__adlk {
+    position: absolute;
+    right: 25px;
+    bottom: 15px;
+
+    img {
+      width: 65px;
+    }
+  }
+
+  .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;
+  }
+
+  .available-services {
+    margin-bottom: 15px;
+  }
+
+  .unavailable-services {
+    margin: 15px 0;
+
+    p {
+      text-transform: capitalize;
+    }
+  }
+
+  .legal {
+    text-align: center;
+    margin-top: 20px;
+    color: $theme-gray-light;
+  }
+}