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,
+  Container,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+  Button,
+  Select,
+  MenuItem,
+} 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/bg7.png'})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+  },
+  rightAlign: {
+    marginLeft: 'auto',
+  },
+  whiteText: {
+    color: 'white',
+  },
+  imageIcon: {
+    maxHeight: '50%',
+  },
+  paddingBottom: {
+    paddingBottom: '65px',
+  },
+  paddingTop: {
+    paddingTop: '65px',
+  },
+  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 +94,164 @@ 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>
-    </div>
+    <Grid container direction="column" className={classes.paddingBottom}>
+      <div className={classes.root}>
+        <CssBaseline />
+
+        <Grid item>
+          <NavBar />
+        </Grid>
+
+        <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>
+      </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>
+          <Grid item xs={2} />
+          <Grid item xs={5}>
+            <TextField
+              autoFocus
+              margin="dense"
+              id="name"
+              label="Last Name"
+              type="text"
+              fullWidth
+            />
+          </Grid>
+
+          <Grid item xs={5}>
+            <TextField
+              autoFocus
+              margin="dense"
+              id="name"
+              label="Address"
+              type="text"
+              fullWidth
+            />
+          </Grid>
+
+          <Grid item xs={2} />
+
+          <Grid item xs={2}>
+            <TextField
+              autoFocus
+              margin="dense"
+              id="name"
+              label="CAP"
+              type="text"
+              fullWidth
+            />
+          </Grid>
+
+          <Grid item xs={1} />
+
+          <Grid item xs={2}>
+            <TextField
+              autoFocus
+              margin="dense"
+              id="name"
+              label="Province"
+              type="text"
+              fullWidth
+            />
+          </Grid>
+
+          <Grid item xs={12}>
+            <TextField
+              autoFocus
+              margin="dense"
+              id="name"
+              label="Email"
+              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}>
+            <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>
+
+          <div data-testid="ProfilePage">
+            <Button variant="outlined" color="default" onClick={logout}>
+              Logout
+            </Button>
+          </div>
+        </Grid>
+        <Grid item xs={2} />
+      </Grid>
+    </Grid>
   );
 };