Style user site and adjust popup button #12

1 files changed, 53 insertions, 65 deletions

diff --git a/webui/src/pages/identity/Identity.tsx b/webui/src/pages/identity/Identity.tsx
index 43925f4f..8261c0f4 100644
--- a/webui/src/pages/identity/Identity.tsx
+++ b/webui/src/pages/identity/Identity.tsx
@@ -2,16 +2,15 @@ import React from 'react';
 
 import {
   Checkbox,
-  Divider,
-  FormControl,
   FormControlLabel,
-  FormGroup,
-  FormLabel,
+  Link,
   Paper,
-  TextField,
+  Typography,
 } from '@material-ui/core';
 import Avatar from '@material-ui/core/Avatar';
 import { makeStyles } from '@material-ui/core/styles';
+import InfoIcon from '@material-ui/icons/Info';
+import MailOutlineIcon from '@material-ui/icons/MailOutline';
 
 import { useCurrentIdentityQuery } from '../../components/CurrentIdentity/CurrentIdentity.generated';
 
@@ -19,26 +18,24 @@ import BugList from './BugList';
 
 const useStyles = makeStyles((theme) => ({
   main: {
-    maxWidth: 1200,
+    maxWidth: 1000,
     margin: 'auto',
     marginTop: theme.spacing(4),
+    padding: theme.spacing(3, 2),
+    display: 'flex',
   },
   container: {
     display: 'flex',
     marginBottom: theme.spacing(1),
-    marginRight: theme.spacing(2),
-    marginLeft: theme.spacing(2),
   },
   leftSidebar: {
     marginTop: theme.spacing(2),
-    marginRight: theme.spacing(2),
+    flex: '0 0 200px',
   },
   content: {
     marginTop: theme.spacing(5),
-    marginRight: theme.spacing(4),
     padding: theme.spacing(3, 2),
     minWidth: 800,
-    display: 'flex',
     backgroundColor: theme.palette.background.paper,
   },
   rightSidebar: {
@@ -53,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
     paddingBottom: theme.spacing(3),
   },
   header: {
-    ...theme.typography.h5,
+    ...theme.typography.h4,
   },
 }));
 
@@ -70,67 +67,58 @@ const Identity = () => {
           <h1 className={classes.header}>
             {user?.displayName ? user?.displayName : 'none'}
           </h1>
-          <Avatar src={user?.avatarUrl ? user.avatarUrl : undefined}>
-            {user?.displayName.charAt(0).toUpperCase()}
-          </Avatar>
-        </div>
-        <Paper className={classes.content}>
-          <Divider variant="fullWidth" />
-          <FormControl component="fieldset">
-            <FormGroup>
-              <FormLabel className={classes.control} component="legend">
-                Your account
-              </FormLabel>
-              <TextField
-                className={classes.control}
-                label="Name"
-                variant="outlined"
-                value={user?.name ? user?.name : '---'}
-              />
-              <TextField
-                className={classes.control}
-                label="Id (truncated)"
-                variant="outlined"
-                value={user?.humanId ? user?.humanId : '---'}
-              />
-              <TextField
-                className={classes.control}
-                label="Id (full)"
-                variant="outlined"
-                value={user?.id ? user?.id : '---'}
-              />
-              <TextField
-                className={classes.control}
-                label="E-Mail"
-                variant="outlined"
-                value={user?.email ? user?.email : '---'}
-              />
-              <TextField
-                className={classes.control}
-                label="Login"
-                variant="outlined"
-                value={user?.login ? user?.login : '---'}
-              />
-              <FormControlLabel
-                className={classes.control}
-                label="Protected"
-                labelPlacement="end"
-                value={user?.isProtected}
-                control={<Checkbox color="secondary" indeterminate />}
-              />
-            </FormGroup>
-          </FormControl>
-        </Paper>
-        <div className={classes.rightSidebar}>
           <Avatar
             src={user?.avatarUrl ? user.avatarUrl : undefined}
             className={classes.large}
           >
             {user?.displayName.charAt(0).toUpperCase()}
           </Avatar>
+          <Typography variant="h5" component="h2">
+            Your account
+          </Typography>
+          <Typography variant="subtitle2" component="h2">
+            Name: {user?.name ? user?.name : '---'}
+          </Typography>
+          <Typography variant="subtitle2" component="h3">
+            Id (truncated): {user?.humanId ? user?.humanId : '---'}
+            <InfoIcon
+              fontSize={'small'}
+              titleAccess={user?.id ? user?.id : '---'}
+            />
+          </Typography>
+          <Typography variant="subtitle2" component="h3">
+            Login: {user?.login ? user?.login : '---'}
+          </Typography>
+          <Typography
+            variant="subtitle2"
+            component="h3"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <MailOutlineIcon />
+            <Link href={'mailto:' + user?.email} color={'inherit'}>
+              {user?.email ? user?.email : '---'}
+            </Link>
+          </Typography>
+          <FormControlLabel
+            className={classes.control}
+            label="Protected"
+            labelPlacement="end"
+            value={user?.isProtected}
+            control={<Checkbox color="secondary" indeterminate />}
+          />
         </div>
+        <Paper className={classes.content}>
+          <Typography variant="h5" component="h2">
+            Bugs authored by {user?.displayName}
+          </Typography>
+          <BugList humanId={user?.humanId ? user?.humanId : ''} />
+        </Paper>
+        <div className={classes.rightSidebar}></div>
       </div>
-      <BugList humanId={user?.humanId ? user?.humanId : ''} />
     </main>
   );
 };