webui: upgrade to material-ui 4

11 files changed, 30 insertions, 34 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..6edf46a2 100644
--- a/webui/src/Label.js
+++ b/webui/src/Label.js
@@ -27,7 +27,7 @@ const createStyle = color => ({
 
 const useStyles = makeStyles(theme => ({
   label: {
-    ...theme.typography.body2,
+    ...theme.typography.body1,
     padding: '0 6px',
     fontSize: '0.9em',
     margin: '0 1px',
diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js
index d29cb5a7..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,7 +70,7 @@ 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} key={l.name}>
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..4444dbc9 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>
 );
 
@@ -52,7 +52,7 @@ const useStyles = makeStyles(theme => ({
     display: 'inline',
   },
   labels: {
-    paddingLeft: theme.spacing.unit,
+    paddingLeft: theme.spacing(1),
   },
 }));
 
@@ -65,7 +65,7 @@ function BugRow({ bug }) {
         <div className={classes.expand}>
           <Link to={'bug/' + bug.humanId}>
             <div className={classes.expand}>
-              <Typography variant={'title'} className={classes.title}>
+              <Typography variant={'h6'} className={classes.title}>
                 {bug.title}
               </Typography>
               {bug.labels.length > 0 && (
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,