Skip to content
Snippets Groups Projects
Commit 70901c84 authored by Defendi Alberto's avatar Defendi Alberto
Browse files

Merge branch 'dev' into 'master' 

New component to search senior (see #12). Enhance responsiveness and solve #10 and #11

See merge request !60
parents 0f6da13a 38ae3d86
No related branches found
No related tags found
1 merge request!60New component to search senior (see #12). Enhance responsiveness and solve #10 and #11
Pipeline #12715 passed
Stage: build
Stage: docs
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 460 additions and 229 deletions
public/assets/bgBIG (2).svg:Zone.Identifier 0 → 100644
+ 0
− 0
View file @ 70901c84
File added
public/assets/bgBIG.svg 0 → 100644
+ 16
− 0
View file @ 70901c84
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2024.2 1036.5" style="enable-background:new 0 0 2024.2 1036.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#7472F1;}
.st1{fill:#5E5CE4;}
</style>
<g id="Livello_3">
<polygon class="st0" points="-0.1,1036.5 2024.2,582.2 2024.2,-0.2 -0.1,-0.2 "/>
</g>
<g id="Livello_4">
<line class="st1" x1="2027.1" y1="-0.2" x2="-0.1" y2="-0.2"/>
<polyline class="st1" points="-0.1,-0.2 -0.1,51.4 668.3,886 2027.1,583.7 2027.1,-0.2 "/>
</g>
</svg>
public/assets/bgBIG.svg:Zone.Identifier 0 → 100644
+ 0
− 0
View file @ 70901c84
File added
public/assets/bgMED.svg 0 → 100644
+ 1
− 0
View file @ 70901c84
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 429.52"><defs><style>.cls-1{fill:#7472f1;}.cls-2{fill:#5e5ce4;}</style></defs><g id="Livello_2" data-name="Livello 2"><polygon class="cls-1" points="0 0 0 429.52 2000 235.08 2000 0 0 0"/></g><g id="Livello_3" data-name="Livello 3"><polygon class="cls-2" points="436.83 0 610.44 370.17 2000 235.08 2000 0 436.83 0"/></g></svg>
\ No newline at end of file
public/assets/bgMED.svg:Zone.Identifier 0 → 100644
+ 0
− 0
View file @ 70901c84
File added
src/api/ResponseProps.ts 0 → 100644
+ 10
− 0
View file @ 70901c84
export type ResponseProps = {
id: number;
user: {
email: string;
firstName: string;
lastName: string;
username: string;
};
memberCardNumber: number;
};
src/api/getSeniorList.ts 0 → 100644
+ 8
− 0
View file @ 70901c84
import axios from 'axios';
import { camelizeKeys } from 'humps';
import { ResponseProps } from './ResponseProps';
export const getSeniorList = async (name: string): Promise<ResponseProps[]> =>
axios
.get(`/api/web/seniors/by_name/${name}?fields=user,id,member_card_number`)
.then((res) => camelizeKeys(res.data) as ResponseProps[]);
src/api/getSeniorListByCard.ts 0 → 100644
+ 13
− 0
View file @ 70901c84
import axios from 'axios';
import { camelizeKeys } from 'humps';
import { ResponseProps } from './ResponseProps';
export const getSeniorListByCard = async (
card: number,
): Promise<ResponseProps[]> =>
axios
.get(
`/api/web/seniors/by_member_card/${card}?fields=user,id,member_card_number`,
)
.then((res) => camelizeKeys(res.data) as ResponseProps[])
.catch(() => [] as ResponseProps[]);
src/api/setReservation.ts 0 → 100644
+ 4
− 0
View file @ 70901c84
import axios from 'axios';
export const setReservation = async (reservation: any): Promise<void> =>
axios.options('/api/web/reservations', {}).then((res) => console.log(res));
src/components/Auth/ChoseRole/ChoseRole.tsx
+ 4
− 4
View file @ 70901c84
...@@ -5,6 +5,7 @@ import { setRole } from 'api/setRole'; ...@@ -5,6 +5,7 @@ import { setRole } from 'api/setRole';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { AuthRoutes } from 'api/routes'; import { AuthRoutes } from 'api/routes';
import { AuthContext } from 'components/Auth/AuthContext'; import { AuthContext } from 'components/Auth/AuthContext';
import { getRole } from 'api/getRole';
/** /**
* Page that let's users decide role between available roles. * Page that let's users decide role between available roles.
...@@ -17,11 +18,10 @@ export const ChoseRole: FC = () => { ...@@ -17,11 +18,10 @@ export const ChoseRole: FC = () => {
const { setIsAuth } = useContext(AuthContext); const { setIsAuth } = useContext(AuthContext);
const choseAndForward = (role: string): void => { const choseAndForward = (role: string): void => {
// Set role in the server.
setRole(role);
setIsAuth(true); setIsAuth(true);
// Push to homepage. setRole(role).then(() =>
history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`); history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`),
);
}; };
useEffect(() => { useEffect(() => {
......
src/components/Auth/SignInForm/SignInForm.tsx
+ 41
− 2
View file @ 70901c84
...@@ -3,13 +3,24 @@ import axios from 'axios'; ...@@ -3,13 +3,24 @@ import axios from 'axios';
import { useCookie } from 'hooks/useCookie'; import { useCookie } from 'hooks/useCookie';
import { AuthRoutes, NonAuthRoutes } from 'api/routes'; import { AuthRoutes, NonAuthRoutes } from 'api/routes';
import { SubmitHandler, useForm } from 'react-hook-form'; import { SubmitHandler, useForm } from 'react-hook-form';
import { Button } from '@material-ui/core'; import {
Button,
createMuiTheme,
responsiveFontSizes,
MuiThemeProvider,
Grid,
Typography,
Link,
} from '@material-ui/core';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { AuthContext } from 'components/Auth/AuthContext'; import { AuthContext } from 'components/Auth/AuthContext';
import { InputField } from 'components/Auth/InputField/InputField'; import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from './useStyles'; import { useStyles } from './useStyles';
import { CredentialsType } from './CredentialsType'; import { CredentialsType } from './CredentialsType';
let themeResp = createMuiTheme();
themeResp = responsiveFontSizes(themeResp);
const defaultValues = { const defaultValues = {
username: '', username: '',
password: '', password: '',
...@@ -65,6 +76,16 @@ export const SignInForm: FC = () => { ...@@ -65,6 +76,16 @@ export const SignInForm: FC = () => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<> <>
<header>
<MuiThemeProvider theme={themeResp}>
<Grid item container>
<Grid item xs={12} color="primary" className={classes.paddingTop}>
<Typography variant="h1">SIGN IN</Typography>
</Grid>
</Grid>
</MuiThemeProvider>
</header>
<form <form
className={classes.form} className={classes.form}
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
...@@ -79,7 +100,7 @@ export const SignInForm: FC = () => { ...@@ -79,7 +100,7 @@ export const SignInForm: FC = () => {
message: 'Username is not valid', message: 'Username is not valid',
}, },
}} }}
label="username" label="Username"
type="username" type="username"
error={!!errors.username} error={!!errors.username}
errorMessage="Insert username" errorMessage="Insert username"
...@@ -112,6 +133,24 @@ export const SignInForm: FC = () => { ...@@ -112,6 +133,24 @@ export const SignInForm: FC = () => {
> >
Sign In Sign In
</Button> </Button>
<MuiThemeProvider theme={themeResp}>
<Grid item container>
<Grid
item
xs={12}
color="primary"
className={classes.paddingBottom}
>
<Typography>
New here? &nbsp;
<Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signUp}`}>
Create an account.
</Link>
</Typography>
</Grid>
</Grid>
</MuiThemeProvider>
</form> </form>
</> </>
); );
......
src/components/Auth/SignInForm/useStyles.ts
+ 6
− 0
View file @ 70901c84
...@@ -14,5 +14,11 @@ export const useStyles = makeStyles((theme: Theme) => ...@@ -14,5 +14,11 @@ export const useStyles = makeStyles((theme: Theme) =>
submit: { submit: {
margin: theme.spacing(3, 0, 2), margin: theme.spacing(3, 0, 2),
}, },
paddingTop: {
paddingTop: theme.spacing(10),
},
paddingBottom: {
paddingBottom: theme.spacing(10),
},
}), }),
); );
src/components/Auth/SignUpForm/SeniorType.ts 0 → 100644
+ 12
− 0
View file @ 70901c84
export type SeniorType = {
username: string;
password: string;
firstName: string;
lastName: string;
email: string;
phoneNumber: number;
address: number;
name: string;
memberCardNumber: number;
notes: string;
};
src/components/Auth/SignUpForm/SignUpForm.tsx
+ 211
− 156
View file @ 70901c84
import React, { FC } from 'react'; import React, { FC } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form'; import { SubmitHandler, useForm } from 'react-hook-form';
import { Button } from '@material-ui/core'; import {
Button,
createMuiTheme,
responsiveFontSizes,
MuiThemeProvider,
Grid,
Typography,
Link,
Hidden,
} from '@material-ui/core';
import { AuthRoutes, NonAuthRoutes } from 'api/routes';
import axios from 'axios'; import axios from 'axios';
import { InputField } from 'components/Auth/InputField/InputField'; import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from 'components/Auth/SignUpForm/useStyles'; import { useStyles } from 'components/Auth/SignUpForm/useStyles';
...@@ -21,6 +30,9 @@ export const SignUpForm: FC = () => { ...@@ -21,6 +30,9 @@ export const SignUpForm: FC = () => {
notes: string; notes: string;
}; };
let themeResp = createMuiTheme();
themeResp = responsiveFontSizes(themeResp);
const { control, errors, handleSubmit } = useForm<FormData>(); const { control, errors, handleSubmit } = useForm<FormData>();
const onSubmit: SubmitHandler<FormData> = (values: FormData) => { const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
...@@ -55,166 +67,209 @@ export const SignUpForm: FC = () => { ...@@ -55,166 +67,209 @@ export const SignUpForm: FC = () => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<> <>
<header>
<MuiThemeProvider theme={themeResp}>
<Grid item container>
<Grid item xs={12} color="primary" className={classes.paddingTop}>
<Typography variant="h1">SIGN UP</Typography>
</Grid>
</Grid>
</MuiThemeProvider>
</header>
<form <form
className={classes.form} className={classes.form}
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
data-testid="Form" data-testid="Form"
> >
<InputField <Grid item container>
name="email" <Grid item xs={12} md={5}>
type="email" <InputField
control={control} name="firstName"
rules={{ type="text"
validate: (value: string) => control={control}
/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value), rules={{
required: { maxLength: 150,
value: true, required: {
message: 'Email is not valid', value: true,
}, message: 'Insert valid first name',
}} },
label="Email" }}
error={!!errors.email} label="First name"
errorMessage="Insert email" error={!!errors.firstName}
/> errorMessage="Insert valid first name"
/>
<InputField </Grid>
name="password"
type="password" <Hidden smDown>
control={control} <Grid item xs={2} />
rules={{ </Hidden>
minLength: 8,
maxLength: 60, <Grid item xs={12} md={5}>
required: { <InputField
value: true, name="lastName"
message: 'Insert valid password', type="text"
}, control={control}
}} rules={{
label="Password" maxLength: 150,
error={!!errors.password} required: {
errorMessage="Insert valid password" value: true,
/> message: 'Insert valid last name',
},
<InputField }}
name="username" label="Last name"
type="text" error={!!errors.lastName}
control={control} errorMessage="Insert valid last name"
rules={{ />
maxLength: 150, </Grid>
required: {
value: true, <InputField
message: 'Insert valid username', name="address"
}, type="text"
}} control={control}
label="Username" rules={{
error={!!errors.username} required: {
errorMessage="Insert valid username" value: true,
/> message: 'Insert valid address',
},
<InputField }}
name="firstName" label="Address"
type="text" error={!!errors.address}
control={control} errorMessage="Insert valid address"
rules={{ />
maxLength: 150,
required: { <Grid item xs={12} md={5}>
value: true, <InputField
message: 'Insert valid first name', name="phoneNumber"
}, type="number"
}} control={control}
label="First name" rules={{
error={!!errors.firstName} maxLength: 15,
errorMessage="Insert valid first name" required: {
/> value: true,
message: 'Insert valid phone number',
<InputField },
name="lastName" }}
type="text" label="Phone number"
control={control} error={!!errors.phoneNumber}
rules={{ errorMessage="Insert valid phone number"
maxLength: 150, />
required: { </Grid>
value: true,
message: 'Insert valid last name', <Hidden smDown>
}, <Grid item xs={2} />
}} </Hidden>
label="Last name"
error={!!errors.lastName} <Grid item xs={12} md={5}>
errorMessage="Insert valid last name" <InputField
/> name="memberCardNumber"
type="number"
<InputField control={control}
name="address" rules={{
type="text" maxLength: 20,
control={control} required: {
rules={{ value: true,
required: { message: 'Insert valid card number',
value: true, },
message: 'Insert valid address', }}
}, label="Card number"
}} error={!!errors.memberCardNumber}
label="Address" errorMessage="Insert valid card number"
error={!!errors.address} />
errorMessage="Insert valid address" </Grid>
/>
<Grid item xs={12} className={classes.paddingBottomSmall}>
<InputField <InputField
name="phoneNumber" name="notes"
type="number" type="text"
control={control} control={control}
rules={{ rules={{
maxLength: 15, required: {
required: { value: true,
value: true, message: 'Add notes',
message: 'Insert valid phone number', },
}, }}
}} label="Notes"
label="Phone number" error={!!errors.notes}
error={!!errors.phoneNumber} errorMessage="Insert notes"
errorMessage="Insert valid phone number" />
/> </Grid>
<InputField <InputField
name="memberCardNumber" name="username"
type="number" type="text"
control={control} control={control}
rules={{ rules={{
maxLength: 20, maxLength: 150,
required: { required: {
value: true, value: true,
message: 'Insert valid card number', message: 'Insert valid username',
}, },
}} }}
label="Card number" label="Username"
error={!!errors.memberCardNumber} error={!!errors.username}
errorMessage="Insert valid card number" errorMessage="Insert valid username"
/> />
<InputField <InputField
name="notes" name="email"
type="text" type="email"
control={control} control={control}
rules={{ rules={{
required: { validate: (value: string) =>
value: true, /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
message: 'Add notes', required: {
}, value: true,
}} message: 'Email is not valid',
label="Notes" },
error={!!errors.notes} }}
errorMessage="Insert notes" label="Email"
/> error={!!errors.email}
errorMessage="Insert email"
<Button />
data-testid="Submit"
type="submit" <InputField
fullWidth name="password"
variant="contained" type="password"
color="primary" control={control}
className={classes.submit} rules={{
> minLength: 8,
Sign Up maxLength: 60,
</Button> required: {
value: true,
message: 'Insert valid password',
},
}}
label="Password"
error={!!errors.password}
errorMessage="Insert valid password"
/>
<Button
data-testid="Submit"
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign Up
</Button>
</Grid>
</form> </form>
<MuiThemeProvider theme={themeResp}>
<Grid item container>
<Grid item xs={12} color="primary" className={classes.paddingBottom}>
<Typography>
Already have an account? &nbsp;
<Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signIn}`}>
Log in.
</Link>
</Typography>
</Grid>
</Grid>
</MuiThemeProvider>
</> </>
); );
}; };
src/components/Auth/SignUpForm/useStyles.ts
+ 9
− 0
View file @ 70901c84
...@@ -14,5 +14,14 @@ export const useStyles = makeStyles((theme: Theme) => ...@@ -14,5 +14,14 @@ export const useStyles = makeStyles((theme: Theme) =>
submit: { submit: {
margin: theme.spacing(3, 0, 2), margin: theme.spacing(3, 0, 2),
}, },
paddingTop: {
paddingTop: theme.spacing(10),
},
paddingBottom: {
paddingBottom: theme.spacing(10),
},
paddingBottomSmall: {
paddingBottom: theme.spacing(5),
},
}), }),
); );
src/components/Authorization/Authorization.tsx
+ 6
− 3
View file @ 70901c84
...@@ -4,6 +4,8 @@ import { NonAuthRoutes } from 'api/routes'; ...@@ -4,6 +4,8 @@ import { NonAuthRoutes } from 'api/routes';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import { Unauthorized } from 'components/Unauthorized/Unauthorized'; import { Unauthorized } from 'components/Unauthorized/Unauthorized';
import { AuthContext } from 'components/Auth/AuthContext'; import { AuthContext } from 'components/Auth/AuthContext';
import { useRole } from 'hooks/useRole';
import { useAuth } from 'hooks/useAuth';
const HandleIsAuth: FC<{ isAuth: boolean }> = ({ isAuth }) => const HandleIsAuth: FC<{ isAuth: boolean }> = ({ isAuth }) =>
isAuth ? ( isAuth ? (
...@@ -35,11 +37,12 @@ export const withAuthorization = (allowedRoles: string[]) => < ...@@ -35,11 +37,12 @@ export const withAuthorization = (allowedRoles: string[]) => <
const ComponentWithAuthorization: FC<T> = ( const ComponentWithAuthorization: FC<T> = (
props: Omit<T, keyof WithAuthProps>, props: Omit<T, keyof WithAuthProps>,
) => { ) => {
const { role, isAuth } = useContext(AuthContext); const [role, setRole, isLoading] = useRole();
console.log(`ROLE ${role} AUTH ${isAuth}`); const [isAuth] = useAuth();
console.log(`ROLE ${role} AUTH ${isAuth} LOADED ${isLoading}`);
/* eslint-disable no-nested-ternary */ /* eslint-disable no-nested-ternary */
return typeof isAuth === null && role === null ? ( return isAuth === null || isLoading ? (
<BlurCircular /> <BlurCircular />
) : // props comes afterwards so the can override the default ones. ) : // props comes afterwards so the can override the default ones.
allowedRoles.includes(role) && isAuth ? ( allowedRoles.includes(role) && isAuth ? (
......
src/components/Dashboard/HomePage/HomePage.tsx
+ 23
− 22
View file @ 70901c84
...@@ -22,7 +22,7 @@ themeResp = responsiveFontSizes(themeResp); ...@@ -22,7 +22,7 @@ themeResp = responsiveFontSizes(themeResp);
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
root: { root: {
minHeight: '100vh', minHeight: '100vh',
backgroundImage: `url(${'/assets/bg3.png'})`, backgroundImage: `url(${'/assets/bgBIG.svg'})`,
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
backgroundSize: 'cover', backgroundSize: 'cover',
}, },
...@@ -98,32 +98,33 @@ export const HomePage: FC = () => { ...@@ -98,32 +98,33 @@ export const HomePage: FC = () => {
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
<Grid item container className={classes.paddingTop}> <MuiThemeProvider theme={themeResp}>
<Grid item xs={2} /> <Grid item container className={classes.paddingTop}>
<Grid item xs={8}> <Grid item xs={2} />
<Typography variant="h3">Your Next Reservation</Typography> <Grid item xs={8}>
<Typography variant="h2">Your Next Reservation</Typography>
</Grid>
<Grid item xs={2} />
</Grid> </Grid>
<Grid item xs={2} />
</Grid>
<Grid item container style={{ paddingTop: '20px' }}> <Grid item container style={{ paddingTop: '20px' }}>
<Grid item xs={1} lg={2} /> <Grid item xs={1} lg={2} />
<Grid item xs={10} lg={8}> <Grid item xs={10} lg={8}>
<Reservation departure="" destination="" time="" date="" /> <Reservation departure="" destination="" time="" date="" />
</Grid>
<Grid item xs={1} lg={2} />
</Grid> </Grid>
<Grid item xs={1} lg={2} />
</Grid>
<Grid item container className={classes.paddingTop}> <Grid item container className={classes.paddingTop}>
<Grid item xs={2} /> <Grid item xs={2} />
<Grid item xs={8}> <Grid item xs={8}>
<Typography variant="h3" align="right"> <Typography variant="h2" align="right">
Some Our Numbers Some Our Numbers
</Typography> </Typography>
</Grid>
<Grid item xs={2} />
</Grid> </Grid>
<Grid item xs={2} /> </MuiThemeProvider>
</Grid>
<Numbers /> <Numbers />
</Grid> </Grid>
); );
......
src/components/Dashboard/HomePage/NavBar.tsx
+ 76
− 28
View file @ 70901c84
import React, { FC } from 'react'; import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import { Tabs, Tab } from '@material-ui/core'; import { Tabs, Tab, Grid, Hidden } from '@material-ui/core';
import HomeIcon from '@material-ui/icons/Home'; import HomeIcon from '@material-ui/icons/Home';
import ImportContactsIcon from '@material-ui/icons/ImportContacts'; import ImportContactsIcon from '@material-ui/icons/ImportContacts';
import AccountCircleIcon from '@material-ui/icons/AccountCircle'; import AccountCircleIcon from '@material-ui/icons/AccountCircle';
...@@ -28,6 +28,21 @@ const useStyles = makeStyles(() => ({ ...@@ -28,6 +28,21 @@ const useStyles = makeStyles(() => ({
rightAlign: { rightAlign: {
marginLeft: 'auto', marginLeft: 'auto',
}, },
tabsSmall: {
color: 'white',
paddingLeft: '1.2em',
paddingRight: '1em',
paddingTop: '0.9em',
paddingBottom: '2em',
width: '100%',
},
tabIconSmall: {
fontSize: '2.4em',
},
tabPanSmall: {
paddingLeft: '2em',
paddingRight: '2em',
},
})); }));
export const NavBar: FC = () => { export const NavBar: FC = () => {
...@@ -45,32 +60,65 @@ export const NavBar: FC = () => { ...@@ -45,32 +60,65 @@ export const NavBar: FC = () => {
}; };
return ( return (
<Tabs <div>
variant="scrollable" <Hidden smDown>
scrollButtons="on" <Tabs
onChange={handleChange} onChange={handleChange}
value={value} value={value}
className={classes.tabs} className={classes.tabs}
TabIndicatorProps={{ style: { display: 'none' } }} TabIndicatorProps={{ style: { display: 'none' } }}
> >
<Tab <Tab
label="HomePage" label="HomePage"
value={`${AuthRoutes.dashboard}${AuthRoutes.home}`} value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
icon={<HomeIcon className={classes.tabIcon} />} icon={<HomeIcon className={classes.tabIcon} />}
className={classes.tabPan} className={classes.tabPan}
/> />
<Tab
label="Reservation" <Tab
value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`} label="Reservation"
icon={<ImportContactsIcon className={classes.tabIcon} />} value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
className={`${classes.tabPan} ${classes.rightAlign}`} icon={<ImportContactsIcon className={classes.tabIcon} />}
/> className={`${classes.tabPan} ${classes.rightAlign}`}
<Tab />
label="Profile" <Tab
value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`} label="Profile"
className={classes.tabPan} value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
icon={<AccountCircleIcon className={classes.tabIcon} />} className={classes.tabPan}
/> icon={<AccountCircleIcon className={classes.tabIcon} />}
</Tabs> />
</Tabs>
</Hidden>
<Hidden mdUp>
<Tabs
onChange={handleChange}
value={value}
className={classes.tabsSmall}
TabIndicatorProps={{ style: { display: 'none' } }}
centered
>
<Tab
label=""
value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
icon={<HomeIcon className={classes.tabIconSmall} />}
className={classes.tabPanSmall}
/>
<Tab
label=""
value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
icon={<ImportContactsIcon className={classes.tabIconSmall} />}
className={classes.tabPanSmall}
/>
<Tab
label=""
value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
icon={<AccountCircleIcon className={classes.tabIconSmall} />}
className={classes.tabPanSmall}
/>
</Tabs>
</Hidden>
</div>
); );
}; };
src/components/Dashboard/HomePage/NavBarLogin.tsx
+ 17
− 14
View file @ 70901c84
...@@ -45,19 +45,22 @@ export const NavBarLogin: FC = () => { ...@@ -45,19 +45,22 @@ export const NavBarLogin: FC = () => {
}; };
return ( return (
<Tabs <nav>
textColor="primary" <Tabs
onChange={handleChange} textColor="primary"
value={value} onChange={handleChange}
className={classes.tabs} value={value}
TabIndicatorProps={{ style: { display: 'none' } }} className={classes.tabs}
> TabIndicatorProps={{ style: { display: 'none' } }}
<Tab >
value={`${AuthRoutes.dashboard}${AuthRoutes.home}`} <Tab
label="Login" value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
icon={<LockIcon className={classes.tabIcon} />} label="Login"
className={`${classes.tabPan} ${classes.rightAlign}`} icon={<LockIcon className={classes.tabIcon} />}
/> className={`${classes.tabPan} ${classes.rightAlign}`}
</Tabs> aria-label="Login"
/>
</Tabs>
</nav>
); );
}; };
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment