From 74f31bd02ed69a8aaa57161765b092ca1d73e803 Mon Sep 17 00:00:00 2001
From: Aaditya Gadiyar <gadiyaraadi22@gmail.com>
Date: Fri, 26 Mar 2021 12:32:32 +0530
Subject: [PATCH] removed some inline styles

---
 frontend/src/pages/Login.js  | 60 ++++++++++++++++++++++++++----------
 frontend/src/pages/SignUp.js | 42 ++++++++++++++++---------
 package-lock.json            |  3 ++
 3 files changed, 74 insertions(+), 31 deletions(-)
 create mode 100644 package-lock.json

diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.js
index 824f40e..8ac14c4 100644
--- a/frontend/src/pages/Login.js
+++ b/frontend/src/pages/Login.js
@@ -4,6 +4,7 @@ import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import InputBase from "@material-ui/core/InputBase";
 import Button from "@material-ui/core/Button";
+import TextField from '@material-ui/core/TextField';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Switch from '@material-ui/core/Switch';
 import { fetchUserDataFail, fetchUserDataSuccess, loginFail, loginSuccess } from '../redux'
@@ -55,7 +56,42 @@ const useStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(2),
     
   },
-  link: {textDecoration: 'None', color: 'inherit'}
+  link: {textDecoration: 'None', color: 'inherit'},
+  // left landing text
+  leftGridTypo:{
+    height:"30%",width:'80%', fontWeight:700
+  },
+  // web button group outer div
+  webButtonOuter:{
+    display:"flex",justifyContent:"center",marginTop:"14%"
+  },
+  // web button group inner div
+  webButtonInner:{
+    display:'flex',flexDirection:"column",marginLeft:"auto",marginRight:"auto"
+  },
+  // mobile view main grid
+  mobileGrid:{
+    backgroundColor: "#212020",
+    color: "white",
+    minHeight:"105vh",
+    borderRadius: "1rem",
+    boxShadow: "0px 0px 39px 10px rgba(255,255,255,0.09) ",
+    margin:"5% 0 5% 0",
+    position:"relative", marginLeft: "auto", marginRight:"auto"
+  },
+  // mobile background
+  mobBackground:{
+    background:"linear-gradient(to right,#255093,pink)"
+  },
+  // mobile button group
+  mobButtonGrp:{
+    display:'flex',
+    flexDirection:"column",
+    marginLeft:"auto",
+    marginRight:"auto",
+    minHeight:"12rem",
+    marginTop:"40%"
+  }
 }));
 
 export default function LoginPage() {
@@ -100,10 +136,10 @@ export default function LoginPage() {
       {matches?
         <Grid container item xs={4} className={classes.left} justify="center" alignItems="center">
           <Grid item className={classes.leftLanding} sm={5}>
-            <Typography variant="h5" style={{height:"30%",width:'80%', fontWeight:700}}>
+            <Typography variant="h5" className={classes.leftGridTypo}>
               Hello there {isFaculty?"Teacher":"Student"}
             </Typography>
-            <Typography variant="h4" style={{height:"30%",width:'80%', fontWeight:700}}>
+            <Typography variant="h4" className={classes.leftGridTypo}>
                 Welcome Back
             </Typography>
           </Grid>
@@ -142,8 +178,8 @@ export default function LoginPage() {
             />
 
 
-            <div style={{display:"flex",justifyContent:"center",marginTop:"14%"}}>
-              <div style={{display:'flex',flexDirection:"column",marginLeft:"auto",marginRight:"auto"}}>
+            <div className={classes.webButtonOuter}>
+              <div className={classes.webButtonInner}>
                 <Button onClick={handleSubmit} variant="contained" color="primary" style={{objectFit:"contain",maxHeight:"25%"}}>
                   Login
                 </Button>
@@ -167,17 +203,9 @@ export default function LoginPage() {
       </Grid>
       :
       // Mobile web view
-      <Grid container style={{background:"linear-gradient(to right,#255093,pink)"}}>
+      <Grid container className={classes.mobBackground}>
         <Grid container item xs={10} justify="center"
-          style={{
-              backgroundColor: "#212020",
-              color: "white",
-              minHeight:"105vh",
-              borderRadius: "1rem",
-              boxShadow: "0px 0px 39px 10px rgba(255,255,255,0.09) ",
-              margin:"5% 0 5% 0",
-              position:"relative", marginLeft: "auto", marginRight:"auto"
-          }}
+          className={classes.mobileGrid}
         >
           <Grid item xs={10} style={{marginTop:"30%"}}>
             <Typography style={{fontSize:"1.2rem",lineHeight:"1.4rem", fontWeight:700}} >
@@ -212,7 +240,7 @@ export default function LoginPage() {
                   className={classes.appInputBase}
                 />
               
-                <div style={{display:'flex',flexDirection:"column",marginLeft:"auto",marginRight:"auto",minHeight:"12rem",marginTop:"40%"}}>
+                <div className={classes.mobButtonGrp}>
                   <Button onClick={handleSubmit} variant="contained" color="primary" style={{height:"20%"}}>
                     Login
                   </Button>
diff --git a/frontend/src/pages/SignUp.js b/frontend/src/pages/SignUp.js
index 524ed39..f648a5c 100644
--- a/frontend/src/pages/SignUp.js
+++ b/frontend/src/pages/SignUp.js
@@ -55,7 +55,29 @@ const useStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(2),
     
   },
-  link: {textDecoration: 'None', color: 'inherit'}
+  link: {textDecoration: 'None', color: 'inherit'},
+  // having a tough time typo
+  havTypography:{
+    height:"30%",width:'100%', fontWeight:700
+  },
+  // you are at the typo
+  youTypography:{
+    height:"30%",width:'80%', fontWeight:700
+  },
+  // mobile view grid
+  mobGrid:{
+    backgroundColor: "#212020",
+    color: "white",
+    minHeight:"105vh",
+    borderRadius: "1rem",
+    boxShadow: "0px 0px 39px 10px rgba(255,255,255,0.09) ",
+    margin:"5% 0 5% 0",
+    position:"relative", marginLeft: "auto", marginRight:"auto"
+  },
+  // mobile Background
+  mobBackground:{
+    background:"linear-gradient(to right,#255093,pink)"
+  }
 }));
 const items = [
   ['CS', 'COMPUTERS'],
@@ -135,10 +157,10 @@ export default function SignupPage() {
       {matches?
         <Grid container item xs={4} className={classes.left} justify="center" alignItems="center">
           <Grid item className={classes.leftLanding} sm={7}>
-            <Typography variant="h5" style={{height:"30%",width:'100%', fontWeight:700}}>
+            <Typography variant="h5" className={classes.havTypography}>
               Having a tough time verifying pending documents?
             </Typography>
-            <Typography variant="h4" style={{height:"30%",width:'80%', fontWeight:700}}>
+            <Typography variant="h4" className={classes.youTypography}>
               You're at the <u>right place</u>
             </Typography>
           </Grid>
@@ -284,18 +306,8 @@ export default function SignupPage() {
       </Grid>
       :
       // Mobile  view
-      <Grid container style={{background:"linear-gradient(to right,#255093,pink)"}}>
-        <Grid container item xs={10} justify="center"
-          style={{
-              backgroundColor: "#212020",
-              color: "white",
-              minHeight:"105vh",
-              borderRadius: "1rem",
-              boxShadow: "0px 0px 39px 10px rgba(255,255,255,0.09) ",
-              margin:"5% 0 5% 0",
-              position:"relative", marginLeft: "auto", marginRight:"auto"
-          }}
-        >
+      <Grid container className={classes.mobBackground}>
+        <Grid container item xs={10} justify="center" className={classes.mobGrid}>
           <Grid item xs={10} style={{marginTop:"30%"}}>
             <div style={{position:"absolute",minHeight:"50px",minWidth:"50px",borderRadius:"50%",background:"linear-gradient(to right,#225093,white)",top:"24%",right:"6%"}}>
             </div>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..48e341a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}