From 1fa4ce932a162d8c1da46e8d03377721461cc9ab Mon Sep 17 00:00:00 2001
From: Francesco <fmazzini@unibz.it>
Date: Mon, 7 Jun 2021 13:54:56 +0200
Subject: [PATCH] ProfilePage is Responsive

---
 .../Dashboard/ProfilePage/ProfilePage.tsx     | 232 ++++++++++--------
 1 file changed, 131 insertions(+), 101 deletions(-)

diff --git a/src/components/Dashboard/ProfilePage/ProfilePage.tsx b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
index d07c161..4c3d800 100644
--- a/src/components/Dashboard/ProfilePage/ProfilePage.tsx
+++ b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
@@ -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>
   );
 };
-- 
GitLab