StatusPlenum now pulses with all colors that are found in plenum overlays

src/common/StatusPlenum.tsx

@@ -3,6 +3,8 @@ import { blue, orange } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { Device } from "models";
 import PulseBox from "./PulseBox";
+import { or } from "utils";
+import { useEffect, useState } from "react";
 
 interface Props {
   device: Device
@@ -14,8 +16,8 @@ const useStyles = makeStyles((theme: Theme) => {
     box: {
       display: "inline-block",
       borderRadius: "6px",
-      backgroundColor: lightMode ? "rgb(170, 170, 170)" : "rgb(34, 34, 34)",
+      backgroundColor: lightMode ? "rgb(155, 155, 155)" : "rgb(34, 34, 34)",
-      padding: theme.spacing(0.5),
+      padding: theme.spacing(0.75),
       marginRight: "auto",
       margin: theme.spacing(1),
     },
@@ -26,18 +28,34 @@ export default function StatusPlenum(props: Props) {
   const { device } = props;
   const classes = useStyles()
 
+  const colors = or(device.status.plenum?.overlays.map(overlay => overlay.color), []);
+  const messages = or(device.status.plenum?.overlays.map(overlay => overlay.message), []);
 
+  const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
+  const [, setColorIndex] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setColorIndex(prevIndex => {
+        const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
+        setColor(colors[newIndex]); // Use the new index here
+        return newIndex;
+      });
+    }, 2000);
+    
+    return () => clearInterval(interval);
+  }, []);
 
   return (
-    <PulseBox color="blue" className={classes.box} >
+    <PulseBox color={color} className={classes.box} >
       <Grid2 container direction="column" >
         <Grid2>
-          <Typography variant="body2" style={{ color: orange[500]}}>
+          <Typography variant="body2" style={{ color: orange[400]}}>
             {device.status.plenum?.temperature.toFixed(1)}°C
           </Typography>
         </Grid2>
         <Grid2>
-          <Typography variant="body2" style={{ color: blue[800]}}>
+          <Typography variant="body2" style={{ color: blue[700]}}>
             {device.status.plenum?.humidity.toFixed(1)}%
           </Typography>
         </Grid2>