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(() => ({ ...@@ -42,7 +42,21 @@ const useStyles = makeStyles(() => ({
paddingBottom: '65px', paddingBottom: '65px',
}, },
paddingTop: { paddingTop: {
paddingTop: '65px', paddingTop: '2em',
},
marginTop: {
marginTop: '5em',
},
marginTopLittle: {
marginTop: '1em',
},
buttonUpdate: {
marginTop: '2em',
marginLeft: 'auto',
},
paddingTopLittle: {
paddingTop: '1em',
}, },
bodyIcon: { bodyIcon: {
fontSize: '90px', fontSize: '90px',
...@@ -132,120 +146,136 @@ export const ProfilePage: FC = () => { ...@@ -132,120 +146,136 @@ export const ProfilePage: 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 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>
<Grid item xs={2} /> <Grid item xs={2} />
<Grid item xs={5}> <Grid item container xs={8}>
<TextField <Grid item xs={12}>
autoFocus <Typography variant="h2">Your Profile Settings</Typography>
margin="dense" </Grid>
id="name"
label="Last Name"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={5}> <Grid item xs={5} className={classes.paddingTopLittle}>
<TextField <TextField
autoFocus autoFocus
margin="dense" margin="dense"
id="name" id="name"
label="Address" label="First Name"
type="text" type="text"
fullWidth fullWidth
/> />
</Grid> </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}> <Grid item xs={2} className={classes.paddingTopLittle} />
<TextField
autoFocus
margin="dense"
id="name"
label="CAP"
type="text"
fullWidth
/>
</Grid>
<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}> <Grid item xs={1} className={classes.paddingTopLittle} />
<TextField
autoFocus
margin="dense"
id="name"
label="Province"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12}> <Grid item xs={2} className={classes.paddingTopLittle}>
<TextField <TextField
autoFocus autoFocus
margin="dense" margin="dense"
id="name" id="name"
label="Email" label="Prov"
type="text" type="text"
fullWidth fullWidth
/> />
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12} className={classes.paddingTopLittle}>
<TextField <TextField
autoFocus autoFocus
margin="dense" margin="dense"
id="name" id="name"
label="Card No" label="Email"
type="text" type="text"
fullWidth fullWidth
/> />
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12} className={classes.paddingTopLittle}>
<Select <TextField
labelId="Language" autoFocus
id="Language" margin="dense"
label="Language" id="name"
open={open} label="Card No"
onClose={handleClose} type="text"
onOpen={handleOpen} fullWidth
value={lang} />
onChange={handleChange} </Grid>
fullWidth
<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> Update
<MenuItem value={10}>English</MenuItem> </Button>
<MenuItem value={30}>Deutsch</MenuItem>
<MenuItem value={40}>Ladinisch</MenuItem>
</Select>
</Grid>
<div data-testid="ProfilePage"> <Button
<Button variant="outlined" color="default" onClick={logout}> fullWidth
variant="outlined"
color="default"
onClick={logout}
className={classes.marginTop}
>
Logout Logout
</Button> </Button>
</div> </Grid>
<Grid item xs={2} />
</Grid> </Grid>
<Grid item xs={2} /> </MuiThemeProvider>
</Grid>
</Grid> </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