Update React & Material-UI

app/src/ErrorBoundary.tsx

@@ -89,7 +89,7 @@ const styles = (theme: Theme) => ({
     maxWidth: 650,
     backgroundColor: theme.palette.background.default,
     margin: '10vh auto auto auto',
-    padding: `${2 * theme.spacing.unit}px`,
+    padding: theme.spacing(2),
     outline: 'none',
   },
   title: {
@@ -105,7 +105,7 @@ const styles = (theme: Theme) => ({
   },
   buttonPositioning: {
     textAlign: 'center' as 'center',
-    marginTop: `${theme.spacing.unit * 2}px`,
+    marginTop: theme.spacing(2),
   },
 })
 

app/src/UpdateNotifier.tsx

@@ -232,14 +232,14 @@ const styles = (theme: Theme) => ({
     color: theme.typography.button.color,
   },
   close: {
-    padding: theme.spacing.unit / 2,
+    padding: '4px',
   },
   root: {
     minWidth: '350px',
     maxWidth: '500px',
     backgroundColor: theme.palette.background.default,
     margin: '20vh auto auto auto',
-    padding: `${2 * theme.spacing.unit}px`,
+    padding: theme.spacing(2),
     outline: 'none',
   },
   title: {
@@ -252,7 +252,7 @@ const styles = (theme: Theme) => ({
     maxHeight: '28vh',
   },
   paper: {
-    padding: `${theme.spacing.unit * 2}px`,
+    padding: theme.spacing(2),
     color: theme.palette.text.secondary,
   },
   download: {

app/src/components/ConnectionSetup/AddButton.tsx

@@ -5,12 +5,12 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 
 const styles = (theme: Theme) => ({
   addButton: {
-    height: `${theme.spacing.unit * 4}px`,
-    width: `${theme.spacing.unit * 4}px`,
+    height: theme.spacing(4),
+    width: theme.spacing(4),
     minHeight: '0',
   },
   addIcon: {
-    height: `${theme.spacing.unit * 2}px`,
+    height: theme.spacing(2),
   },
 })
 

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -45,7 +45,7 @@ class ConnectionSettings extends React.Component<Props, State> {
     return (
       <div>
         <form className={classes.container} noValidate={true} autoComplete="off">
-          <Grid container={true} spacing={24}>
+          <Grid container={true} spacing={3}>
             <Grid item={true} xs={10} className={classes.gridPadding}>
               <TextField
                 className={classes.fullWidth}
@@ -145,7 +145,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
       backgroundColor: theme.palette.background.default,
     },
     button: {
-      marginTop: `${theme.spacing.unit * 3 + 2}px`,
+      marginTop: theme.spacing(3),
       float: 'right',
     },
   }

app/src/components/ConnectionSetup/ConnectionSettings.tsx

@@ -120,7 +120,7 @@ class ConnectionSettings extends React.Component<Props, State> {
       <div>
         {renderError}
         <form className={classes.container} noValidate={true} autoComplete="off">
-          <Grid container={true} spacing={24}>
+          <Grid container={true} spacing={3}>
             <Grid item={true} xs={5}>
               <TextField
                 label="Name"
@@ -344,7 +344,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
       marginTop: 0,
     },
     button: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
     },
     inputFormControl: {
       marginTop: '16px',

app/src/components/ConnectionSetup/ConnectionSetup.tsx

@@ -87,7 +87,7 @@ const styles = (theme: Theme) => ({
   left: {
     borderRightStyle: 'dotted' as 'dotted',
     borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
-    paddingTop: `${2 * theme.spacing.unit}px`,
+    paddingTop: theme.spacing(2),
     flex: 3,
     overflow: 'hidden',
     backgroundColor: theme.palette.background.default,
@@ -96,7 +96,7 @@ const styles = (theme: Theme) => ({
   right: {
     borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,
     backgroundColor: theme.palette.background.paper,
-    padding: `${2 * theme.spacing.unit}px`,
+    padding: theme.spacing(2),
     flex: 10,
   },
   connectionUri: {
@@ -106,7 +106,7 @@ const styles = (theme: Theme) => ({
     overflow: 'hidden' as 'hidden',
     color: theme.palette.text.hint,
     fontSize: '0.9em',
-    marginLeft: '24px',
+    marginLeft: theme.spacing(4),
   },
 })
 

app/src/components/Settings.tsx

@@ -47,12 +47,12 @@ const styles: StyleRulesCallback = theme => ({
   },
   title: {
     color: theme.palette.text.primary,
-    paddingTop: `${theme.spacing.unit}px`,
+    paddingTop: theme.spacing(1),
     ...theme.mixins.toolbar,
   },
   input: {
     minWidth: '150px',
-    margin: `auto ${theme.spacing.unit}px auto ${2 * theme.spacing.unit}px`,
+    margin: `auto ${theme.spacing(1)} auto ${theme.spacing(2)}px`,
   },
 })
 

app/src/components/Sidebar/Sidebar.tsx

@@ -230,7 +230,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
       height: '100%',
     },
     valuePaper: {
-      margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,
+      margin: theme.spacing(1),
     },
     heading: {
       fontSize: theme.typography.pxToRem(15),

app/src/components/TitleBar.tsx

@@ -32,16 +32,16 @@ const styles: StyleRulesCallback = theme => ({
     '&:hover': {
       backgroundColor: fade(theme.palette.common.white, 0.25),
     },
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
     marginLeft: 0,
     width: '100%',
     [theme.breakpoints.up('sm')]: {
-      marginLeft: theme.spacing.unit * 3,
+      marginLeft: theme.spacing(3),
       width: 'auto',
     },
   },
   searchIcon: {
-    width: theme.spacing.unit * 8,
+    width: theme.spacing(8),
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -54,10 +54,10 @@ const styles: StyleRulesCallback = theme => ({
     width: '100%',
   },
   inputInput: {
-    paddingTop: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-    paddingLeft: theme.spacing.unit * 10,
+    paddingTop: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(10),
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('md')]: {

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -101,7 +101,7 @@ const styles = (theme: Theme) => ({
     clear: 'both' as 'both',
   },
   listItem: {
-    padding: `0px 0px 0px ${theme.spacing.unit}px`,
+    padding: `0px 0px 0px ${theme.spacing(1)}`,
   },
 })