Skip to content
Snippets Groups Projects
Commit 4ffc8d3e authored by Francesco's avatar Francesco
Browse files

Improved Accessibility

parent 07df3f3a
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 #12684 failed
Stage: build
This commit is part of merge request !60. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
Showing
with 227 additions and 197 deletions
src/components/Dashboard/HomePage/NavBarLogin.tsx
+ 17
− 14
Edit View file @ 4ffc8d3e
......@@ -45,19 +45,22 @@ export const NavBarLogin: FC = () => {
};
return (
<Tabs
textColor="primary"
onChange={handleChange}
value={value}
className={classes.tabs}
TabIndicatorProps={{ style: { display: 'none' } }}
>
<Tab
value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
label="Login"
icon={<LockIcon className={classes.tabIcon} />}
className={`${classes.tabPan} ${classes.rightAlign}`}
/>
</Tabs>
<nav>
<Tabs
textColor="primary"
onChange={handleChange}
value={value}
className={classes.tabs}
TabIndicatorProps={{ style: { display: 'none' } }}
>
<Tab
value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
label="Login"
icon={<LockIcon className={classes.tabIcon} />}
className={`${classes.tabPan} ${classes.rightAlign}`}
aria-label="Login"
/>
</Tabs>
</nav>
);
};
src/components/Dashboard/HomePage/Numbers.tsx
+ 6
− 6
Edit View file @ 4ffc8d3e
......@@ -70,13 +70,13 @@ export const Numbers: FC = () => {
</Typography>
<Hidden smDown>
<Typography variant="h6" align="center">
<Typography variant="h5" align="center">
Rides Offered
</Typography>
</Hidden>
<Hidden mdUp>
<Typography variant="h6" align="center">
<Typography variant="h5" align="center">
Rides
</Typography>
</Hidden>
......@@ -104,13 +104,13 @@ export const Numbers: FC = () => {
</Typography>
<Hidden smDown>
<Typography variant="h6" align="center">
<Typography variant="h5" align="center">
Kilometers
</Typography>
</Hidden>
<Hidden mdUp>
<Typography variant="h6" align="center">
<Typography variant="h5" align="center">
Kms
</Typography>
</Hidden>
......@@ -142,13 +142,13 @@ export const Numbers: FC = () => {
</Typography>
<Hidden smDown>
<Typography variant="h6" align="center">
<Typography variant="h5" align="center">
People who used our service
</Typography>
</Hidden>
<Hidden mdUp>
<Typography variant="h6" align="center">
<Typography variant="h5" align="center">
Users
</Typography>
</Hidden>
......
src/components/Dashboard/HomePage/Steps.tsx
+ 24
− 6
Edit View file @ 4ffc8d3e
......@@ -19,6 +19,12 @@ const useStyles = makeStyles(() => ({
boxShadow: 'none',
backgroundColor: 'transparent',
},
bodyText: {
fontSize: '1.26em',
},
bodyTextLarger: {
fontSize: '2.3em',
},
}));
export const Steps: FC = () => {
......@@ -30,7 +36,11 @@ export const Steps: FC = () => {
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
<Typography variant="h4" align="center">
<Typography
variant="h2"
className={classes.bodyTextLarger}
align="center"
>
STEP 1
</Typography>
......@@ -46,7 +56,7 @@ export const Steps: FC = () => {
</Grid>
</Grid>
<Typography variant="h6">
<Typography variant="body1" className={classes.bodyText}>
Log In or Register an account on the site. Fill all the fields
related to your personal information.
</Typography>
......@@ -67,7 +77,11 @@ export const Steps: FC = () => {
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
<Typography variant="h4" align="center">
<Typography
variant="h2"
className={classes.bodyTextLarger}
align="center"
>
STEP 2
</Typography>
......@@ -83,7 +97,7 @@ export const Steps: FC = () => {
</Grid>
</Grid>
<Typography variant="h6">
<Typography variant="body1" className={classes.bodyText}>
Book in the reservation section a free ride at least 48h than your
appointment
</Typography>
......@@ -103,7 +117,11 @@ export const Steps: FC = () => {
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
<Typography variant="h4" align="center">
<Typography
variant="h2"
className={classes.bodyTextLarger}
align="center"
>
STEP 3
</Typography>
......@@ -119,7 +137,7 @@ export const Steps: FC = () => {
</Grid>
</Grid>
<Typography variant="h6">
<Typography variant="body1" className={classes.bodyText}>
Wait your free drive compfortably at home and reach the place you
have booked in the reservation easily!
</Typography>
......
src/components/Dashboard/ProfilePage/ProfilePage.tsx
+ 135
− 130
Edit View file @ 4ffc8d3e
......@@ -16,6 +16,7 @@ import {
Button,
Select,
MenuItem,
FormControl,
} from '@material-ui/core';
import { NavBar } from 'components/Dashboard/HomePage/NavBar';
......@@ -128,154 +129,158 @@ export const ProfilePage: FC = () => {
<NavBar />
</Grid>
<MuiThemeProvider theme={themeResp}>
<Grid item container className={classes.paddingBottom}>
<Grid item xs={1} md={2} lg={2} />
<header>
<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}>
Set Here Your
</Typography>
<Typography variant="h1" className={classes.whiteText}>
PROFILE
</Typography>
</Grid>
<Grid item xs={10} md={6} lg={4}>
<Typography variant="h2" className={classes.whiteText}>
Set Here Your
</Typography>
<Typography variant="h1" className={classes.whiteText}>
PROFILE
</Typography>
</Grid>
<Grid item xs={1} />
</Grid>
</MuiThemeProvider>
<Grid item xs={1} />
</Grid>
</MuiThemeProvider>
</header>
</div>
<MuiThemeProvider theme={themeResp}>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} />
<Grid item container xs={8}>
<Grid item xs={12}>
<Typography variant="h2">Your Profile Settings</Typography>
</Grid>
<FormControl aria-label="Info User">
<MuiThemeProvider theme={themeResp}>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} />
<Grid item container xs={8}>
<Grid item xs={12}>
<Typography variant="h2">Your Profile Settings</Typography>
</Grid>
<Grid item xs={5} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="name"
label="First Name"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2} className={classes.paddingTopLittle} />
<Grid item xs={5} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="name"
label="Last Name"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={5} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="firstName"
label="First Name"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2} className={classes.paddingTopLittle} />
<Grid item xs={5} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="lastName"
label="Last Name"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={5} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="name"
label="Address"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={5} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="address"
label="Address"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2} className={classes.paddingTopLittle} />
<Grid item xs={2} className={classes.paddingTopLittle} />
<Grid item xs={2} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="name"
label="CAP"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="cap"
label="CAP"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={1} className={classes.paddingTopLittle} />
<Grid item xs={1} className={classes.paddingTopLittle} />
<Grid item xs={2} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="name"
label="Prov"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="province"
label="Prov"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="name"
label="Email"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="email"
label="Email"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="name"
label="Card No"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="cardNumber"
label="Card No"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12} className={classes.paddingTop}>
<Select
labelId="Language"
id="Language"
label="Language"
open={open}
onClose={handleClose}
onOpen={handleOpen}
value={lang}
onChange={handleChange}
<Grid item xs={12} className={classes.paddingTop}>
<Select
labelId="Language"
id="Language"
label="Language"
open={open}
onClose={handleClose}
onOpen={handleOpen}
value={lang}
onChange={handleChange}
fullWidth
>
<MenuItem value={20}>Italiano</MenuItem>
<MenuItem value={10}>English</MenuItem>
<MenuItem value={30}>Deutsch</MenuItem>
<MenuItem value={40}>Ladinisch</MenuItem>
</Select>
</Grid>
<Button
color="primary"
variant="contained"
className={classes.buttonUpdate}
>
Update
</Button>
<Button
fullWidth
variant="outlined"
color="default"
onClick={logout}
className={classes.marginTop}
>
<MenuItem value={20}>Italiano</MenuItem>
<MenuItem value={10}>English</MenuItem>
<MenuItem value={30}>Deutsch</MenuItem>
<MenuItem value={40}>Ladinisch</MenuItem>
</Select>
Logout
</Button>
</Grid>
<Button
color="primary"
variant="contained"
className={classes.buttonUpdate}
>
Update
</Button>
<Button
fullWidth
variant="outlined"
color="default"
onClick={logout}
className={classes.marginTop}
>
Logout
</Button>
<Grid item xs={2} />
</Grid>
<Grid item xs={2} />
</Grid>
</MuiThemeProvider>
</MuiThemeProvider>
</FormControl>
</Grid>
);
};
src/components/Dashboard/ReservationPage/ReservationPage.tsx
+ 18
− 16
Edit View file @ 4ffc8d3e
......@@ -57,23 +57,24 @@ export const ReservationPage: FC = () => {
<NavBar />
</Grid>
<ReservationDialog handleClose={handleClose} isOpen={isOpen} />
<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="h2" className={classes.whiteText}>
RESERVATIONS
</Typography>
<header>
<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="h2" className={classes.whiteText}>
RESERVATIONS
</Typography>
</Grid>
<Grid item xs={1} />
</Grid>
<Grid item xs={1} />
</Grid>
</MuiThemeProvider>
</MuiThemeProvider>
</header>
</div>
<Hidden smDown>
......@@ -82,6 +83,7 @@ export const ReservationPage: FC = () => {
size="large"
className={classes.fab}
onClick={handleOpen}
aria-label="Add New Reservations"
>
<AddIcon className={classes.extendedIcon} />
</Fab>
......
src/components/LandingPage/LandingPage.tsx
+ 27
− 25
Edit View file @ 4ffc8d3e
......@@ -65,36 +65,38 @@ export const LandingPage: FC = () => {
<div className={classes.root}>
<CssBaseline />
<Grid item>
<NavBarLogin />
</Grid>
<header>
<Grid item>
<NavBarLogin />
</Grid>
<MuiThemeProvider theme={themeResp}>
<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}>
Book Free Rides Now With
</Typography>
<Typography variant="h1" className={classes.whiteText}>
MOVE AID
</Typography>
</Grid>
<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={false} md={3} lg={5}>
<Hidden mdDown>
<Container>
<MapElement />
</Container>
</Hidden>
</Grid>
<Grid item xs={1} />
</Grid>
<Grid item xs={1} />
</Grid>
<Steps />
</MuiThemeProvider>
<Steps />
</MuiThemeProvider>
</header>
</div>
<Grid item container className={classes.paddingTop}>
......
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