webui: Fix bug listing style

2 files changed, 20 insertions, 8 deletions

diff --git a/webui/src/Label.js b/webui/src/Label.js
index 6edf46a2..e5b00b12 100644
--- a/webui/src/Label.js
+++ b/webui/src/Label.js
@@ -28,9 +28,10 @@ const createStyle = color => ({
 const useStyles = makeStyles(theme => ({
   label: {
     ...theme.typography.body1,
-    padding: '0 6px',
+    padding: '1px 6px 0.5px',
     fontSize: '0.9em',
-    margin: '0 1px',
+    fontWeight: '500',
+    margin: '0.05em 1px calc(-1.5px + 0.05em)',
     borderRadius: '3px',
     display: 'inline-block',
     borderBottom: 'solid 1.5px',
diff --git a/webui/src/list/BugRow.js b/webui/src/list/BugRow.js
index 4444dbc9..7b601916 100644
--- a/webui/src/list/BugRow.js
+++ b/webui/src/list/BugRow.js
@@ -38,21 +38,34 @@ const useStyles = makeStyles(theme => ({
   cell: {
     display: 'flex',
     alignItems: 'center',
+    padding: theme.spacing(1),
     '& a': {
       textDecoration: 'none',
     },
   },
   status: {
-    margin: 10,
+    margin: theme.spacing(1, 2),
   },
   expand: {
     width: '100%',
+    lineHeight: '20px',
   },
   title: {
     display: 'inline',
+    color: theme.palette.text.primary,
+    fontSize: '1.3rem',
+    fontWeight: 500,
+  },
+  details: {
+    ...theme.typography.textSecondary,
+    lineHeight: '1.5rem',
+    color: theme.palette.text.secondary,
   },
   labels: {
     paddingLeft: theme.spacing(1),
+    '& > *': {
+      display: 'inline-block',
+    },
   },
 }));
 
@@ -65,9 +78,7 @@ function BugRow({ bug }) {
         <div className={classes.expand}>
           <Link to={'bug/' + bug.humanId}>
             <div className={classes.expand}>
-              <Typography variant={'h6'} className={classes.title}>
-                {bug.title}
-              </Typography>
+              <span className={classes.title}>{bug.title}</span>
               {bug.labels.length > 0 && (
                 <span className={classes.labels}>
                   {bug.labels.map(l => (
@@ -77,11 +88,11 @@ function BugRow({ bug }) {
               )}
             </div>
           </Link>
-          <Typography color={'textSecondary'}>
+          <div className={classes.details}>
             {bug.humanId} opened
             <Date date={bug.createdAt} />
             by {bug.author.displayName}
-          </Typography>
+          </div>
         </div>
       </TableCell>
     </TableRow>