simplify footer, shows legal stuff as hover pop up

client/src/components/common/Footer.js

@@ -1,31 +1,86 @@
 import React from 'react';
 
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import {makeStyles} from '@material-ui/core/styles';
 
-import { COLORS } from '../../constants/appConstants';
+import {COLORS} from '../../constants/appConstants';
+import Popover from '@material-ui/core/Popover';
 
 const useStyles = makeStyles(theme => ({
     footer: {
         backgroundColor: '#3F51BA',
         color: COLORS.WHITE,
-        padding: theme.spacing(5),
+        padding: '1em',
         overflow: 'hidden',
-        left: 0,
+        width: '100%',
         bottom: 0,
         position: 'absolute'
-    }
-  }));
+    },
+    popover: {
+        pointerEvents: 'none',
+    },
+    paper: {
+        width: '80%',
+        padding: theme.spacing(1),
+    },
+}));
 
 const Footer = () => {
-    
+
     const classes = useStyles();
 
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    const handlePopoverOpen = event => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handlePopoverClose = () => {
+        setAnchorEl(null);
+    };
+
+    const open = Boolean(anchorEl);
+
     return (
         <div className={classes.footer}>
-            <Typography variant="subtitle1" align="center" color="white" component="p">
-            Plannify is provided by CSESoc UNSW and associated contributors "as is" and In no event shall CSESoc and associated contributors be held liable for any direct, indirect, incidental, special, exemplary or consequential damages (including, but not limited to, program planning complications and the misrepresentation of UNSW handbook information) however caused and on any theory of liability, whether in contract, strict liability, or tort (including negligence or otherwise) arising in any way out of the use of this software, even if advised of the possibility of such damage.
+            <Typography
+                variant="subtitle1" align="center" color="white" component="p"
+                aria-owns={open ? 'mouse-over-popover' : undefined}
+                aria-haspopup="true"
+                onMouseEnter={handlePopoverOpen}
+                onMouseLeave={handlePopoverClose}
+            >
+                Made with ♥️ by CSESoc UNSW
             </Typography>
+            <Popover
+                id="mouse-over-popover"
+                className={classes.popover}
+                classes={{
+                    paper: classes.paper,
+                }}
+                open={open}
+                anchorEl={anchorEl}
+                anchorOrigin={{
+                    vertical: 'center',
+                    horizontal: 'center',
+                }}
+                transformOrigin={{
+                    vertical: 'center',
+                    horizontal: 'center',
+                }}
+                onClose={handlePopoverClose}
+                disableRestoreFocus
+            >
+                <Typography>
+                    Plannify is provided by CSESoc UNSW and associated contributors "as is" and In no event
+                    shall CSESoc and associated contributors be held liable for any direct, indirect, incidental,
+                    special, exemplary or consequential damages (including, but not limited to, program planning
+                    complications and the misrepresentation of UNSW handbook information) however caused and on any
+                    theory of liability, whether in contract, strict liability, or tort (including negligence or
+                    otherwise) arising in any way out of the use of this software, even if advised of the possibility of
+                    such damage.
+                </Typography>
+            </Popover>
         </div>
     );
 }

client/src/components/planner/DegreeInputForm.js

@@ -7,7 +7,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
     form: {
-
+        padding: '0 5%',
     }
 });
 
@@ -50,7 +50,7 @@ export default function DegreeInputForm() {
         }
         setMinor(value);
     };
-    
+
     const degreeList = {
       "Bachelor of Engineering (Honours)": 3707,
       "Bachelor of Arts": 3409
@@ -73,8 +73,8 @@ export default function DegreeInputForm() {
             <form className={classes.form} autoComplete="off">
               <Grid container spacing={3}>
                 <Grid item xs={12}>
-                  <FormControl className="degree_selector_formcontrol">
-                    <InputLabel htmlFor="degree">Degree</InputLabel>
+                  <FormControl fullWidth className="degree_selector_formcontrol">
+                    <InputLabel  htmlFor="degree">Degree</InputLabel>
                     <Select
                       native
                       value={degree}
@@ -90,7 +90,7 @@ export default function DegreeInputForm() {
                   </FormControl>
                 </Grid>
                 <Grid item xs={12}>
-                  <FormControl className="major_selector_formcontrol">
+                  <FormControl fullWidth className="major_selector_formcontrol">
                     <InputLabel htmlFor="major">Major</InputLabel>
                     <Select
                       native
@@ -107,7 +107,7 @@ export default function DegreeInputForm() {
                   </FormControl>
                 </Grid>
                 <Grid item xs={12}>
-                  <FormControl className="minor_selector_formcontrol">
+                  <FormControl fullWidth className="minor_selector_formcontrol">
                     <InputLabel htmlFor="minor">Minor</InputLabel>
                     <Select
                       native