minor style changes

upgrade react dependencies - except react-scripts which currently has an issue with eslint
https://github.com/facebook/create-react-app/issues/7753

interface/package.json

@@ -3,20 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.3.1",
-    "@material-ui/icons": "^4.2.1",
+    "@material-ui/core": "^4.4.3",
+    "@material-ui/icons": "^4.4.3",
     "compression-webpack-plugin": "^2.0.0",
     "jwt-decode": "^2.2.0",
     "moment": "^2.24.0",
     "notistack": "^0.8.9",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-form-validator-core": "^0.6.3",
-    "react-jss": "^10.0.0-alpha.23",
+    "react": "^16.10.1",
+    "react-dom": "^16.10.1",
+    "react-form-validator-core": "^0.6.4",
+    "react-jss": "^10.0.0",
     "react-material-ui-form-validator": "^2.0.9",
-    "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1",
+    "react-router": "^5.1.1",
+    "react-router-dom": "^5.1.1",
     "react-scripts": "3.0.1"
   },
   "scripts": {

interface/src/components/LoadingNotification.js

@@ -29,7 +29,7 @@ export default function LoadingNotification(props) {
         fetched ?
           errorMessage ?
             <div className={classes.loadingSettings}>
-              <Typography variant="h4" className={classes.loadingSettingsDetails}>
+              <Typography variant="h6" className={classes.loadingSettingsDetails}>
                 {errorMessage}
               </Typography>
               <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
@@ -41,7 +41,7 @@ export default function LoadingNotification(props) {
           :
           <div className={classes.loadingSettings}>
             <LinearProgress className={classes.loadingSettingsDetails} />
-            <Typography variant="h4" className={classes.loadingSettingsDetails}>
+            <Typography variant="h6" className={classes.loadingSettingsDetails}>
               Loading...
             </Typography>
           </div>

interface/src/forms/WiFiNetworkSelector.js

@@ -69,7 +69,7 @@ class WiFiNetworkSelector extends Component {
           scanningForNetworks ?
           <div>
             <LinearProgress className={classes.scanningProgress}/>
-            <Typography variant="h4" className={classes.scanningProgress}>
+            <Typography variant="h6" className={classes.scanningProgress}>
               Scanning...
             </Typography>
           </div>
@@ -80,7 +80,7 @@ class WiFiNetworkSelector extends Component {
           </List>
           :
           <div>
-            <Typography variant="h4" className={classes.scanningProgress}>
+            <Typography variant="h6" className={classes.scanningProgress}>
               {errorMessage}
             </Typography>
           </div>