From b600b2503bf088cdf53c709bac107d10b51f920c Mon Sep 17 00:00:00 2001
From: MarcoJayUsai <marco.jay.usai@hotmail.it>
Date: Fri, 28 Mar 2025 20:11:35 +0100
Subject: [PATCH] fix(state buttons): state buttons hovering styles will be
 applied instantly

---
 frontend/react/src/ui/components/olstatebutton.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx
index 66e96507..3f0c3153 100644
--- a/frontend/react/src/ui/components/olstatebutton.tsx
+++ b/frontend/react/src/ui/components/olstatebutton.tsx
@@ -21,6 +21,7 @@ export function OlStateButton(props: {
 }) {
   const [hover, setHover] = useState(false);
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
+  const [isMouseHovering, setIsMouseHovering] = useState(false);
   var buttonRef = useRef(null);
 
   const className =
@@ -48,11 +49,12 @@ export function OlStateButton(props: {
         style={{
           border: props.buttonColor ? "2px solid " + props.buttonColor : "0px solid transparent",
           background: setOpacity(
-            props.checked || hover ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE,
-            !props.checked && hover ? 0.3 : 1
+            props.checked || isMouseHovering ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE,
+            !props.checked && isMouseHovering ? 0.3 : 1
           ),
         }}
         onMouseEnter={() => {
+          setIsMouseHovering(true);
           setHoverTimeout(
             window.setTimeout(() => {
               setHover(true);
@@ -61,6 +63,7 @@ export function OlStateButton(props: {
           );
         }}
         onMouseLeave={() => {
+          setIsMouseHovering(false);
           setHover(false);
           if (hoverTimeout) {
             window.clearTimeout(hoverTimeout);