Update React & Material-UI

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