don't use deprecated variants

interface/src/components/SectionContent.js

@@ -16,7 +16,7 @@ function SectionContent(props) {
   const { children, classes, title } = props;
   return (
       <Paper className={classes.content}>
-        <Typography variant="display1">
+        <Typography variant="h4">
           {title}
         </Typography>
         {children}

interface/src/containers/APStatus.js

@@ -107,7 +107,7 @@ class APStatus extends Component {
          !fetched ?
          <div>
            <LinearProgress className={classes.fetching}/>
-           <Typography variant="display1" className={classes.fetching}>
+           <Typography variant="h4" className={classes.fetching}>
              Loading...
            </Typography>
          </div>
@@ -115,7 +115,7 @@ class APStatus extends Component {
         data ? this.renderAPStatus(data, classes)
        :
         <div>
-          <Typography variant="display1" className={classes.fetching}>
+          <Typography variant="h4" className={classes.fetching}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>

interface/src/containers/NTPStatus.js

@@ -126,7 +126,7 @@ class NTPStatus extends Component {
          !fetched ?
          <div>
            <LinearProgress className={classes.fetching}/>
-           <Typography variant="display1" className={classes.fetching}>
+           <Typography variant="h4" className={classes.fetching}>
              Loading...
            </Typography>
          </div>
@@ -134,7 +134,7 @@ class NTPStatus extends Component {
         data ? this.renderNTPStatus(data, classes)
        :
         <div>
-          <Typography variant="display1" className={classes.fetching}>
+          <Typography variant="h4" className={classes.fetching}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>

interface/src/containers/WiFiStatus.js

@@ -137,7 +137,7 @@ class WiFiStatus extends Component {
           !fetched ?
             <div>
               <LinearProgress className={classes.fetching} />
-              <Typography variant="display1" className={classes.fetching}>
+              <Typography variant="h4" className={classes.fetching}>
                 Loading...
            </Typography>
             </div>
@@ -145,7 +145,7 @@ class WiFiStatus extends Component {
             data ? this.renderWiFiStatus(data, classes)
               :
               <div>
-                <Typography variant="display1" className={classes.fetching}>
+                <Typography variant="h4" className={classes.fetching}>
                   {errorMessage}
                 </Typography>
                 <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>

interface/src/forms/APSettingsForm.js

@@ -45,7 +45,7 @@ class APSettingsForm extends React.Component {
 
          <div className={classes.loadingSettings}>
            <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="display1" className={classes.loadingSettingsDetails}>
+           <Typography variant="h4" className={classes.loadingSettingsDetails}>
              Loading...
            </Typography>
          </div>
@@ -99,7 +99,7 @@ class APSettingsForm extends React.Component {
         :
 
         <div className={classes.loadingSettings}>
-          <Typography variant="display1" className={classes.loadingSettingsDetails}>
+          <Typography variant="h4" className={classes.loadingSettingsDetails}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

interface/src/forms/NTPSettingsForm.js

@@ -43,7 +43,7 @@ class NTPSettingsForm extends React.Component {
 
          <div className={classes.loadingSettings}>
            <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="display1" className={classes.loadingSettingsDetails}>
+           <Typography variant="h4" className={classes.loadingSettingsDetails}>
              Loading...
            </Typography>
          </div>
@@ -87,7 +87,7 @@ class NTPSettingsForm extends React.Component {
         :
 
         <div className={classes.loadingSettings}>
-          <Typography variant="display1" className={classes.loadingSettingsDetails}>
+          <Typography variant="h4" className={classes.loadingSettingsDetails}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

interface/src/forms/OTASettingsForm.js

@@ -51,7 +51,7 @@ class OTASettingsForm extends React.Component {
 
          <div className={classes.loadingSettings}>
            <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="display1" className={classes.loadingSettingsDetails}>
+           <Typography variant="h4" className={classes.loadingSettingsDetails}>
              Loading...
            </Typography>
          </div>
@@ -107,7 +107,7 @@ class OTASettingsForm extends React.Component {
         :
 
         <div className={classes.loadingSettings}>
-          <Typography variant="display1" className={classes.loadingSettingsDetails}>
+          <Typography variant="h4" className={classes.loadingSettingsDetails}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

interface/src/forms/WiFiNetworkSelector.js

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

interface/src/forms/WiFiSettingsForm.js

@@ -88,7 +88,7 @@ class WiFiSettingsForm extends React.Component {
 
          <div className={classes.loadingSettings}>
            <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="display1" className={classes.loadingSettingsDetails}>
+           <Typography variant="h4" className={classes.loadingSettingsDetails}>
              Loading...
            </Typography>
          </div>
@@ -213,7 +213,7 @@ class WiFiSettingsForm extends React.Component {
         :
 
         <div className={classes.loadingSettings}>
-          <Typography variant="display1" className={classes.loadingSettingsDetails}>
+          <Typography variant="h4" className={classes.loadingSettingsDetails}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>