From 834bd518c102656a07177d3f6335a85ea972fe93 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Mon, 16 Mar 2026 14:49:28 -0600
Subject: [PATCH] made the pulse box animation look nice by starting the pulse
 from behind the box that it's pulsing

---
 src/common/PulseBox.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/common/PulseBox.tsx b/src/common/PulseBox.tsx
index eb5da3d..37ae123 100644
--- a/src/common/PulseBox.tsx
+++ b/src/common/PulseBox.tsx
@@ -8,6 +8,8 @@ const useStyles = makeStyles((_theme: Theme) => ({
     position: 'relative',
     display: 'block',
     width: 'fit-content',
+    isolation: 'isolate',
+    overflow: 'visible',
   },
   pulseRing: {
     position: 'absolute',
@@ -18,23 +20,24 @@ const useStyles = makeStyles((_theme: Theme) => ({
     borderRadius: 'inherit',
     pointerEvents: 'none',
     boxSizing: 'border-box',
+    zIndex: -1,
     animation: '$pulse 4.4s infinite ease-in-out',
   },
   '@keyframes pulse': {
+    /* Start behind box, then expand out and fade */
     /* pulse, pause, pulse, pause - CONSISTENT: both pauses equal, both pulses equal */
-    /* Pulse 1 (0-42%) */
-    '0%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 0 },
-    '2%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 1 },
+    /* Pulse 1 (0-42%) - gradual fade in to soften the start */
+    '0%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 1 },
     '40%': { boxShadow: '0 0 0 14px var(--pulse-color)', opacity: 0 },
-    '42%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 0 },
+    '42%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
     /* Pause 1 (42-50%) */
-    '50%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 0 },
+    '50%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
     /* Pulse 2 (50-92%) */
-    '52%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 1 },
+    '52%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 1 },
     '90%': { boxShadow: '0 0 0 14px var(--pulse-color)', opacity: 0 },
-    '92%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 0 },
+    '92%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
     /* Pause 2 (92-100%) - same length as Pause 1, color change at iteration */
-    '100%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 0 },
+    '100%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
   },
 }));