don't use deprecated theme spacing

interface/src/containers/APStatus.js

@@ -28,12 +28,12 @@ const styles = theme => ({
     backgroundColor: theme.palette.highlight_idle
   },
   fetching: {
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
     textAlign: "center"
   },
   button: {
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
   }
 });
 

interface/src/containers/NTPStatus.js

@@ -37,12 +37,12 @@ const styles = theme => ({
     backgroundColor: theme.palette.highlight_warn
   },
   fetching: {
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
     textAlign: "center"
   },
   button: {
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
   }
 });
 

interface/src/containers/SignInPage.js

@@ -17,30 +17,30 @@ const styles = theme => {
       display: "flex",
       height: "100vh",
       margin: "auto",
-      padding: theme.spacing.unit * 2,
+      padding: theme.spacing(2),
       justifyContent: "center",
       flexDirection: "column",
       maxWidth: theme.breakpoints.values.sm
     },
     loginPanel: {
       textAlign: "center",
-      padding: theme.spacing.unit * 2,
+      padding: theme.spacing(2),
       paddingTop: "200px",
       backgroundImage: 'url("/app/icon.png")',
       backgroundRepeat: "no-repeat",
-      backgroundPosition: "50% " + theme.spacing.unit * 2 + "px",
+      backgroundPosition: "50% " + theme.spacing(2) + "px",
       backgroundSize: "auto 150px",
       width: "100%"
     },
     extendedIcon: {
-      marginRight: theme.spacing.unit,
+      marginRight: theme.spacing(0.5),
     },
     textField: {
       width: "100%"
     },
     button: {
-      marginRight: theme.spacing.unit * 2,
-      marginTop: theme.spacing.unit * 2,
+      marginRight: theme.spacing(2),
+      marginTop: theme.spacing(2),
     }
   }
 }

interface/src/containers/SystemStatus.js

@@ -23,12 +23,12 @@ import SectionContent from '../components/SectionContent';
 
 const styles = theme => ({
   fetching: {
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
     textAlign: "center"
   },
   button: {
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
   }
 });
 

interface/src/containers/WiFiStatus.js

@@ -38,12 +38,12 @@ const styles = theme => ({
     backgroundColor: theme.palette.highlight_warn
   },
   fetching: {
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
     textAlign: "center"
   },
   button: {
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
   }
 });