Merge pull request #211 from MichaelMure/update-webui

Update webui

11 files changed, 50 insertions, 42 deletions

diff --git a/webui/src/App.js b/webui/src/App.js
index b2eb6bf0..4a52eca1 100644
--- a/webui/src/App.js
+++ b/webui/src/App.js
@@ -11,7 +11,7 @@ import ListQuery from './list/ListQuery';
 
 const useStyles = makeStyles(theme => ({
   appTitle: {
-    ...theme.typography.title,
+    ...theme.typography.h6,
     color: 'white',
     textDecoration: 'none',
   },
diff --git a/webui/src/Label.js b/webui/src/Label.js
index fc8a3a22..e5b00b12 100644
--- a/webui/src/Label.js
+++ b/webui/src/Label.js
@@ -27,10 +27,11 @@ const createStyle = color => ({
 
 const useStyles = makeStyles(theme => ({
   label: {
-    ...theme.typography.body2,
-    padding: '0 6px',
+    ...theme.typography.body1,
+    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/bug/Bug.js b/webui/src/bug/Bug.js
index ff57dfa9..19b8b9ce 100644
--- a/webui/src/bug/Bug.js
+++ b/webui/src/bug/Bug.js
@@ -11,29 +11,29 @@ const useStyles = makeStyles(theme => ({
   main: {
     maxWidth: 800,
     margin: 'auto',
-    marginTop: theme.spacing.unit * 4,
+    marginTop: theme.spacing(4),
   },
   header: {
-    marginLeft: theme.spacing.unit + 40,
+    marginLeft: theme.spacing(1) + 40,
   },
   title: {
-    ...theme.typography.headline,
+    ...theme.typography.h5,
   },
   id: {
-    ...theme.typography.subheading,
-    marginLeft: theme.spacing.unit,
+    ...theme.typography.subtitle1,
+    marginLeft: theme.spacing(1),
   },
   container: {
     display: 'flex',
-    marginBottom: theme.spacing.unit,
+    marginBottom: theme.spacing(1),
   },
   timeline: {
     flex: 1,
-    marginTop: theme.spacing.unit * 2,
-    marginRight: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
+    marginRight: theme.spacing(2),
   },
   sidebar: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
     flex: '0 0 200px',
   },
   labelList: {
@@ -42,8 +42,8 @@ const useStyles = makeStyles(theme => ({
     margin: 0,
   },
   label: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
     '& > *': {
       display: 'block',
     },
@@ -70,10 +70,10 @@ function Bug({ bug }) {
           <TimelineQuery id={bug.id} />
         </div>
         <div className={classes.sidebar}>
-          <Typography variant={'subheading'}>Labels</Typography>
+          <Typography variant={'subtitle1'}>Labels</Typography>
           <ul className={classes.labelList}>
             {bug.labels.map(l => (
-              <li className={classes.label}>
+              <li className={classes.label} key={l.name}>
                 <Label label={l} key={l.name} />
               </li>
             ))}
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
index 2405fdb5..4773e7eb 100644
--- a/webui/src/bug/LabelChange.js
+++ b/webui/src/bug/LabelChange.js
@@ -7,8 +7,8 @@ import Label from '../Label';
 
 const useStyles = makeStyles(theme => ({
   main: {
-    ...theme.typography.body2,
-    marginLeft: theme.spacing.unit + 40,
+    ...theme.typography.body1,
+    marginLeft: theme.spacing(1) + 40,
   },
   author: {
     fontWeight: 'bold',
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index 64498135..db67a3f5 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -19,10 +19,10 @@ const useStyles = makeStyles(theme => ({
   },
   bubble: {
     flex: 1,
-    marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
   },
   header: {
-    ...theme.typography.body2,
+    ...theme.typography.body1,
     color: '#444',
     padding: '0.5rem 1rem',
     borderBottom: '1px solid #ddd',
@@ -41,7 +41,7 @@ const useStyles = makeStyles(theme => ({
     marginLeft: '0.5rem',
   },
   body: {
-    ...theme.typography.body1,
+    ...theme.typography.body2,
     padding: '0 1rem',
   },
 }));
diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js
index eeff1a7b..070bbb8f 100644
--- a/webui/src/bug/SetStatus.js
+++ b/webui/src/bug/SetStatus.js
@@ -6,8 +6,8 @@ import Date from '../Date';
 
 const useStyles = makeStyles(theme => ({
   main: {
-    ...theme.typography.body2,
-    marginLeft: theme.spacing.unit + 40,
+    ...theme.typography.body1,
+    marginLeft: theme.spacing(1) + 40,
   },
 }));
 
diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js
index 9ba5a76e..e4c30a8d 100644
--- a/webui/src/bug/SetTitle.js
+++ b/webui/src/bug/SetTitle.js
@@ -6,8 +6,8 @@ import Date from '../Date';
 
 const useStyles = makeStyles(theme => ({
   main: {
-    ...theme.typography.body2,
-    marginLeft: theme.spacing.unit + 40,
+    ...theme.typography.body1,
+    marginLeft: theme.spacing(1) + 40,
   },
   bold: {
     fontWeight: 'bold',
diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js
index d77e0d4b..7d1946f2 100644
--- a/webui/src/bug/Timeline.js
+++ b/webui/src/bug/Timeline.js
@@ -8,7 +8,7 @@ import SetTitle from './SetTitle';
 const useStyles = makeStyles(theme => ({
   main: {
     '& > *:not(:last-child)': {
-      marginBottom: theme.spacing.unit * 2,
+      marginBottom: theme.spacing(2),
     },
   },
 }));
diff --git a/webui/src/index.js b/webui/src/index.js
index 885911f5..f71e82f3 100644
--- a/webui/src/index.js
+++ b/webui/src/index.js
@@ -1,4 +1,3 @@
-import { install } from '@material-ui/styles';
 import ThemeProvider from '@material-ui/styles/ThemeProvider';
 import { createMuiTheme } from '@material-ui/core/styles';
 import ApolloClient from 'apollo-boost';
@@ -7,10 +6,7 @@ import { ApolloProvider } from 'react-apollo';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 
-install();
-
-// TODO(sandhose): this is temporary until Material-UI v4 goes out
-const App = React.lazy(() => import('./App'));
+import App from './App';
 
 const theme = createMuiTheme();
 
diff --git a/webui/src/list/BugRow.js b/webui/src/list/BugRow.js
index c5fc7647..7b601916 100644
--- a/webui/src/list/BugRow.js
+++ b/webui/src/list/BugRow.js
@@ -13,13 +13,13 @@ import Author from '../Author';
 
 const Open = ({ className }) => (
   <Tooltip title="Open">
-    <ErrorOutline nativeColor="#28a745" className={className} />
+    <ErrorOutline htmlColor="#28a745" className={className} />
   </Tooltip>
 );
 
 const Closed = ({ className }) => (
   <Tooltip title="Closed">
-    <ErrorOutline nativeColor="#cb2431" className={className} />
+    <ErrorOutline htmlColor="#cb2431" className={className} />
   </Tooltip>
 );
 
@@ -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.unit,
+    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={'title'} 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>
diff --git a/webui/src/list/List.js b/webui/src/list/List.js
index 45c2c963..54b2fe97 100644
--- a/webui/src/list/List.js
+++ b/webui/src/list/List.js
@@ -11,7 +11,7 @@ const useStyles = makeStyles(theme => ({
   main: {
     maxWidth: 600,
     margin: 'auto',
-    marginTop: theme.spacing.unit * 4,
+    marginTop: theme.spacing(4),
   },
   pagination: {
     ...theme.typography.overline,