From 4e2c0afb676f5895245f65bfffc7f48e75fcf9e7 Mon Sep 17 00:00:00 2001
From: Rahul Gupta <rahulr09gupta@gmail.com>
Date: Mon, 1 Aug 2022 14:44:00 +0530
Subject: [PATCH] feat[frontend]: make signin and register page responsive

---
 frontend/src/components/Auth/Auth.sass    | 141 ++++++++++++++++++++-
 frontend/src/components/Auth/SignIn.js    |   5 -
 frontend/src/components/Auth/_SignIn.sass | 147 ----------------------
 frontend/src/components/Auth/_SignUp.sass |   0
 frontend/src/styles/Auth/Auth.css         |  19 +--
 5 files changed, 150 insertions(+), 162 deletions(-)
 delete mode 100644 frontend/src/components/Auth/_SignIn.sass
 delete mode 100644 frontend/src/components/Auth/_SignUp.sass

diff --git a/frontend/src/components/Auth/Auth.sass b/frontend/src/components/Auth/Auth.sass
index 4811624..4201d36 100644
--- a/frontend/src/components/Auth/Auth.sass
+++ b/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%
\ No newline at end of file
diff --git a/frontend/src/components/Auth/SignIn.js b/frontend/src/components/Auth/SignIn.js
index 6ada653..f4cef84 100644
--- a/frontend/src/components/Auth/SignIn.js
+++ b/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
diff --git a/frontend/src/components/Auth/_SignIn.sass b/frontend/src/components/Auth/_SignIn.sass
deleted file mode 100644
index 5c2f268..0000000
--- a/frontend/src/components/Auth/_SignIn.sass
+++ /dev/null
@@ -1,147 +0,0 @@
-.auth-container 
-    display: flex
-    justify-content: center 
-    align-items: center
-    flex-direction: column
-    //border: 1px solid black
-    
-    margin: 0 18em
-
-.signin-opt-division
-    display: flex 
-    justify-content: center
-    
-    font-size: 0.9em
-    font-size: 500
-    color: #636363
-    margin-bottom: 2em
-
-
-.auth-wrapper 
-    padding: 2em 2em
-    max-width: 26em
-    padding-top: 0
-    //max-width: 26em
-    background-color: rgba(255, 255, 255, 0.96)
-    //background-color: #ffffff
-
-    a 
-        display: inline-block
-        
-
-    form
-        display: flex
-        flex-direction: column
-        justify-content: center
-        align-items: center
-        margin-bottom: 2em
-
-
-    label
-        display: flex
-        flex-direction: column
-        margin-bottom: 2em
-        max-width: 26em
-        font-size: 0.9em
-
-    
-    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
-        width: 27em
-        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
-
-    
-
-    
-
-    
diff --git a/frontend/src/components/Auth/_SignUp.sass b/frontend/src/components/Auth/_SignUp.sass
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/styles/Auth/Auth.css b/frontend/src/styles/Auth/Auth.css
index be16989..b357f3d 100644
--- a/frontend/src/styles/Auth/Auth.css
+++ b/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,10 +17,9 @@
 }
 
 .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;
@@ -27,7 +27,6 @@
 .auth-wrapper form {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   margin-bottom: 2em;
 }
@@ -35,8 +34,7 @@
   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%;
+  }
+}