From ca6f2ac400fda8a6723112863b516a08e9792f3e Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Mon, 31 Mar 2025 16:05:10 -0600
Subject: [PATCH] made PulseBox forwar a ref so it can be used with Tooltip

---
 src/common/PulseBox.tsx     | 12 +++++++++---
 src/common/StatusPlenum.tsx | 32 +++++++++++++++++---------------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/common/PulseBox.tsx b/src/common/PulseBox.tsx
index 4ac7e6c..11c43e8 100644
--- a/src/common/PulseBox.tsx
+++ b/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;
diff --git a/src/common/StatusPlenum.tsx b/src/common/StatusPlenum.tsx
index fb9096e..eada893 100644
--- a/src/common/StatusPlenum.tsx
+++ b/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,19 +47,21 @@ export default function StatusPlenum(props: Props) {
   }, []);
 
   return (
-    <PulseBox color={color} className={classes.box} >
-      <Grid2 container direction="column" >
-        <Grid2>
-          <Typography variant="body2" style={{ color: orange[400]}}>
-            {device.status.plenum?.temperature.toFixed(1)}°C
-          </Typography>
+    <Tooltip title={"Hello :)"}>
+      <PulseBox color={color} className={classes.box} >
+        <Grid2 container direction="column" >
+          <Grid2>
+            <Typography variant="body2" style={{ color: orange[700]}}>
+              {device.status.plenum?.temperature.toFixed(1)}°C
+            </Typography>
+          </Grid2>
+          <Grid2>
+            <Typography variant="body2" style={{ color: blue[700]}}>
+              {device.status.plenum?.humidity.toFixed(1)}%
+            </Typography>
+          </Grid2>
         </Grid2>
-        <Grid2>
-          <Typography variant="body2" style={{ color: blue[700]}}>
-            {device.status.plenum?.humidity.toFixed(1)}%
-          </Typography>
-        </Grid2>
-      </Grid2>
-    </PulseBox>
+      </PulseBox>
+    </Tooltip>
   )
 }
\ No newline at end of file