update spacing

frontend/src/components/FunfamMatchList.js

@@ -112,18 +112,18 @@ FunfamMatchTableHead.propTypes = {
 
 const toolbarStyles = theme => ({
   root: {
-    paddingRight: theme.spacing.unit
+    paddingRight: theme.spacing(1)
   },
   highlight:
     theme.palette.type === "light"
       ? {
-          color: theme.palette.secondary.main,
-          backgroundColor: lighten(theme.palette.secondary.light, 0.85)
-        }
+        color: theme.palette.secondary.main,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.85)
+      }
       : {
-          color: theme.palette.text.primary,
-          backgroundColor: theme.palette.secondary.dark
-        },
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.secondary.dark
+      },
   spacer: {
     flex: "1 1 100%"
   },
@@ -150,10 +150,10 @@ let FunfamMatchTableToolbar = props => {
             {numSelected} selected
           </Typography>
         ) : (
-          <Typography variant="h6" id="tableTitle">
-            Domain Matches
+            <Typography variant="h6" id="tableTitle">
+              Domain Matches
           </Typography>
-        )}
+          )}
       </div>
       <div className={classes.spacer} />
       <div className={classes.actions}>
@@ -164,12 +164,12 @@ let FunfamMatchTableToolbar = props => {
             </IconButton>
           </Tooltip>
         ) : (
-          <Tooltip title="Filter list">
-            <IconButton aria-label="Filter list">
-              <FilterListIcon />
-            </IconButton>
-          </Tooltip>
-        )}
+            <Tooltip title="Filter list">
+              <IconButton aria-label="Filter list">
+                <FilterListIcon />
+              </IconButton>
+            </Tooltip>
+          )}
       </div>
     </Toolbar>
   );
@@ -187,7 +187,7 @@ FunfamMatchTableToolbar = withStyles(toolbarStyles)(FunfamMatchTableToolbar);
 const styles = theme => ({
   root: {
     width: "100%",
-    marginTop: theme.spacing.unit * 1
+    marginTop: theme.spacing(1)
   },
   table: {
     minWidth: 1020

frontend/src/components/ModelStructure.js

@@ -3,29 +3,29 @@ import PropTypes from "prop-types";
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
-    root: {
-      flexGrow: 1,
-      padding: theme.spacing.unit * 2,
-    },
+  root: {
+    flexGrow: 1,
+    padding: theme.spacing(2),
+  },
 });
-  
+
 class ModelStructure extends Component {
 
-    static propTypes = {
-        apiBase: PropTypes.string.isRequired,
-        submitEndpoint: PropTypes.string.isRequired,
-        checkEndpoint: PropTypes.string.isRequired,
-        resultsEndpoint: PropTypes.string.isRequired,
-        checkTimeout: PropTypes.number.isRequired,
-        checkMaxAttempts: PropTypes.number.isRequired,
-        queryId: PropTypes.string.isRequired,
-        querySequence: PropTypes.string.isRequired,
-      };
-    
-    render() {
-        const { data, loaded, placeholder } = this.state;
-        return loaded ? data : <p>{placeholder}</p>;
-    }
+  static propTypes = {
+    apiBase: PropTypes.string.isRequired,
+    submitEndpoint: PropTypes.string.isRequired,
+    checkEndpoint: PropTypes.string.isRequired,
+    resultsEndpoint: PropTypes.string.isRequired,
+    checkTimeout: PropTypes.number.isRequired,
+    checkMaxAttempts: PropTypes.number.isRequired,
+    queryId: PropTypes.string.isRequired,
+    querySequence: PropTypes.string.isRequired,
+  };
+
+  render() {
+    const { data, loaded, placeholder } = this.state;
+    return loaded ? data : <p>{placeholder}</p>;
+  }
 }
 
 ModelStructure.propTypes = {

frontend/src/components/SelectTemplateStep.js

@@ -10,7 +10,7 @@ import SelectTemplateTable from './SelectTemplateTable.js';
 const styles = theme => ({
   root: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 
@@ -37,7 +37,7 @@ class SelectTemplateStep extends Component {
   }
   renderContent() {
     const { data } = this.props.data;
-    return(
+    return (
       <div className={classes.root}>
         <SelectTemplateTable data={data} />
       </div>
@@ -52,7 +52,7 @@ class SelectTemplateStep extends Component {
     } else {
       return this.renderError();
     }
-  }    
+  }
 }
 
 SelectTemplateStep.propTypes = {

frontend/src/components/SelectTemplateTable.js

@@ -115,7 +115,7 @@ SelectTemplateTableHead.propTypes = {
 
 const toolbarStyles = theme => ({
   root: {
-    paddingRight: theme.spacing.unit,
+    paddingRight: theme.spacing(1),
   },
   highlight:
     theme.palette.type === 'light'
@@ -188,7 +188,7 @@ SelectTemplateTableToolbar = withStyles(toolbarStyles)(SelectTemplateTableToolba
 const styles = theme => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 1,
+    marginTop: theme.spacing(1),
   },
   table: {
     minWidth: 1020,

frontend/src/components/StepProgress.js

@@ -16,11 +16,11 @@ const styles = theme => ({
     alignItems: 'center',
   },
   wrapper: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     position: 'relative',
   },
 });
-  
+
 class StepProgress extends Component {
 
   constructor(props) {
@@ -32,7 +32,7 @@ class StepProgress extends Component {
       message: 'No message',
     };
   }
-    
+
   render() {
     const { loading, success, error, message } = this.state;
     const { classes } = this.props;
@@ -40,14 +40,14 @@ class StepProgress extends Component {
     return (
       <div className={classes.root}>
         <div className={classes.wrapper}>
-        <Button
-          variant="fab"
-          color="primary"
-          onClick={this.handleButtonClick}
-        >
-          {success ? <CheckIcon /> : <SaveIcon />}
-        </Button>
-        {loading && <CircularProgress size={68} />}
+          <Button
+            variant="fab"
+            color="primary"
+            onClick={this.handleButtonClick}
+          >
+            {success ? <CheckIcon /> : <SaveIcon />}
+          </Button>
+          {loading && <CircularProgress size={68} />}
         </div>
       </div>
     );