don't use deprecated theme spacing

interface/src/forms/APSettingsForm.js

@@ -14,10 +14,10 @@ import PasswordValidator from '../components/PasswordValidator';
 
 const styles = theme => ({
   loadingSettings: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(0.5),
   },
   loadingSettingsDetails: {
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
     textAlign: "center"
   },
   textField: {
@@ -25,12 +25,12 @@ const styles = theme => ({
   },
   selectField:{
     width: "100%",
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(0.5)
   },
   button: {
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
   }
 });
 

interface/src/forms/ManageUsersForm.js

@@ -26,18 +26,18 @@ import { withAuthenticationContext } from '../authentication/Context';
 
 const styles = theme => ({
   loadingSettings: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(0.5),
   },
   loadingSettingsDetails: {
-    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),
   },
   table: {
-    '& td, & th': { padding: theme.spacing.unit }
+    '& td, & th': { padding: theme.spacing(0.5) }
   },
   actions: {
     whiteSpace: "nowrap"

interface/src/forms/NTPSettingsForm.js

@@ -13,18 +13,18 @@ import or from '../validators/or';
 
 const styles = theme => ({
   loadingSettings: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(0.5),
   },
   loadingSettingsDetails: {
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
     textAlign: "center"
   },
   textField: {
     width: "100%"
   },
   button: {
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
   }
 });
 

interface/src/forms/OTASettingsForm.js

@@ -16,23 +16,23 @@ import PasswordValidator from '../components/PasswordValidator';
 
 const styles = theme => ({
   loadingSettings: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(0.5),
   },
   loadingSettingsDetails: {
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
     textAlign: "center"
   },
   switchControl: {
     width: "100%",
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit
+    marginTop: theme.spacing(2),
+    marginBottom: 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/forms/SecuritySettingsForm.js

@@ -13,18 +13,18 @@ import { withAuthenticationContext } from '../authentication/Context';
 
 const styles = theme => ({
   loadingSettings: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(0.5),
   },
   loadingSettingsDetails: {
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
     textAlign: "center"
   },
   textField: {
     width: "100%"
   },
   button: {
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
   }
 });
 

interface/src/forms/UserForm.js

@@ -20,7 +20,7 @@ const styles = theme => ({
     width: "100%"
   },
   button: {
-    margin: theme.spacing.unit
+    margin: theme.spacing(0.5)
   }
 });
 

interface/src/forms/WiFiNetworkSelector.js

@@ -23,12 +23,12 @@ import { isNetworkOpen, networkSecurityMode } from '../constants/WiFiSecurityMod
 
 const styles = theme => ({
   scanningProgress: {
-    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/forms/WiFiSettingsForm.js

@@ -29,10 +29,10 @@ import PasswordValidator from '../components/PasswordValidator';
 
 const styles = theme => ({
   loadingSettings: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(0.5),
   },
   loadingSettingsDetails: {
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
     textAlign: "center"
   },
   textField: {
@@ -42,8 +42,8 @@ const styles = theme => ({
     width: "100%"
   },
   button: {
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
   }
 });