diff --git a/src/components/AuthUser/Dashboard/Dashboard.tsx b/src/components/AuthUser/Dashboard/Dashboard.tsx
index 452ed8fe75e028537f14cda215f819de93566e8e..5e0c5895bc303b31e5becefb0f61fa023d9bc9c3 100644
--- a/src/components/AuthUser/Dashboard/Dashboard.tsx
+++ b/src/components/AuthUser/Dashboard/Dashboard.tsx
@@ -4,13 +4,18 @@ import { Route, useRouteMatch } from 'react-router-dom';
import { AuthRoutes } from 'api/routes';
import { HomePage } from 'components/AuthUser/Dashboard/HomePage/HomePage';
import { ProfilePage } from 'components/AuthUser/Dashboard/ProfilePage/ProfilePage';
+import { ReservationPage } from 'components/AuthUser/Dashboard/ReservationPage/ReservationPage';
export const Dashboard: FC = () => {
const { path } = useRouteMatch();
return (
- <Container maxWidth="sm">
+ <>
<Route exact path={`${path}${AuthRoutes.home}`} component={HomePage} />
<Route path={`${path}${AuthRoutes.profile}`} component={ProfilePage} />
- </Container>
+ <Route
+ path={`${path}${AuthRoutes.reservation}`}
+ component={ReservationPage}
+ />
+ </>
);
};
diff --git a/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx b/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx
index 972aa96cb568187105ff752f659aeb72fbe89c70..49e246d6dd5795cf7e1f523bf0d967eff06fc57a 100644
--- a/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx
+++ b/src/components/AuthUser/Dashboard/HomePage/HomePage.tsx
@@ -1,111 +1,131 @@
import React, { FC } from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
-
-import { AuthRoutes } from 'api/routes';
+import { makeStyles } from '@material-ui/core/styles';
import {
- AppBar,
- Toolbar,
+ CssBaseline,
+ Grid,
Typography,
- Button,
- Drawer,
- List,
- ListItem,
- ListItemText,
+ Hidden,
+ createMuiTheme,
+ responsiveFontSizes,
+ MuiThemeProvider,
+ Container,
} from '@material-ui/core';
-import { Link } from 'react-router-dom';
+import { MapElement } from 'components/AuthUser/Dashboard/HomePage/MapElement';
+import { NavBarLogin } from 'components/AuthUser/Dashboard/HomePage/NavBarLogin';
+import { Numbers } from 'components/AuthUser/Dashboard/HomePage/Numbers';
+import { Steps } from 'components/AuthUser/Dashboard/HomePage/Steps';
+import { NavBar } from 'components/AuthUser/Dashboard/HomePage/NavBar';
+import { Reservation } from 'components/AuthUser/Dashboard/ReservationPage/Reservation/Reservation';
-const drawerWidth = 240;
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- display: 'flex',
- },
- appBar: {
- zIndex: theme.zIndex.drawer + 1,
- },
- drawer: {
- width: drawerWidth,
- flexShrink: 0,
- },
- drawerPaper: {
- width: drawerWidth,
- },
- drawerContainer: {
- overflow: 'auto',
- },
- content: {
- flexGrow: 1,
- padding: theme.spacing(3),
- },
- }),
-);
+const useStyles = makeStyles(() => ({
+ root: {
+ minHeight: '100vh',
+ backgroundImage: `url(${'/assets/bg3.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',
+ },
+}));
export const HomePage: FC = () => {
const classes = useStyles();
return (
- <div className={classes.root}>
- <AppBar position="fixed" className={classes.appBar}>
- <Toolbar>
- <Typography variant="h6" noWrap>
- Moveaid
+ <Grid container direction="column" className={classes.paddingBottom}>
+ <div className={classes.root}>
+ <CssBaseline />
+
+ <Grid item>
+ <NavBar />
+ </Grid>
+
+ <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}>
+ Book Free Rides Now With
+ </Typography>
+ <Typography variant="h1" className={classes.whiteText}>
+ MOVE AID
+ </Typography>
+ </Grid>
+
+ <Grid item xs={false} md={3} lg={5}>
+ <Hidden mdDown>
+ <Container>
+ <MapElement />
+ </Container>
+ </Hidden>
+ </Grid>
+
+ <Grid item xs={1} />
+ </Grid>
+
+ <Steps />
+ </MuiThemeProvider>
+ </div>
+
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3">Your Next Reservation</Typography>
+ </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 />
+ </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>
- <Button variant="contained">
- <Link to={`/dashboard${AuthRoutes.profile}`}>Profile</Link>
- </Button>
- </Toolbar>
- </AppBar>
- <Drawer
- className={classes.drawer}
- variant="permanent"
- classes={{
- paper: classes.drawerPaper,
- }}
- >
- <Toolbar />
- <div className={classes.drawerContainer}>
- <List>
- {['Reservation'].map((text) => (
- <ListItem button key={text}>
- <ListItemText primary={text} />
- </ListItem>
- ))}
- </List>
- </div>
- </Drawer>
- <main className={classes.content}>
- <Toolbar />
- <Typography paragraph>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus
- dolor purus non enim praesent elementum facilisis leo vel. Risus at
- ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum
- quisque non tellus. Convallis convallis tellus id interdum velit
- laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed
- adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies
- integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate
- eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo
- quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat
- vivamus at augue. At augue eget arcu dictum varius duis at consectetur
- lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien
- faucibus et molestie ac.
- </Typography>
- <Typography paragraph>
- Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
- ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
- elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse
- sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat
- mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis
- risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas
- purus viverra accumsan in. In hendrerit gravida rutrum quisque non
- tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant
- morbi tristique senectus et. Adipiscing elit duis tristique
- sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
- eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
- posuere sollicitudin aliquam ultrices sagittis orci a.
- </Typography>
- </main>
- </div>
+ </Grid>
+ <Grid item xs={2} />
+ </Grid>
+
+ <Numbers />
+ </Grid>
);
};
diff --git a/src/components/AuthUser/Dashboard/HomePage/NavBar.tsx b/src/components/AuthUser/Dashboard/HomePage/NavBar.tsx
index 3d61c755d485269fafd3f0e547f58782e71c574f..e05702fe0be796606d802702a5b88f2d9276c5b8 100644
--- a/src/components/AuthUser/Dashboard/HomePage/NavBar.tsx
+++ b/src/components/AuthUser/Dashboard/HomePage/NavBar.tsx
@@ -4,6 +4,8 @@ import { Tabs, Tab } from '@material-ui/core';
import HomeIcon from '@material-ui/icons/Home';
import ImportContactsIcon from '@material-ui/icons/ImportContacts';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import { AuthRoutes } from 'api/routes';
+import { useHistory } from 'react-router-dom';
const useStyles = makeStyles(() => ({
tabs: {
@@ -29,15 +31,17 @@ const useStyles = makeStyles(() => ({
}));
export const NavBar: FC = () => {
+ const history = useHistory();
const classes = useStyles();
- const [value, setValue] = React.useState(0);
+ const [value, setValue] = React.useState<string>('');
const handleChange = (
event: React.ChangeEvent<unknown>,
- newValue: number,
+ newValue: string,
): void => {
setValue(newValue);
+ history.replace(newValue);
};
return (
@@ -51,16 +55,19 @@ export const NavBar: FC = () => {
>
<Tab
label="HomePage"
+ value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
icon={<HomeIcon className={classes.tabIcon} />}
className={classes.tabPan}
/>
<Tab
label="Reservation"
+ value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
icon={<ImportContactsIcon className={classes.tabIcon} />}
className={`${classes.tabPan} ${classes.rightAlign}`}
/>
<Tab
label="Profile"
+ value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
className={classes.tabPan}
icon={<AccountCircleIcon className={classes.tabIcon} />}
/>