Skip to content
Snippets Groups Projects
Commit 1fa4ce93 authored by Francesco's avatar Francesco
Browse files

ProfilePage is Responsive

parent 3d0dcb7b
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 #12680 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/Dashboard/ProfilePage/ProfilePage.tsx
+ 131
− 101
View file @ 1fa4ce93
......@@ -42,7 +42,21 @@ const useStyles = makeStyles(() => ({
paddingBottom: '65px',
},
paddingTop: {
paddingTop: '65px',
paddingTop: '2em',
},
marginTop: {
marginTop: '5em',
},
marginTopLittle: {
marginTop: '1em',
},
buttonUpdate: {
marginTop: '2em',
marginLeft: 'auto',
},
paddingTopLittle: {
paddingTop: '1em',
},
bodyIcon: {
fontSize: '90px',
......@@ -132,120 +146,136 @@ export const ProfilePage: FC = () => {
</MuiThemeProvider>
</div>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} />
<Grid item container xs={8}>
<Grid item xs={12}>
<Typography variant="h3">Your Profile Settings</Typography>
</Grid>
<Grid item xs={5}>
<TextField
autoFocus
margin="dense"
id="name"
label="First Name"
type="text"
fullWidth
/>
</Grid>
<MuiThemeProvider theme={themeResp}>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} />
<Grid item xs={5}>
<TextField
autoFocus
margin="dense"
id="name"
label="Last Name"
type="text"
fullWidth
/>
</Grid>
<Grid item container xs={8}>
<Grid item xs={12}>
<Typography variant="h2">Your Profile Settings</Typography>
</Grid>
<Grid item xs={5}>
<TextField
autoFocus
margin="dense"
id="name"
label="Address"
type="text"
fullWidth
/>
</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={2} />
<Grid item xs={5} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="name"
label="Address"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2}>
<TextField
autoFocus
margin="dense"
id="name"
label="CAP"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2} className={classes.paddingTopLittle} />
<Grid item xs={1} />
<Grid item xs={2} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="name"
label="CAP"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2}>
<TextField
autoFocus
margin="dense"
id="name"
label="Province"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={1} className={classes.paddingTopLittle} />
<Grid item xs={12}>
<TextField
autoFocus
margin="dense"
id="name"
label="Email"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2} className={classes.paddingTopLittle}>
<TextField
autoFocus
margin="dense"
id="name"
label="Prov"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12}>
<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="name"
label="Email"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12}>
<Select
labelId="Language"
id="Language"
label="Language"
open={open}
onClose={handleClose}
onOpen={handleOpen}
value={lang}
onChange={handleChange}
fullWidth
<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.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}
>
<MenuItem value={20}>Italiano</MenuItem>
<MenuItem value={10}>English</MenuItem>
<MenuItem value={30}>Deutsch</MenuItem>
<MenuItem value={40}>Ladinisch</MenuItem>
</Select>
</Grid>
Update
</Button>
<div data-testid="ProfilePage">
<Button variant="outlined" color="default" onClick={logout}>
<Button
fullWidth
variant="outlined"
color="default"
onClick={logout}
className={classes.marginTop}
>
Logout
</Button>
</div>
</Grid>
<Grid item xs={2} />
</Grid>
<Grid item xs={2} />
</Grid>
</MuiThemeProvider>
</Grid>
);
};
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