tooltip color, edit icon color, text changes

interface/src/project/EMSESPDevicesForm.tsx

@@ -36,6 +36,16 @@ const StyledTableCell = withStyles((theme: Theme) =>
   })
 )(TableCell);
 
+const CustomTooltip = withStyles((theme: Theme) => ({
+  tooltip: {
+    backgroundColor: theme.palette.secondary.main,
+    color: 'white',
+    boxShadow: theme.shadows[1],
+    fontSize: 11,
+    border: '1px solid #dadde9',
+  },
+}))(Tooltip);
+
 function compareDevices(a: Device, b: Device) {
   if (a.type < b.type) {
     return -1;
@@ -162,14 +172,14 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
               {data.devices.sort(compareDevices).map((device) => (
                 <TableRow hover key={device.id} onClick={() => this.handleRowClick(device)}>
                   <TableCell>
-                    <Tooltip
+                    <CustomTooltip
                       title={"DeviceID:0x" + ("00" + device.deviceid.toString(16).toUpperCase()).slice(-2) + " ProductID:" + device.productid + " Version:" + device.version}
-                      arrow placement="right-end"
+                      placement="right-end"
                     >
                       <Button startIcon={<ListIcon />} size="small" variant="outlined">
                         {device.type}
                       </Button>
-                    </Tooltip>
+                    </CustomTooltip>
                   </TableCell>
                   <TableCell>{device.brand + " " + device.name} </TableCell>
                 </TableRow>
@@ -352,10 +362,13 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
                       <TableRow hover key={i}>
                         <TableCell padding="checkbox" style={{ width: 18 }} >
                           {deviceData.data[i + 3] && me.admin && (
-                            <IconButton edge="start" size="small" aria-label="Edit"
+                            <CustomTooltip title="change value" placement="left-end"
-                              onClick={() => this.sendCommand(i)}>
+                            >
-                              <EditIcon fontSize="small" />
+                              <IconButton edge="start" size="small" aria-label="Edit"
-                            </IconButton>
+                                onClick={() => this.sendCommand(i)}>
+                                <EditIcon color="primary" fontSize="small" />
+                              </IconButton>
+                            </CustomTooltip>
                           )}
                         </TableCell>
                         <TableCell padding="none" component="th" scope="row">{deviceData.data[i + 2]}</TableCell>

interface/src/project/EMSESPSettingsForm.tsx

@@ -108,7 +108,7 @@ class EMSESPSettingsForm extends React.Component<EMSESPSettingsFormProps> {
       <ValidatorForm onSubmit={saveData}>
         <Box bgcolor="info.main" p={2} mt={2} mb={2}>
           <Typography variant="body1">
-            Modify any of the EMS-ESP settings here. For help refer to the{" "}
+            Adjust any of the EMS-ESP settings here. For help refer to the{" "}
             <Link
               target="_blank"
               href="https://emsesp.github.io/docs/#/Configure-firmware32?id=ems-esp-settings"

interface/src/project/ValueForm.tsx

@@ -31,7 +31,7 @@ class ValueForm extends React.Component<ValueFormProps> {
         return (
             <ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
                 <Dialog  maxWidth="xs" onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open>
-                    <DialogTitle id="user-form-dialog-title">Modify the {devicevalue.name}</DialogTitle>
+                    <DialogTitle id="user-form-dialog-title">Change the {devicevalue.name}</DialogTitle>
                     <DialogContent dividers>
                         <TextValidator
                             validators={['required']}
@@ -46,7 +46,7 @@ class ValueForm extends React.Component<ValueFormProps> {
                         />
                         <Box color="warning.main" p={1} pl={0} pr={0} mt={0} mb={0}>
                             <Typography variant="body2">
-                                <i>Note: It may take a few seconds before the change is visible. If nothing happens check the logs.</i>
+                                <i>Note: it may take a few seconds before the change is visible. If nothing happens check the logs.</i>
                             </Typography>
                         </Box>
                     </DialogContent>