Responsive tweaks.

src/components/Dashboard/ReservationPage/ReservationPage.style.ts

@@ -47,19 +47,11 @@ export const reservationPageStyle = makeStyles(() => ({
     fontSize: '50px',
   },
   fab: {
-    margin: '1.9em',
+    margin: '5vw',
     bottom: '0',
     right: '0',
     position: 'fixed',
     fontSize: '2em',
     padding: '1.5em',
   },
-  fabSmall: {
-    margin: '1.4em',
-    bottom: '0',
-    right: '0',
-    position: 'fixed',
-    fontSize: '1.7em',
-    padding: '1.4em',
-  },
 }));

src/components/Dashboard/ReservationPage/ReservationPage.tsx

 import React, { FC } from 'react';
-import { Grid, Typography, Hidden } from '@material-ui/core';
+import { Grid, Typography } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import Fab from '@material-ui/core/Fab';
 import { NavBar } from 'components/Dashboard/HomePage/NavBar';
@@ -28,29 +28,15 @@ export const ReservationPage: FC = () => {
         <ReservationPageHeader />
         <ReservationDialog handleClose={handleClose} isOpen={isOpen} />
 
-        <Hidden smDown>
-          <Fab
-            color="primary"
-            size="large"
-            className={classes.fab}
-            onClick={handleOpen}
-            aria-label="Add New Reservations"
-          >
-            <AddIcon className={classes.extendedIcon} />
-          </Fab>
-        </Hidden>
-
-        <Hidden mdUp>
-          <Fab
-            color="primary"
-            size="large"
-            aria-label="add"
-            className={classes.fabSmall}
-            onClick={handleOpen}
-          >
-            <AddIcon className={classes.extendedIcon} />
-          </Fab>
-        </Hidden>
+        <Fab
+          color="primary"
+          size="large"
+          className={classes.fab}
+          onClick={handleOpen}
+          aria-label="Add New Reservations"
+        >
+          <AddIcon className={classes.extendedIcon} />
+        </Fab>
 
         <Grid item container className={classes.paddingTop}>
           <Grid item xs={1} lg={2} />