Merge branch 'cleanup'

src/components/Login/Login.jsx

@@ -1,7 +1,7 @@
 import {useReducer, useRef, useEffect} from 'react'
 import { useHistory, withRouter} from 'react-router-dom';
 import {useUserContext} from '../../contexts/UserContext'
-import {Button, Grid, TextField} from '@material-ui/core'
+import {Button, Grid, Card, TextField} from '@material-ui/core'
 import getDesktopLoginStyles from '../../styles/DesktopStyles/desktopLoginStyles'
 import coreStyles from '../../styles/coreStyles'
 import getMobileLoginStyles from '../../styles/MobileStyles/mobileLoginStyles'
@@ -189,20 +189,17 @@ function Login(props) {
         if(currModal.current !== 'login'){
             setModalStyles('login')
         }
-
     }
 
     return (
       <Grid container className={styles.appBackground}>  
-        <Grid item
-
-            style={{backgroundColor: 'white', height: 713}}
-            elevation={1} className={modalStyles.modal}
+        <Card item
+            elevation={2} className={modalStyles.modal}
         >
             <Grid
-                style={{height:'100%',}}
-                container direction="column"
+                className={modalStyles.modalUIContainer} direction="column"
                 justify="space-evenly" alignItems="center"
+                container
 
             >
                 <img src={logo} alt="Mondo Robot logo" className={modalStyles.mondoLogo}/>
@@ -263,7 +260,7 @@ function Login(props) {
                     </Button> 
                 </div>                   
             </Grid>
-        </Grid>
+        </Card>
       </Grid>
     )
 }

src/styles/DesktopStyles/desktopLoginStyles.js

@@ -1,24 +1,20 @@
 import {makeStyles} from '@material-ui/core/styles'
 import mondoTheme from '../mondoTheme'
 import modalStyles from '../modalStyles'
+import general from '../GeneralProperties/generalLoginProperties'
 
 const getDesktopLoginStyles = makeStyles(({
     modal: {
-        textAlign: 'center',
         width: '42.15%',
         minHeight: '69.62vh',
         maxHeight: '69.62vh',
-        backgroundColor: 'white',
-        overflow: 'hidden',
         position: 'relative',
         top: '8.8vh',
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        boxShadow: "0px 23px 30px -9px #0000002B",
-        padding: 0,
-        marginBottom: 0,
+        ...general.modal
     },
 
+    modalUIContainer: general.modalUIContainer,
+
     mondoLogo:{
         maxWidth: 233,
         padding: 0,
@@ -58,6 +54,7 @@ const getDesktopLoginStyles = makeStyles(({
         fontFamily: 'Helvetica Bold',
         height: '43.83%',
     },
+
 }))
 
 export default getDesktopLoginStyles

src/styles/GeneralProperties/generalLoginProperties.js

@@ -0,0 +1,58 @@
+const generalLoginStyles = {
+    modal: {
+        textAlign: 'center',
+        backgroundColor: 'white',
+        position: 'relative',
+        backgroundColor: 'white',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        padding: 0,
+        marginBottom: 0,
+    },
+
+    modalUIContainer: {
+        height:'100%',
+    },
+
+    mondoLogo:{
+        maxWidth: 233,
+        padding: 0,
+        marginBottom: 0,
+    },
+
+    inputContainer: {
+        minWidth: '82.37%',
+        maxWidth: '82.37%',
+        minHeight: '25.82%',
+        maxHeight: '25.82%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-evenly',
+        padding: 0,
+        marginBottom: 0,
+    },
+
+    textInput: {
+        fontSize: 40
+    },
+
+    buttonContainer: {
+        minWidth: '82.3%',
+        maxWidth: '82.3%',
+        minHeight: '20.47%',
+        maxHeight: '20.47%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: 0,
+        marginBottom: 0,
+    },
+
+    button:{
+        textTransform: 'none',
+        fontFamily: 'Helvetica Bold',
+        height: '43.83%',
+    },
+}
+
+export default generalLoginStyles

src/styles/MobileStyles/mobileLoginStyles.js

@@ -1,25 +1,20 @@
 import {makeStyles} from '@material-ui/core/styles'
 import mondoTheme from '../mondoTheme'
+import general from '../GeneralProperties/generalLoginProperties'
 
 const mobileLoginStyles = makeStyles((theme = mondoTheme)=>({
     modal: {
-        textAlign: 'center',
         minWidth: '100vw',
         maxWidth: '100vw',
         minHeight: '100vh',
         maxHeight: '100vh',
-        backgroundColor: theme.palette.white.main,
-        overflow: 'hidden',
-        flexDirection: 'column',
         position: 'relative',
         top: 0,
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        boxShadow: "0px 23px 30px -9px #0000002B",
-        padding: 0,
-        marginBottom: 0,
+        ...general.modal
     },
 
+    modalUIContainer: general.modalUIContainer,
+
     mondoLogo:{
         maxWidth: 165,
         padding: 0,
@@ -59,6 +54,7 @@ const mobileLoginStyles = makeStyles((theme = mondoTheme)=>({
         fontFamily: 'Helvetica Bold',
         height: '43.83%',
     },
+
 }))
 
 export default mobileLoginStyles

src/styles/TabletStyles/tabletLoginStyles.js

@@ -1,27 +1,19 @@
 import {makeStyles} from '@material-ui/core/styles'
 import mondoTheme from '../mondoTheme'
-
-const x = {
-    tom: '79.03%'
-}
+import general from '../GeneralProperties/generalLoginProperties'
 
 const getTabletLoginStyles = makeStyles((theme = mondoTheme)=>({
     modal: {
-        textAlign: 'center',
         minWidth: '79.03%',
         minHeight: '69.62vh',
         maxHeight: '69.62vh',
-        backgroundColor: theme.palette.white.main,
-        overflow: 'hidden',
         position: 'relative',
         top: '8.8vh',
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        boxShadow: "0px 23px 30px -9px #0000002B",
-        padding: 0,
-        marginBottom: 0,
+        ...general.modal
     },
 
+    modalUIContainer: general.modalUIContainer,
+
     mondoLogo:{
         maxWidth: 233,
         padding: 0,
@@ -61,6 +53,7 @@ const getTabletLoginStyles = makeStyles((theme = mondoTheme)=>({
         fontFamily: 'Helvetica Bold',
         height: '43.83%',
     },
+
 }))
 
 export default getTabletLoginStyles

src/styles/modalStyles.js

@@ -16,6 +16,10 @@ const modalStyles = makeStyles((theme = mondoTheme)=>({
         marginBottom: 0,
     },
 
+    modalUIContainer: {
+        height:'100%'
+    },
+
     mondoLogo:{
         maxWidth: 233,
         padding: 0,