diff --git a/src/components/Dashboard/HomePage/HomePage.tsx b/src/components/Dashboard/HomePage/HomePage.tsx
index 94f1eb7c9ed64465e724d768f8aa600096bc90f4..61192524f268d6af26893c3642f9023955c89d89 100644
--- a/src/components/Dashboard/HomePage/HomePage.tsx
+++ b/src/components/Dashboard/HomePage/HomePage.tsx
@@ -98,32 +98,33 @@ export const HomePage: FC = () => {
</MuiThemeProvider>
</div>
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3">Your Next Reservation</Typography>
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h2">Your Next Reservation</Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
- <Grid item container style={{ paddingTop: '20px' }}>
- <Grid item xs={1} lg={2} />
- <Grid item xs={10} lg={8}>
- <Reservation departure="" destination="" time="" date="" />
+ <Grid item container style={{ paddingTop: '20px' }}>
+ <Grid item xs={1} lg={2} />
+ <Grid item xs={10} lg={8}>
+ <Reservation departure="" destination="" time="" date="" />
+ </Grid>
+ <Grid item xs={1} lg={2} />
</Grid>
- <Grid item xs={1} lg={2} />
- </Grid>
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3" align="right">
- Some Our Numbers
- </Typography>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h2" align="right">
+ Some Our Numbers
+ </Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
-
+ </MuiThemeProvider>
<Numbers />
</Grid>
);
diff --git a/src/components/Dashboard/HomePage/Numbers.tsx b/src/components/Dashboard/HomePage/Numbers.tsx
index 20f38c870d04171411e355d21afe7ca52efba788..4b474250339e2fedad7a25f9c1839ffc5de600d1 100644
--- a/src/components/Dashboard/HomePage/Numbers.tsx
+++ b/src/components/Dashboard/HomePage/Numbers.tsx
@@ -69,9 +69,17 @@ export const Numbers: FC = () => {
300
</Typography>
- <Typography variant="h6" align="center">
- Rides Offered
- </Typography>
+ <Hidden smDown>
+ <Typography variant="h6" align="center">
+ Rides Offered
+ </Typography>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Typography variant="h6" align="center">
+ Rides
+ </Typography>
+ </Hidden>
</CardContent>
</Grid>
@@ -92,12 +100,20 @@ export const Numbers: FC = () => {
</Grid>
<Typography variant="h4" align="center">
- 25000
+ 2500
</Typography>
- <Typography variant="h6" align="center">
- Kilometers
- </Typography>
+ <Hidden smDown>
+ <Typography variant="h6" align="center">
+ Kilometers
+ </Typography>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Typography variant="h6" align="center">
+ Kms
+ </Typography>
+ </Hidden>
</CardContent>
</Grid>
@@ -125,9 +141,17 @@ export const Numbers: FC = () => {
225
</Typography>
- <Typography variant="h6" align="center">
- People who used our service
- </Typography>
+ <Hidden smDown>
+ <Typography variant="h6" align="center">
+ People who used our service
+ </Typography>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Typography variant="h6" align="center">
+ Users
+ </Typography>
+ </Hidden>
</CardContent>
</Grid>
diff --git a/src/components/Dashboard/ProfilePage/ProfilePage.tsx b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
index e3fb1b9271a4ea6cbe29a1128a638816876cddf6..d07c1617747c1af1a2231eb401eb7f104c0865fe 100644
--- a/src/components/Dashboard/ProfilePage/ProfilePage.tsx
+++ b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
@@ -12,12 +12,6 @@ import {
createMuiTheme,
responsiveFontSizes,
MuiThemeProvider,
- Container,
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
TextField,
Button,
Select,
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
index c3d2fca6c309c408222292a499d1d07903da935b..4aa65afc797e3a17042eec6d900725899924b0c4 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
@@ -41,11 +41,19 @@ export const useStyles = makeStyles(() => ({
fontSize: '50px',
},
fab: {
- margin: '1.5em',
+ margin: '1.9em',
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',
+ },
}));
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index c4e5ee210c76474ce3a451ed6a724fc3bae68457..df2572ea2b462bdfcfc6fe3b09aa4cf51cdf473f 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
@@ -7,7 +7,11 @@ import {
DialogContent,
DialogContentText,
DialogTitle,
+ Hidden,
Button,
+ MuiThemeProvider,
+ createMuiTheme,
+ responsiveFontSizes,
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';
@@ -20,6 +24,9 @@ import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from './ReservationPage.style';
import { ReservationDialog } from './ReservationDialog';
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
+
export const ReservationPage: FC = () => {
const classes = useStyles();
const { control, handleSubmit } = useForm<ReservationProps>();
@@ -51,53 +58,70 @@ export const ReservationPage: FC = () => {
</Grid>
<ReservationDialog handleClose={handleClose} isOpen={isOpen} />
- <Grid item container className={classes.paddingBottom}>
- <Grid item xs={1} md={2} lg={2} />
+ <MuiThemeProvider theme={themeResp}>
+ <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={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Plan Here Your
+ </Typography>
+ <Typography variant="h2" className={classes.whiteText}>
+ RESERVATIONS
+ </Typography>
+ </Grid>
- <Grid item xs={1} />
- </Grid>
+ <Grid item xs={1} />
+ </Grid>
+ </MuiThemeProvider>
</div>
- <Fab
- color="primary"
- size="large"
- aria-label="add"
- className={classes.fab}
- onClick={handleOpen}
- >
- <AddIcon className={classes.extendedIcon} />
- </Fab>
-
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3">Your Next Reservations</Typography>
+ <Hidden smDown>
+ <Fab
+ color="primary"
+ size="large"
+ className={classes.fab}
+ onClick={handleOpen}
+ >
+ <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>
+
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3">Your Next Reservations</Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
- <Reservation departure="" destination="" time="" date="" />
+ <Reservation departure="" destination="" time="" date="" />
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3" align="right">
- Your Past Reservations
- </Typography>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3" align="right">
+ Your Past Reservations
+ </Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
- <Reservation departure="" destination="" time="" date="" />
+ <Reservation departure="" destination="" time="" date="" />
+ </MuiThemeProvider>
</Grid>
</div>
);