From 0ad23d0e24d876ff9bcd6b5d83c1514de132522f Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Wed, 4 Sep 2019 20:03:56 +0200
Subject: webui: Fix bug listing style

---
 webui/package-lock.json  | 18 +++++++++---------
 webui/src/Label.js       |  5 +++--
 webui/src/list/BugRow.js | 23 +++++++++++++++++------
 3 files changed, 29 insertions(+), 17 deletions(-)

(limited to 'webui')

diff --git a/webui/package-lock.json b/webui/package-lock.json
index 270126d6..74fe3ce1 100644
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -2350,7 +2350,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "requires": {
             "ansi-styles": "^2.2.1",
@@ -2375,7 +2375,7 @@
         },
         "supports-color": {
           "version": "2.0.0",
-          "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
           "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
         }
       }
@@ -2983,7 +2983,7 @@
     },
     "callsites": {
       "version": "2.0.0",
-      "resolved": "http://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
       "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
     },
     "camel-case": {
@@ -3700,7 +3700,7 @@
     },
     "clone-deep": {
       "version": "0.2.4",
-      "resolved": "http://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
       "integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=",
       "requires": {
         "for-own": "^0.1.3",
@@ -4543,7 +4543,7 @@
       "dependencies": {
         "globby": {
           "version": "6.1.0",
-          "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
           "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
           "requires": {
             "array-union": "^1.0.1",
@@ -4555,7 +4555,7 @@
           "dependencies": {
             "pify": {
               "version": "2.3.0",
-              "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
               "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
             }
           }
@@ -11701,7 +11701,7 @@
         },
         "css-select": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
           "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
           "requires": {
             "boolbase": "~1.0.0",
@@ -11940,7 +11940,7 @@
     },
     "rgba-regex": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
     "rimraf": {
@@ -12291,7 +12291,7 @@
         },
         "kind-of": {
           "version": "2.0.1",
-          "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
           "integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
           "requires": {
             "is-buffer": "^1.0.2"
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>
-- 
cgit