added a grid container to bottom of contact form with a height equiva…

…lent to the footer to compensate for a fixed positioned footer that blocks visibility of portions of the contact form, namely submit button
hackforla · Sep 7, 2022 · 595319c · 595319c
1 parent c0a2caf
commit 595319c
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/client/components/contact/ContactForm.jsx b/client/components/contact/ContactForm.jsx
@@ -9,9 +9,16 @@ import {
   Button,
   TextField,
   CircularProgress,
+  makeStyles,
 } from '@material-ui/core';
 import 'react-toastify/dist/ReactToastify.css';
 
+const useStyles = makeStyles(theme => ({
+  footer: {
+    height: theme.footer.height,
+  },
+}));
+
 const initialFormValues = {
   firstName: '',
   lastName: '',
@@ -39,6 +46,8 @@ const toastEmitterSettings = {
 };
 
 const ContactForm = () => {
+  const classes = useStyles();
+
   const dispatch = useDispatch();
 
   // mapStateToProps equivalent.
@@ -251,6 +260,7 @@ const ContactForm = () => {
               Submit
             </Button>
           </Grid>
+          <Grid container direction="column" alignItems="center" justifyContent="center" className={classes.footer} />
         </Grid>
       </form>
     </Container>