Merge pull request #357 from onifs10/onifade

Fixed Login and SignUp page #338
Tejas1510 · Oct 10, 2021 · c8fbc8e · c8fbc8e
2 parents 10f3181 + 3caa2a4
commit c8fbc8e
Show file tree

Hide file tree

Showing 6 changed files with 10,576 additions and 10,884 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -84,9 +84,14 @@ const useStyl = makeStyles(theme => ({
   },
   toolbar: theme.mixins.toolbar,
   content: {
+    minHeight: "100vh",
     flexGrow: 1,
     padding: theme.spacing(3),
   },
+  growDiv: {
+    height: "100%",
+    width: "100%"
+  }
 }));
 
 function App(props) {
@@ -224,7 +229,7 @@ function App(props) {
         <main className={classs.content}>
           <div className={classs.toolbar} />
           <Grow in>
-            <div>
+            <div className={classs.growDiv}>
               <Suspense fallback={<CircularProgress />}>
                 <Router>
                   <Switch>

diff --git a/client/src/components/Auth/SignIn/SignIn.js b/client/src/components/Auth/SignIn/SignIn.js
@@ -78,7 +78,7 @@ function SignIn(props) {
   return (
     <>
       <div className={styles.parent}>
-        <div className="left-child-section">
+        <div className={styles.leftChildSection}>
           <div>
             {/* <p id={styles.desc}>
               Athavani/Memories is a place to save all
@@ -94,7 +94,7 @@ function SignIn(props) {
             </div>
           </div>
         </div>
-        <div className="right-child-section">
+        <div className={styles.rightChildSection}>
           <div className={styles.SignIn} style={{ marginTop: "5%" }}>
             <div className={styles.SignImage}>
               <img

diff --git a/client/src/components/Auth/SignIn/SignIn.module.css b/client/src/components/Auth/SignIn/SignIn.module.css
@@ -1,9 +1,14 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
 
 .parent {
+  position: absolute;
+  top:0;
+  left: 0;
   display: flex;
-  justify-content: space-evenly;
   align-items: center;
+  justify-content: center;
+  height: 100%;
+  width:100%;
 }
 
 #desc {
@@ -186,12 +191,12 @@
 .link:hover {
   text-decoration: underline;
 }
+.leftChildSection{
+  display: none;
+}
 
 @media only screen and (max-width: 930px) {
-  .parent {
-    flex-direction: column;
-    align-items: inherit;
-  }
+
 
   .SignIn {
     padding: 2rem;
@@ -204,6 +209,7 @@
   }
 }
 
+
 @media only screen and (max-width: 430px) {
   .SignIn {
     /* margin-top: 17%; */
@@ -226,4 +232,17 @@
     width: 100%;
     font-size: 0.8rem;
   }
+  .rightChildSection{
+    width: 95%;
+  }
+}
+
+
+@media screen and (min-width : 1024px) {
+  .parent{ 
+     justify-content: space-evenly;
+  }
+  .leftChildSection{
+    display: block;
+  }
 }
diff --git a/client/src/components/Auth/SignUp/SignUp.js b/client/src/components/Auth/SignUp/SignUp.js
@@ -146,7 +146,7 @@ function SignUp(props) {
 
   return (
     <div className={styles.parent}>
-      <div className="left-child-section">
+      <div className={styles.leftChildSection}>
         <div>
           {/* <p id={styles.desc}>
               Athavani/Memories is a place to save all
@@ -162,7 +162,7 @@ function SignUp(props) {
           </div>
         </div>
       </div>
-      <div className="right-child-section">
+      <div className={styles.rightChildSection}>
         <div className={styles.SignUp} style={{ marginTop: "5%" }}>
           <div className={styles.SignImage}>
             <img

diff --git a/client/src/components/Auth/SignUp/SignUp.module.css b/client/src/components/Auth/SignUp/SignUp.module.css
@@ -1,9 +1,14 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
 
 .parent {
+  position: absolute;
+  top:0;
+  left: 0;
   display: flex;
-  justify-content: space-evenly;
   align-items: center;
+  justify-content: center;
+  height: 100%;
+  width:100%;
 }
 
 .SignUp {
@@ -156,6 +161,9 @@
 .link:hover {
   text-decoration: underline;
 }
+  .leftChildSection{
+    display: none;
+  }
 
 @media only screen and (max-width: 630px) {
   .SignUp {
@@ -170,10 +178,6 @@
 }
 
 @media only screen and (max-width: 430px) {
-  .parent {
-    flex-direction: column;
-    align-items: inherit;
-  }
 
   .SignUp {
     /* margin-top: 17%; */
@@ -206,4 +210,18 @@
     font-size: 0.8rem;
     margin-top: 6%;
   }
+   .rightChildSection{
+    width: 95%;
+  }
 }
+
+
+
+@media screen and (min-width : 1024px) {
+  .parent{ 
+     justify-content: space-evenly;
+  }
+  .leftChildSection{
+    display: block;
+  }
+}