relax the colours

interface/src/project/EMSESPDevicesForm.tsx

@@ -1,26 +1,40 @@
 import React, { Component, Fragment } from "react";
-import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { withStyles, Theme, createStyles } from "@material-ui/core/styles";
 
 import {
-  Table, TableBody, TableCell, TableHead, TableRow, TableContainer,
+  Table,
-  withWidth, WithWidthProps, isWidthDown,
+  TableBody,
-  Button, Tooltip,
+  TableCell,
-  DialogTitle, DialogContent, DialogActions, Box, Dialog, Typography
+  TableHead,
+  TableRow,
+  TableContainer,
+  withWidth,
+  WithWidthProps,
+  isWidthDown,
+  Button,
+  Tooltip,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Box,
+  Dialog,
+  Typography,
 } from "@material-ui/core";
 
 import RefreshIcon from "@material-ui/icons/Refresh";
-import ListIcon from '@material-ui/icons/List';
+import ListIcon from "@material-ui/icons/List";
-
-import { redirectingAuthorizedFetch, withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
 
 import {
-  RestFormProps,
+  redirectingAuthorizedFetch,
-  FormButton,
+  withAuthenticatedContext,
-} from "../components";
+  AuthenticatedContextProps,
+} from "../authentication";
+
+import { RestFormProps, FormButton } from "../components";
 
 import { EMSESPDevices, EMSESPDeviceData, Device } from "./EMSESPtypes";
 
-import { ENDPOINT_ROOT } from '../api';
+import { ENDPOINT_ROOT } from "../api";
 export const SCANDEVICES_ENDPOINT = ENDPOINT_ROOT + "scanDevices";
 export const DEVICE_DATA_ENDPOINT = ENDPOINT_ROOT + "deviceData";
 
