From 2bbdc4f33a4e2aa6fbcfa848735fc5872e5a9641 Mon Sep 17 00:00:00 2001
From: Francesco <fmazzini@unibz.it>
Date: Mon, 21 Jun 2021 21:35:11 +0200
Subject: [PATCH] Restyle Reservation Dialog
---
src/App.tsx | 2 +-
.../ReservationPage/Reservation/TripStage.tsx | 10 ++++++++--
.../ReservationPage/ReservationDialog.tsx | 18 ++++++++++++++----
.../ReservationPage/ReservationListViewer.tsx | 2 +-
.../ReservationPage/ReservationPage.style.ts | 6 ++++++
.../ReservationPage/ReservationPage.tsx | 12 +++++++++---
6 files changed, 39 insertions(+), 11 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 0c65dd5..570f867 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx b/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx
index 71772e5..dbe9106 100644
--- a/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx
+++ b/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={{
diff --git a/src/components/Dashboard/ReservationPage/ReservationDialog.tsx b/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
index ba5914d..0cb20f7 100644
--- a/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
+++ b/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>
diff --git a/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx b/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
index a169057..37c9635 100644
--- a/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
@@ -1,5 +1,5 @@
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';
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
index 3781776..a380c8f 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
+++ b/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',
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index 55b8051..fea77db 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/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>
--
GitLab