Restyle Reservation Dialog

src/App.tsx

@@ -27,7 +27,7 @@ export const App: FC = () => {
           <Switch>
             <Route exact path={NonAuthRoutes.home} component={LandingPage} />
             <Route path={NonAuthRoutes.auth} component={AuthUser} />
-            <Route path={AuthRoutes.dashboard} component={All(Dashboard)} />
+            <Route path={AuthRoutes.dashboard} component={Dashboard} />
             <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
             <Route component={NotFound} />
           </Switch>

src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx

@@ -16,12 +16,14 @@ import {
   MuiPickersUtilsProvider,
   KeyboardDateTimePicker,
 } from '@material-ui/pickers';
+import { reservationPageStyle } from '../ReservationPage.style';
 
 type TripStageProps = {
   control: Control<ReservationType>;
 };
 
 export const TripStage: FC<TripStageProps> = ({ control }: TripStageProps) => {
+  const classes = reservationPageStyle();
   const [stage, setStage] = useState<string[]>(['']);
   const [value, setValue] = useState<string>('');
 
@@ -34,7 +36,11 @@ export const TripStage: FC<TripStageProps> = ({ control }: TripStageProps) => {
       <Card>
         {stage.map((field, index) => (
           <CardContent>
-            <Typography variant="h3" component="h3">
+            <Typography
+              variant="h6"
+              component="h3"
+              className={classes.paddingBottomKlein}
+            >
               Stage {index}
             </Typography>
             <Controller
@@ -56,7 +62,7 @@ export const TripStage: FC<TripStageProps> = ({ control }: TripStageProps) => {
                 <KeyboardDateTimePicker
                   margin="normal"
                   id="date-picker-dialog"
-                  label="Date picker dialog"
+                  label="Date and Hour"
                   defaultValue={field}
                   format="dd/MM/yyyy"
                   KeyboardButtonProps={{

src/components/Dashboard/ReservationPage/ReservationDialog.tsx

@@ -16,6 +16,7 @@ import { setReservation } from 'api/setReservation';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { SeniorSearch } from './Reservation/SeniorSearch/SeniorSearch';
 import { TripStage } from './Reservation/TripStage';
+import { reservationPageStyle } from './ReservationPage.style';
 
 type ReservationDialogProps = {
   handleClose: () => void;
@@ -25,6 +26,7 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
   handleClose,
   isOpen,
 }: ReservationDialogProps) => {
+  const classes = reservationPageStyle();
   const { control, handleSubmit } = useForm<ReservationType>({
     mode: 'onSubmit',
   });
@@ -52,7 +54,7 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
       >
         <form onSubmit={handleSubmit(onSubmit)} data-testid="Form">
           <DialogTitle id="form-dialog-title">
-            <Typography variant="h1" component="h1">
+            <Typography variant="h4" component="h1">
               Book New Reservation
             </Typography>
           </DialogTitle>
@@ -60,11 +62,19 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
             <DialogContentText>
               Write here below the details of your next reservation
             </DialogContentText>
-            <Typography variant="h2" component="h2">
+            <Typography
+              variant="h5"
+              component="h2"
+              className={`${classes.paddingBottomKlein} ${classes.paddingTopKlein}`}
+            >
               Search
             </Typography>
             <SeniorSearch senior={senior} setSenior={setSenior} />
-            <Typography variant="h2" component="h2">
+            <Typography
+              variant="h5"
+              component="h2"
+              className={`${classes.paddingBottomKlein} ${classes.paddingTopKlein}`}
+            >
               Trip stage
             </Typography>
             <TripStage control={control} />
@@ -73,7 +83,7 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
             <Button onClick={handleClose} color="primary">
               Cancel
             </Button>
-            <Button type="submit" fullWidth variant="contained" color="primary">
+            <Button type="submit" variant="contained" color="primary">
               Insert
             </Button>
           </DialogActions>

src/components/Dashboard/ReservationPage/ReservationListViewer.tsx

 import React, { FC } from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid, Hidden } from '@material-ui/core';
 import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
 import { useReservations } from 'hooks/useReservations';
 

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

@@ -19,9 +19,15 @@ export const reservationPageStyle = makeStyles(() => ({
   paddingBottom: {
     paddingBottom: '65px',
   },
+  paddingBottomKlein: {
+    paddingBottom: '15px',
+  },
   paddingTop: {
     paddingTop: '65px',
   },
+  paddingTopKlein: {
+    paddingTop: '35px',
+  },
   bodyIcon: {
     fontSize: '90px',
     paddingBottom: '10px',

src/components/Dashboard/ReservationPage/ReservationPage.tsx

@@ -71,11 +71,17 @@ export const ReservationPage: FC = () => {
         </Hidden>
 
         <Grid item container className={classes.paddingTop}>
-          <Grid item xs={2} />
-          <Grid item xs={8}>
+          <Grid item xs={1} lg={2} />
+          <Grid item xs={10} lg={8}>
             <Typography variant="h3">Your Next Reservations</Typography>
           </Grid>
-          <ReservationListViewer />
+          <Grid item xs={1} lg={2} />
+
+          <Grid item xs={1} lg={2} />
+          <Grid item xs={10} lg={8}>
+            <ReservationListViewer />
+          </Grid>
+          <Grid item xs={1} lg={2} />
         </Grid>
       </Grid>
     </div>