Style user site and adjust popup button #12

4 files changed, 107 insertions, 76 deletions

diff --git a/webui/src/components/CurrentIdentity/CurrentIdentity.tsx b/webui/src/components/CurrentIdentity/CurrentIdentity.tsx
index f3dff5ed..b68b84e5 100644
--- a/webui/src/components/CurrentIdentity/CurrentIdentity.tsx
+++ b/webui/src/components/CurrentIdentity/CurrentIdentity.tsx
@@ -26,6 +26,9 @@ const useStyles = makeStyles((theme) => ({
   profileLink: {
     ...theme.typography.button,
   },
+  popupButton: {
+    textTransform: 'none',
+  },
 }));
 
 const CurrentIdentity = () => {
@@ -57,15 +60,14 @@ const CurrentIdentity = () => {
         aria-controls={open ? 'menu-list-grow' : undefined}
         aria-haspopup="true"
         onClick={handleToggle}
+        className={classes.popupButton}
       >
         <Avatar src={user.avatarUrl ? user.avatarUrl : undefined}>
           {user.displayName.charAt(0).toUpperCase()}
         </Avatar>
+        <div className={classes.displayName}>{user.displayName}</div>
+        <LockIcon color="secondary" className={user.isProtected ? '' : ''} />
       </Button>
-      <LockIcon
-        color="secondary"
-        className={user.isProtected ? '' : classes.hidden}
-      />
       <Popper
         open={open}
         anchorEl={anchorRef.current}
@@ -99,7 +101,6 @@ const CurrentIdentity = () => {
           </Grow>
         )}
       </Popper>
-      <div className={classes.displayName}>{user.displayName}</div>
     </>
   );
 };
diff --git a/webui/src/pages/identity/BugList.tsx b/webui/src/pages/identity/BugList.tsx
index e1083cfb..623deda5 100644
--- a/webui/src/pages/identity/BugList.tsx
+++ b/webui/src/pages/identity/BugList.tsx
@@ -1,18 +1,37 @@
 import React from 'react';
 
-import { Link } from '@material-ui/core';
+import { Card, Link, Typography } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Date from '../../components/Date';
 
 import { useGetBugsByUserQuery } from './GetBugsByUser.generated';
 
+const useStyles = makeStyles((theme) => ({
+  main: {
+    ...theme.typography.body2,
+  },
+  bugLink: {
+    ...theme.typography.button,
+  },
+  cards: {
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.info.contrastText,
+    padding: theme.spacing(1),
+    margin: theme.spacing(1),
+  },
+}));
+
 type Props = {
   humanId: string;
 };
 
 function BugList({ humanId }: Props) {
+  const classes = useStyles();
   const { loading, error, data } = useGetBugsByUserQuery({
     variables: {
-      query: 'author:' + humanId,
+      query: 'author:' + humanId + ' sort:creation',
     },
   });
 
@@ -22,10 +41,31 @@ function BugList({ humanId }: Props) {
 
   console.log(bugs);
   return (
-    <ol>
-      <li>{bugs ? bugs[0].title : ''}</li>
-      <Link href={'/bug/' + (bugs ? bugs[0].id : '')}>Klick</Link>
-    </ol>
+    <div className={classes.main}>
+      {bugs?.map((bug, index) => {
+        return (
+          <Card className={classes.cards}>
+            <Typography variant="overline" component="h2">
+              <Link
+                className={classes.bugLink}
+                href={'/bug/' + bug.id}
+                color={'inherit'}
+              >
+                {bug.title}
+              </Link>
+            </Typography>
+            <Typography variant="subtitle2">
+              Created&nbsp;
+              <Date date={bug.createdAt} />
+            </Typography>
+            <Typography variant="subtitle2">
+              Last edited&nbsp;
+              <Date date={bug.createdAt} />
+            </Typography>
+          </Card>
+        );
+      })}
+    </div>
   );
 }
 
diff --git a/webui/src/pages/identity/GetBugsByUser.graphql b/webui/src/pages/identity/GetBugsByUser.graphql
index 0be85578..0f170dc1 100644
--- a/webui/src/pages/identity/GetBugsByUser.graphql
+++ b/webui/src/pages/identity/GetBugsByUser.graphql
@@ -4,6 +4,8 @@ query GetBugsByUser ($query: String){
             nodes {
                 id
                 title
+                createdAt
+                lastEdit
             }
         }
     }
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>
   );
 };