@@ -33,7 +47,7 @@ const StyledTableCell = withStyles((theme: Theme) =>
     body: {
       fontSize: 14,
     },
-  }),
+  })
 )(TableCell);
 
 function compareDevices(a: Device, b: Device) {
@@ -52,49 +66,44 @@ interface EMSESPDevicesFormState {
   deviceData?: EMSESPDeviceData;
 }
 
-const LightTooltip = withStyles((theme: Theme) => ({
+type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> &
-  tooltip: {
+  AuthenticatedContextProps &
-    // backgroundColor: theme.palette.common.black,
+  WithWidthProps;
-    backgroundColor: theme.palette.primary.dark,
-    color: theme.palette.common.white,
-    boxShadow: theme.shadows[1],
-    borderRadius: "18px",
-    fontSize: 11
-  },
-}))(Tooltip);
-
-type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> & AuthenticatedContextProps & WithWidthProps;
-
-class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesFormState> {
 
+class EMSESPDevicesForm extends Component<
+  EMSESPDevicesFormProps,
+  EMSESPDevicesFormState
+> {
   state: EMSESPDevicesFormState = {
     confirmScanDevices: false,
-    processing: false
+    processing: false,
-  }
+  };
 
   noDevices = () => {
-    return (this.props.data.devices.length === 0);
+    return this.props.data.devices.length === 0;
   };
 
   noSensors = () => {
-    return (this.props.data.sensors.length === 0);
+    return this.props.data.sensors.length === 0;
   };
 
   noDeviceData = () => {
-    return ((this.state.deviceData?.deviceData || []).length === 0);
+    return (this.state.deviceData?.deviceData || []).length === 0;
   };
 
-
   createDeviceItems() {
     const { width, data } = this.props;
     return (
       <TableContainer>
-        <Typography variant="h6" color="primary" >
+        <Typography variant="h6" color="primary">
           Devices
         </Typography>
         <p></p>
         {!this.noDevices() && (
-          <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
+          <Table
+            size="small"
+            padding={isWidthDown("xs", width!) ? "none" : "default"}
+          >
             <TableHead>
               <TableRow>
                 <StyledTableCell>Type</StyledTableCell>
@@ -107,47 +116,53 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
               </TableRow>
             </TableHead>
             <TableBody>
-              {data.devices.sort(compareDevices).map(device => (
+              {data.devices.sort(compareDevices).map((device) => (
-                <TableRow hover key={device.id} onClick={() => this.handleRowClick(device.id)}>
+                <TableRow
+                  hover
+                  key={device.id}
+                  onClick={() => this.handleRowClick(device.id)}
+                >
                   <TableCell component="th" scope="row">
-                    <LightTooltip title="Show values..." placement="right">
+                    <Tooltip title="show values..." arrow placement="right-end">
-                      <Button startIcon={<ListIcon />} size="small" variant="outlined" color="primary">
+                      <Button
+                        startIcon={<ListIcon />}
+                        size="small"
+                        variant="outlined"
+                      >
                         {device.type}
                       </Button>
-                    </LightTooltip >
+                    </Tooltip>
                   </TableCell>
+                  <TableCell align="center">{device.brand}</TableCell>
+                  <TableCell align="center">{device.name}</TableCell>
                   <TableCell align="center">
-                    {device.brand}
+                    0x
-                  </TableCell>
+                    {("00" + device.deviceid.toString(16).toUpperCase()).slice(
-                  <TableCell align="center">
+                      -2
-                    {device.name}
+                    )}
-                  </TableCell>
-                  <TableCell align="center">
-                    0x{('00' + device.deviceid.toString(16).toUpperCase()).slice(-2)}
-                  </TableCell>
-                  <TableCell align="center">
-                    {device.productid}
-                  </TableCell>
-                  <TableCell align="center">
-                    {device.version}
-                  </TableCell>
-                  <TableCell>
-
                   </TableCell>
+                  <TableCell align="center">{device.productid}</TableCell>
+                  <TableCell align="center">{device.version}</TableCell>
+                  <TableCell></TableCell>
                 </TableRow>
               ))}
             </TableBody>
           </Table>
         )}
-        {this.noDevices() &&
+        {this.noDevices() && (
-          (
+          <Box
-            <Box bgcolor="error.main" color="error.contrastText" p={2} mt={2} mb={2}>
+            bgcolor="error.main"
-              <Typography variant="body1">
+            color="error.contrastText"
-                No EMS devices found. Check the connections and for possible Tx errors.
+            p={2}
-              </Typography>
+            mt={2}
-            </Box>
+            mb={2}
-          )
+          >
-        }
+            <Typography variant="body1">
+              No EMS devices found. Check the connections and for possible Tx
+              errors.
+            </Typography>
+          </Box>
+        )}
       </TableContainer>
     );
   }
@@ -169,7 +184,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
               </TableRow>
             </TableHead>
             <TableBody>
-              {data.sensors.map(sensorData => (
+              {data.sensors.map((sensorData) => (
                 <TableRow key={sensorData.id}>
                   <TableCell component="th" scope="row">
                     {sensorData.id}
@@ -182,15 +197,13 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
             </TableBody>
           </Table>
         )}
-        {this.noSensors() &&
+        {this.noSensors() && (
-          (
+          <Box color="warning.main" p={0} mt={0} mb={0}>
-            <Box color="warning.main" p={0} mt={0} mb={0}>
+            <Typography variant="body1">
-              <Typography variant="body1">
+              <i>There are no external temperature sensors connected</i>
-                <i>There are no external temperature sensors connected</i>
+            </Typography>
-              </Typography>
+          </Box>
-            </Box>
+        )}
-          )
-        }
       </TableContainer>
     );
   }
@@ -203,65 +216,88 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
       >
         <DialogTitle>Confirm Scan Devices</DialogTitle>
         <DialogContent dividers>
-          Are you sure you want to initiate a scan on the EMS bus for all new devices?
+          Are you sure you want to initiate a scan on the EMS bus for all new
+          devices?
         </DialogContent>
         <DialogActions>
-          <Button variant="contained" onClick={this.onScanDevicesRejected} color="secondary">
+          <Button
+            variant="contained"
+            onClick={this.onScanDevicesRejected}
+            color="secondary"
+          >
             Cancel
           </Button>
-          <Button startIcon={<RefreshIcon />} variant="contained" onClick={this.onScanDevicesConfirmed} disabled={this.state.processing} color="primary" autoFocus>
+          <Button
+            startIcon={<RefreshIcon />}
+            variant="contained"
+            onClick={this.onScanDevicesConfirmed}
+            disabled={this.state.processing}
+            color="primary"
+            autoFocus
+          >
             Start Scan
           </Button>
         </DialogActions>
       </Dialog>
-    )
+    );
   }
 
   onScanDevices = () => {
     this.setState({ confirmScanDevices: true });
-  }
+  };
 
   onScanDevicesRejected = () => {
     this.setState({ confirmScanDevices: false });
-  }
+  };
 
   onScanDevicesConfirmed = () => {
     this.setState({ processing: true });
-    redirectingAuthorizedFetch(SCANDEVICES_ENDPOINT).then(response => {
+    redirectingAuthorizedFetch(SCANDEVICES_ENDPOINT)
-      if (response.status === 200) {
+      .then((response) => {
-        this.props.enqueueSnackbar("Device scan is starting...", { variant: 'info' });
+        if (response.status === 200) {
-        this.setState({ processing: false, confirmScanDevices: false });
+          this.props.enqueueSnackbar("Device scan is starting...", {
-      } else {
+            variant: "info",
-        throw Error("Invalid status code: " + response.status);
+          });
-      }
+          this.setState({ processing: false, confirmScanDevices: false });
-    })
+        } else {
-      .catch(error => {
+          throw Error("Invalid status code: " + response.status);
-        this.props.enqueueSnackbar(error.message || "Problem with scan", { variant: 'error' });
+        }
+      })
+      .catch((error) => {
+        this.props.enqueueSnackbar(error.message || "Problem with scan", {
+          variant: "error",
+        });
         this.setState({ processing: false, confirmScanDevices: false });
       });
-  }
+  };
 
   handleRowClick = (id: any) => {
     this.setState({ deviceData: undefined });
     redirectingAuthorizedFetch(DEVICE_DATA_ENDPOINT, {
-      method: 'POST',
+      method: "POST",
       body: JSON.stringify({ id: id }),
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
-      }
+      },
-    }).then(response => {
+    })
-      if (response.status === 200) {
+      .then((response) => {
-        return response.json();
+        if (response.status === 200) {
-        // this.setState({ errorMessage: undefined }, this.props.loadData);
+          return response.json();
-      }
+          // this.setState({ errorMessage: undefined }, this.props.loadData);
-      throw Error("Unexpected response code: " + response.status);
+        }
-    }).then(json => {
+        throw Error("Unexpected response code: " + response.status);
-      this.setState({ deviceData: json });
+      })
-    }).catch(error => {
+      .then((json) => {
-      this.props.enqueueSnackbar(error.message || "Problem getting device data", { variant: 'error' });
+        this.setState({ deviceData: json });
-      this.setState({ deviceData: undefined });
+      })
-    });
+      .catch((error) => {
-  }
+        this.props.enqueueSnackbar(
+          error.message || "Problem getting device data",
+          { variant: "error" }
+        );
+        this.setState({ deviceData: undefined });
+      });
+  };
 
   renderDeviceData() {
     const { deviceData } = this.state;
@@ -278,43 +314,40 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
     return (
       <Fragment>
         <p></p>
-        <Box bgcolor="info.main" p={2} mt={1} mb={1}>
+        <Box bgcolor="info.main" p={1} mt={1} mb={1}>
-          <Typography variant="body1">
+          <Typography variant="body1" color="initial">
             {deviceData.deviceName}
           </Typography>
         </Box>
         {!this.noDeviceData() && (
           <TableContainer>
-            <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
+            <Table
-              <TableHead>
+              size="small"
-              </TableHead>
+              padding={isWidthDown("xs", width!) ? "none" : "default"}
+            >
+              <TableHead></TableHead>
               <TableBody>
-                {deviceData.deviceData.map(deviceData => (
+                {deviceData.deviceData.map((deviceData) => (
                   <TableRow key={deviceData.n}>
                     <TableCell component="th" scope="row">
                       {deviceData.n}
                     </TableCell>
-                    <TableCell align="right">
+                    <TableCell align="right">{deviceData.v}</TableCell>
-                      {deviceData.v}
-                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>
             </Table>
           </TableContainer>
         )}
-        {this.noDeviceData() &&
+        {this.noDeviceData() && (
-          (
+          <Box color="warning.main" p={0} mt={0} mb={0}>
-            <Box color="warning.main" p={0} mt={0} mb={0}>
+            <Typography variant="body1">
-              <Typography variant="body1">
+              <i>No data available for this device</i>
-                <i>No data available for this device</i>
+            </Typography>
-              </Typography>
+          </Box>
-            </Box>
+        )}
-          )
-        }
       </Fragment>
     );
-
   }
 
   render() {
@@ -327,21 +360,30 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
         <br></br>
         <Box display="flex" flexWrap="wrap">
           <Box flexGrow={1} padding={1}>
-            <FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>
+            <FormButton
+              startIcon={<RefreshIcon />}
+              variant="contained"
+              color="secondary"
+              onClick={this.props.loadData}
+            >
               Refresh
             </FormButton>
           </Box>
           <Box flexWrap="none" padding={1} whiteSpace="nowrap">
-            <FormButton startIcon={<RefreshIcon />} variant="contained" color="primary" onClick={this.onScanDevices}>
+            <FormButton
+              startIcon={<RefreshIcon />}
+              variant="contained"
+              color="primary"
+              onClick={this.onScanDevices}
+            >
               Scan Devices
-              </FormButton>
+            </FormButton>
           </Box>
         </Box>
         {this.renderScanDevicesDialog()}
       </Fragment>
     );
   }
-
 }
 
 export default withAuthenticatedContext(withWidth()(EMSESPDevicesForm));