Finish Reservation Page

src/App.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import { HomePage2 } from './components/AuthUser/HomePage2/HomePage2';
+import { ReservationPage } from './components/AuthUser/Reservation/ReservationPage';
 
 const theme = createMuiTheme({
   palette: {
@@ -37,7 +38,7 @@ export const App: FC = () => (
       <Route path="/">
         <div data-testid="App">
           <ThemeProvider theme={theme}>
-            <HomePage2 />
+            <ReservationPage />
           </ThemeProvider>
         </div>
       </Route>

src/components/AuthUser/HomePage2/HomePage2.tsx

@@ -69,7 +69,7 @@ export const HomePage2: FC = () => {
         <CssBaseline />
 
         <Grid item>
-          <NavBarLogin />
+          <NavBar />
         </Grid>
 
         <MuiThemeProvider theme={themeResp}>

src/components/AuthUser/HomePage2/NavBar.tsx

 import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Tabs, Tab } from '@material-ui/core';
+import { Tabs, Tab, AppBar } 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';
@@ -12,6 +12,8 @@ const useStyles = makeStyles(() => ({
     paddingRight: '25px',
     paddingTop: '8px',
     paddingBottom: '35px',
+    width: '100%',
+    flexWrap: 'wrap',
   },
   tabPan: {
     paddingLeft: '56px',
@@ -40,6 +42,8 @@ export const NavBar: FC = () => {
 
   return (
     <Tabs
+      variant="scrollable"
+      scrollButtons="on"
       onChange={handleChange}
       value={value}
       className={classes.tabs}

src/components/AuthUser/HomePage2/Numbers.tsx

 import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Grid, Typography, CardContent, Card } from '@material-ui/core';
+import { Grid, Typography, CardContent, Card, Hidden } from '@material-ui/core';
 import LocalTaxiIcon from '@material-ui/icons/LocalTaxi';
 import LocationCityIcon from '@material-ui/icons/LocationCity';
 import PeopleIcon from '@material-ui/icons/People';
@@ -49,9 +49,9 @@ export const Numbers: FC = () => {
 
   return (
     <Grid item container alignItems="stretch" style={{ paddingTop: '20px' }}>
-      <Grid item xs={2} />
+      <Grid item xs={1} lg={2} />
 
-      <Grid item xs={2} component={Card} className={classes.noShadow}>
+      <Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
         <CardContent>
           <Grid
             container
@@ -75,9 +75,9 @@ export const Numbers: FC = () => {
         </CardContent>
       </Grid>
 
-      <Grid item xs={1} />
+      <Grid item xs={2} lg={1} />
 
-      <Grid item xs={2} component={Card} className={classes.noShadow}>
+      <Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
         <CardContent>
           <Grid
             container
@@ -103,7 +103,11 @@ export const Numbers: FC = () => {
 
       <Grid item xs={1} />
 
-      <Grid item xs={2} component={Card} className={classes.noShadow}>
+      <Hidden lgUp>
+        <Grid item xs={4} />
+      </Hidden>
+
+      <Grid item xs={4} lg={2} component={Card} className={classes.noShadow}>
         <CardContent>
           <Grid
             container
@@ -127,7 +131,7 @@ export const Numbers: FC = () => {
         </CardContent>
       </Grid>
 
-      <Grid item xs={2} />
+      <Grid item xs={4} lg={2} />
     </Grid>
   );
 };

src/components/AuthUser/HomePage2/Steps.tsx

@@ -12,7 +12,12 @@ const useStyles = makeStyles(() => ({
     paddingTop: '10px',
   },
   paddingBot: {
-    paddingBottom: '20px',
+    paddingBottom: '40px',
+  },
+  noShadow: {
+    border: 'none',
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
   },
 }));
 
@@ -51,6 +56,12 @@ export const Steps: FC = () => {
       <Grid item xs={1} />
 
       <Hidden lgUp>
+        <Grid
+          item
+          xs={12}
+          component={Card}
+          className={`${classes.paddingBot} ${classes.noShadow}`}
+        />
         <Grid item xs={1} />
       </Hidden>
 
@@ -81,6 +92,12 @@ export const Steps: FC = () => {
 
       <Grid item xs={1} />
       <Hidden lgUp>
+        <Grid
+          item
+          xs={12}
+          component={Card}
+          className={`${classes.paddingBot} ${classes.noShadow}`}
+        />
         <Grid item xs={1} />
       </Hidden>
 

src/components/AuthUser/Reservation/ReservationPage.tsx

+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  CssBaseline,
+  Grid,
+  Typography,
+  Hidden,
+  createMuiTheme,
+  responsiveFontSizes,
+  MuiThemeProvider,
+  Container,
+} from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import Fab from '@material-ui/core/Fab';
+
+import { NavBar } from '../HomePage2/NavBar';
+import { Steps } from '../HomePage2/Steps';
+import { Numbers } from '../HomePage2/Numbers';
+import { Reservation } from '../HomePage2/Reservation';
+
+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: '10px 90px 80px 10px',
+    bottom: '0',
+    right: '0',
+    position: 'fixed',
+    padding: '45px',
+  },
+}));
+
+export const ReservationPage: FC = () => {
+  const classes = useStyles();
+
+  return (
+    <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}>
+                Plan Here Your
+              </Typography>
+              <Typography variant="h1" className={classes.whiteText}>
+                RESERVATIONS
+              </Typography>
+            </Grid>
+
+            <Grid item xs={1} />
+          </Grid>
+        </MuiThemeProvider>
+      </div>
+
+      <Fab
+        color="primary"
+        size="large"
+        aria-label="add"
+        className={classes.fab}
+      >
+        <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>
+        </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 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 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">
+            Your Past Reservations
+          </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>
+  );
+};