Remove style and redundant theme import.

src/components/Dashboard/ReservationPage/ReservationPage.tsx

 import React, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import {
-  CssBaseline,
   Grid,
   Typography,
-  Hidden,
-  createMuiTheme,
-  responsiveFontSizes,
-  MuiThemeProvider,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
-  TextField,
   Button,
 } 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';
 import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
 import { useReservations } from 'hooks/useReservations';
 import { ReservationProps } from 'components/Dashboard/ReservationPage/Reservation/ReservationProps';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { InputField } from 'components/Auth/InputField/InputField';
-
-let themeResp = createMuiTheme();
-themeResp = responsiveFontSizes(themeResp);
-
-const useStyles = makeStyles(() => ({
-  root: {
-    minHeight: '36vh',
-    backgroundImage: `url(${'/assets/bg7.png'})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: 'cover',
-  },
-  rightAlign: {
-    marginLeft: 'auto',
-  },
-  whiteText: {
-    color: 'white',
-  },
-  imageIcon: {
-    maxHeight: '50%',
-  },
-  paddingBottom: {
-    paddingBottom: '65px',
-  },
-  paddingTop: {
-    paddingTop: '65px',
-  },
-  bodyIcon: {
-    fontSize: '90px',
-    paddingBottom: '10px',
-    paddingTop: '10px',
-  },
-  contIcon: {
-    width: '100%',
-    left: '0',
-    right: '0',
-  },
-  noShadow: {
-    border: 'none',
-    boxShadow: 'none',
-    backgroundColor: 'transparent',
-  },
-  extendedIcon: {
-    fontSize: '50px',
-  },
-  fab: {
-    margin: '1.5em',
-    bottom: '0',
-    right: '0',
-    position: 'fixed',
-    fontSize: '2em',
-    padding: '1.5em',
-  },
-}));
+import { useStyles } from './ReservationPage.style';
 
 export const ReservationPage: FC = () => {
   const classes = useStyles();
@@ -105,8 +45,6 @@ export const ReservationPage: FC = () => {
     <div data-testid="Reservation">
       <Grid container direction="column" className={classes.paddingBottom}>
         <div className={classes.root}>
-          <CssBaseline />
-
           <Grid item>
             <NavBar />
           </Grid>
@@ -166,22 +104,20 @@ export const ReservationPage: FC = () => {
             </form>
           </Dialog>
 
-          <MuiThemeProvider theme={themeResp}>
-            <Grid item container className={classes.paddingBottom}>
-              <Grid item xs={1} md={2} lg={2} />
+          <Grid item container className={classes.paddingBottom}>
+            <Grid item xs={1} md={2} lg={2} />
 
-              <Grid item xs={10} md={6} lg={4}>
-                <Typography variant="h2" className={classes.whiteText}>
-                  Plan Here Your
-                </Typography>
-                <Typography variant="h1" className={classes.whiteText}>
-                  RESERVATIONS
-                </Typography>
-              </Grid>
-
-              <Grid item xs={1} />
+            <Grid item xs={10} md={6} lg={4}>
+              <Typography variant="h2" className={classes.whiteText}>
+                Plan Here Your
+              </Typography>
+              <Typography variant="h1" className={classes.whiteText}>
+                RESERVATIONS
+              </Typography>
             </Grid>
-          </MuiThemeProvider>
+
+            <Grid item xs={1} />
+          </Grid>
         </div>
 
         <Fab