feat[frontend]: make signin and register page responsive

frontend/src/components/Auth/Auth.sass

@@ -1,2 +1,139 @@
-@import ./_SignIn.sass
-@import ./_SignUp.sass
+.auth-container 
+    display: flex
+    justify-content: center 
+    align-items: center
+    flex-direction: column
+    width: 416px
+    margin: auto
+
+.signin-opt-division
+    display: flex 
+    justify-content: center
+
+    font-size: 0.9em
+    font-size: 500
+    color: #636363
+    margin-bottom: 2em
+
+
+.auth-wrapper 
+    background-color: rgba(255, 255, 255, 0.96)
+    padding: 0 1rem
+    width: 416px
+
+    a 
+        display: inline-block
+
+
+    form
+        display: flex
+        flex-direction: column
+        align-items: center
+        margin-bottom: 2em
+
+
+    label
+        display: flex
+        flex-direction: column
+        margin-bottom: 2em
+        width: 100%
+
+
+    label:last-of-type 
+        //border: 1px solid black
+        height: 95px
+        margin-bottom: 1em
+
+
+    input 
+        margin-top: 0.8em
+        height: 35px
+        padding: 0.7em
+        font-size: 0.9em
+        border: 1px solid #e0e0e0
+        border-radius: 2px
+
+    input:focus
+        border: 1px solid #5fa372
+
+    p 
+        color: #e13040
+        font-size: 0.9em
+        margin-top: 0.8em
+
+
+.title-line
+    font-size: 1.5em
+    font-weight: 400
+    margin-bottom: 2em
+    text-align: center
+
+
+.auth-btn-wrapper
+    display: flex
+    justify-content: flex-start
+    width: 100%
+    align-items: center
+
+#forgot-password
+    margin-left: 1em
+    font-size: 0.9em
+    color: #5fa372
+    font-weight: 500
+
+.auth-btn
+    margin-top: 0 
+    background-color: #5fa372
+    border: none
+    font-size: 0.9em
+    padding: 0.7em 1.2em
+    display: flex
+    height: 100%
+    font-weight: 500
+    color: #ffffff
+    cursor: pointer
+    border-radius: 2px
+
+.auth-btn:hover
+    background-color: #559466
+
+
+.auth-flex-wrapper 
+    display: flex
+    justify-content: space-between
+
+#loader-btn
+    margin-top: 0 
+    background-color: transparent
+    border: none
+    font-size: 1em
+    padding: 0.5em 1em
+    display: flex
+    height: 100%
+    width: 92px
+
+
+
+.signin-h1
+    font-size: 1.2em
+    font-weight: 500
+    margin-top: 4em
+    margin-bottom: 1em
+
+#reg-benefit
+    color: black
+    line-height: 22px
+
+.reg-btn
+    background-color: #f3f2f0
+    color: black
+    margin-top: 1.5em
+    font-weight: 400
+
+.reg-btn:hover
+    background-color: #e8e6e2
+
+
+@media (max-width: 480px) 
+    .auth-container
+        width: 100%

frontend/src/components/Auth/SignIn.js

@@ -4,7 +4,6 @@ import { connect } from "react-redux";
 import { Link, Redirect } from "react-router-dom";
 import { fetchCart } from "../../actions/cartActions";
 import "../../styles/Auth/Auth.css";
-import FacebookAuth from "../FacebookAuth/FacebookAuth";
 
 class SignIn extends Component {
   constructor(props) {
@@ -95,10 +94,6 @@ class SignIn extends Component {
             </div>
           </form>
 
-          <span className="signin-opt-division">OR</span>
-
-          <FacebookAuth />
-
           <h1 className="signin-h1">New Here?</h1>
           <p id="reg-benefit">
             Sign up for an account to take advantage of order tracking and

frontend/src/styles/Auth/Auth.css

@@ -3,7 +3,8 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  margin: 0 18em;
+  width: 416px;
+  margin: auto;
 }
 
 .signin-opt-division {
@@ -16,27 +17,24 @@
 }
 
 .auth-wrapper {
-  padding: 2em 2em;
-  max-width: 26em;
-  padding-top: 0;
   background-color: rgba(255, 255, 255, 0.96);
+  padding: 0 1rem;
+  width: 416px;
 }
 .auth-wrapper a {
   display: inline-block;
 }
 .auth-wrapper form {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   margin-bottom: 2em;
 }
 .auth-wrapper label {
   display: flex;
   flex-direction: column;
   margin-bottom: 2em;
-  max-width: 26em;
-  font-size: 0.9em;
+  width: 100%;
 }
 .auth-wrapper label:last-of-type {
   height: 95px;
@@ -48,7 +46,6 @@
   padding: 0.7em;
   font-size: 0.9em;
   border: 1px solid #e0e0e0;
-  width: 27em;
   border-radius: 2px;
 }
 .auth-wrapper input:focus {
@@ -137,3 +134,9 @@
 .reg-btn:hover {
   background-color: #e8e6e2;
 }
+
+@media (max-width: 480px) {
+  .auth-container {
+    width: 100%;
+  }
+}