added some info about email control to the control tab for the component settings

src/component/ComponentSettings.tsx

@@ -953,7 +953,7 @@ export default function ComponentSettings(props: Props) {
             }
           />
         </FormControl>
-        <Typography variant="subtitle2" style={{ marginTop: 16, marginBottom: 8 }}>
+        <Typography variant="subtitle2" sx={{ marginTop: 2, marginBottom: 1 }}>
           Authorized Control Emails
         </Typography>
         <Grid container spacing={1} alignItems="center">
@@ -1007,6 +1007,28 @@ export default function ComponentSettings(props: Props) {
             </Grid>
           </Grid>
         ))}
+        <Divider sx={{ marginTop: 3, marginBottom: 2 }} />
+        <Typography variant="subtitle2" gutterBottom>
+          Email Control
+        </Typography>
+        <Typography variant="body2" color="textSecondary" gutterBottom>
+          Authorized emails can control this component by sending an email to the
+          control address. Contact your administrator for the control email
+          address. Use one of the following as the email subject:
+        </Typography>
+        <Box
+          sx={{
+            backgroundColor: "action.hover",
+            borderRadius: 1,
+            padding: 1.5,
+            marginTop: 1,
+            fontFamily: "monospace",
+            fontSize: "0.85rem"
+          }}>
+          <div>{device.id()}:{formComponent.settings.type}-{formComponent.settings.addressType}-{formComponent.settings.address} - ON</div>
+          <div>{device.id()}:{formComponent.settings.type}-{formComponent.settings.addressType}-{formComponent.settings.address} - OFF</div>
+          <div>{device.id()}:{formComponent.settings.type}-{formComponent.settings.addressType}-{formComponent.settings.address} - AUTO</div>
+        </Box>
       </DialogContent>
     );
   };