webui: upgrade to material-ui 4

6 files changed, 22 insertions, 22 deletions

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),
     },
   },
 }));