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

src/components/Dashboard/ProfilePage/ProfilePage.tsx

 import React, { FC, useContext } from 'react';
-import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
 import axios from 'axios';
 import { NonAuthRoutes } from 'api/routes';
 import { useHistory } from 'react-router-dom';
 import { AuthContext } from 'components/Auth/AuthContext';
+import {
+  CssBaseline,
+  Grid,
+  Typography,
+  Hidden,
+  createMuiTheme,
+  responsiveFontSizes,
+  MuiThemeProvider,
+  TextField,
+  Button,
+  Select,
+  MenuItem,
+  FormControl,
+} from '@material-ui/core';
+import { NavBar } from 'components/Dashboard/HomePage/NavBar';
+
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
+
+const useStyles = makeStyles(() => ({
+  root: {
+    minHeight: '36vh',
+    backgroundImage: `url(${'/assets/bgMED.svg'})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+  },
+  rightAlign: {
+    marginLeft: 'auto',
+  },
+  whiteText: {
+    color: 'white',
+  },
+  imageIcon: {
+    maxHeight: '50%',
+  },
+  paddingBottom: {
+    paddingBottom: '65px',
+  },
+  paddingTop: {
+    paddingTop: '2em',
+  },
+  marginTop: {
+    marginTop: '5em',
+  },
+  marginTopLittle: {
+    marginTop: '1em',
+  },
+
+  buttonUpdate: {
+    marginTop: '2em',
+    marginLeft: 'auto',
+  },
+  paddingTopLittle: {
+    paddingTop: '1em',
+  },
+  bodyIcon: {
+    fontSize: '90px',
+    paddingBottom: '10px',
+    paddingTop: '10px',
+  },
+  contIcon: {
+    width: '100%',
+    left: '0',
+    right: '0',
+  },
+  noShadow: {
+    border: 'none',
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
+  },
+  extendedIcon: {
+    fontSize: '50px',
+  },
+  fab: {
+    margin: '10px 90px 80px 10px',
+    bottom: '0',
+    right: '0',
+    position: 'fixed',
+    padding: '45px',
+  },
+  fabSmall: {
+    margin: '10px 45px 70px 10px',
+    bottom: '0',
+    right: '0',
+    position: 'fixed',
+    padding: '35px',
+  },
+}));
 
 export const ProfilePage: FC = () => {
   const history = useHistory();
@@ -15,11 +103,186 @@ export const ProfilePage: FC = () => {
     });
   };
 
+  const classes = useStyles();
+
+  const [lang, setLang] = React.useState<string | number>('');
+  const [open, setOpen] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>): void => {
+    setLang(event.target.value as number);
+  };
+
+  const handleClose = (): void => {
+    setOpen(false);
+  };
+
+  const handleOpen = (): void => {
+    setOpen(true);
+  };
+
   return (
     <div data-testid="ProfilePage">
-      <Button variant="outlined" color="default" onClick={logout}>
-        Logout
-      </Button>
+      <Grid container direction="column" className={classes.paddingBottom}>
+        <div className={classes.root}>
+          <CssBaseline />
+
+          <Grid item>
+            <NavBar />
+          </Grid>
+
+          <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={1} />
+              </Grid>
+            </MuiThemeProvider>
+          </header>
+        </div>
+
+        <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="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="address"
+                    label="Address"
+                    type="text"
+                    fullWidth
+                  />
+                </Grid>
+
+                <Grid item xs={2} className={classes.paddingTopLittle} />
+
+                <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={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="email"
+                    label="Email"
+                    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}
+                    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}
+                >
+                  Logout
+                </Button>
+              </Grid>
+
+              <Grid item xs={2} />
+            </Grid>
+          </MuiThemeProvider>
+        </FormControl>
+      </Grid>
     </div>
   );
 };