made PulseBox forwar a ref so it can be used with Tooltip

src/common/PulseBox.tsx

@@ -1,7 +1,7 @@
 import { Box, BoxProps, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import classNames from "classnames";
-import { ReactNode } from "react";
+import { forwardRef, ReactNode } from "react";
 
 const useStyles = makeStyles((_theme: Theme) => ({
   pulseWrapper: {
@@ -41,12 +41,13 @@ interface Props extends BoxProps {
   className?: string;
 }
 
-export default function PulseBox(props: Props) {
+const PulseBox = forwardRef<HTMLDivElement, Props>((props, ref) => {
   const { color, children, className, ...boxProps } = props;
   const classes = useStyles()
 
   return (
     <Box 
+      ref={ref}
       {...boxProps}
       className={classNames([classes.pulseWrapper, className])} 
       style={{ '--pulse-color': color } as React.CSSProperties}
@@ -54,4 +55,9 @@ export default function PulseBox(props: Props) {
       {children}
     </Box>
   );
-};
+});
+
+// Optional: Add a display name for better debugging
+PulseBox.displayName = "PulseBox";
+
+export default PulseBox;

src/common/StatusPlenum.tsx

@@ -1,4 +1,4 @@
-import { Grid2, Theme, Typography } from "@mui/material";
+import { Grid2, Theme, Tooltip, Typography } from "@mui/material";
 import { blue, orange } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { Device } from "models";
@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => {
     box: {
       display: "inline-block",
       borderRadius: "6px",
-      backgroundColor: lightMode ? "rgb(155, 155, 155)" : "rgb(34, 34, 34)",
+      backgroundColor: lightMode ? "rgb(210, 210, 210)" : "rgb(50, 50, 50)",
       padding: theme.spacing(0.75),
       marginRight: "auto",
       margin: theme.spacing(1),
@@ -47,10 +47,11 @@ export default function StatusPlenum(props: Props) {
   }, []);
 
   return (
+    <Tooltip title={"Hello :)"}>
       <PulseBox color={color} className={classes.box} >
         <Grid2 container direction="column" >
           <Grid2>
-          <Typography variant="body2" style={{ color: orange[400]}}>
+            <Typography variant="body2" style={{ color: orange[700]}}>
               {device.status.plenum?.temperature.toFixed(1)}°C
             </Typography>
           </Grid2>
@@ -61,5 +62,6 @@ export default function StatusPlenum(props: Props) {
           </Grid2>
         </Grid2>
       </PulseBox>
+    </Tooltip>
   )
 }