added status plenum to display plenum data, added pulseBox to extend the mui box and give it a pulsing animation of a given color

src/common/StatusPlenum.tsx

@@ -0,0 +1,51 @@
+import { Grid2, Theme, Typography } from "@mui/material";
+import { blue, orange } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
+import { Device } from "models";
+import PulseBox from "./PulseBox";
+
+interface Props {
+  device: Device
+}
+
+const useStyles = makeStyles((theme: Theme) => {
+  const lightMode = theme.palette?.mode === "light";
+  return ({
+    box: {
+      display: "inline-block",
+      borderRadius: "6px",
+      backgroundColor: lightMode ? "rgb(170, 170, 170)" : "rgb(34, 34, 34)",
+      padding: theme.spacing(0.5),
+      marginRight: "auto",
+      margin: theme.spacing(1),
+    },
+    pulse: {
+      // padding: theme.spacing(2)
+      paddingLeft: theme.spacing(-6)
+    }
+  })
+})
+
+export default function StatusPlenum(props: Props) {
+  const { device } = props;
+  const classes = useStyles()
+
+  return (
+    <PulseBox color="blue" className={classes.box} >
+      {/* <Box className={classes.box}> */}
+        <Grid2 container direction="column" >
+          <Grid2>
+            <Typography variant="body2" style={{ color: orange[500]}}>
+              {device.status.plenum?.temperature.toFixed(1)}°C
+            </Typography>
+          </Grid2>
+          <Grid2>
+            <Typography variant="body2" style={{ color: blue[800]}}>
+              {device.status.plenum?.humidity.toFixed(1)}%
+            </Typography>
+          </Grid2>
+        </Grid2>
+      {/* </Box> */}
+    </PulseBox>
+  )
+}