From 58bf28bb24fd12bc28f4f5e3e79058df60095fd4 Mon Sep 17 00:00:00 2001
From: Jef Roelandt <roelandt.jef@plaws.fr>
Date: Sun, 28 Apr 2024 19:11:51 +0200
Subject: [PATCH] fix: fix button disabled and reset to 0

---
 src/components/generic/button/button.module.css   |  5 +++++
 src/components/generic/button/button.tsx          | 10 +++++++++-
 src/components/modals/sleep-timer/sleep-timer.tsx |  3 +++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/generic/button/button.module.css b/src/components/generic/button/button.module.css
index 61f33f4..a96e112 100644
--- a/src/components/generic/button/button.module.css
+++ b/src/components/generic/button/button.module.css
@@ -26,4 +26,9 @@
   &.smallIcon {
     font-size: var(--font-xsm);
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
 }
diff --git a/src/components/generic/button/button.tsx b/src/components/generic/button/button.tsx
index dc6f471..5828ad6 100644
--- a/src/components/generic/button/button.tsx
+++ b/src/components/generic/button/button.tsx
@@ -5,17 +5,25 @@ import { cn } from '@/helpers/styles';
 import styles from './button.module.css';
 
 interface ButtonProps {
+  disabled?: boolean;
   icon: React.ReactElement;
   onClick: () => void;
   smallIcon?: boolean;
   tooltip: string;
 }
 
-export function Button({ icon, onClick, smallIcon, tooltip }: ButtonProps) {
+export function Button({
+  disabled = false,
+  icon,
+  onClick,
+  smallIcon,
+  tooltip,
+}: ButtonProps) {
   return (
     <Tooltip content={tooltip} placement="bottom" showDelay={0}>
       <button
         className={cn(styles.button, smallIcon && styles.smallIcon)}
+        disabled={disabled}
         onClick={onClick}
       >
         {icon}
diff --git a/src/components/modals/sleep-timer/sleep-timer.tsx b/src/components/modals/sleep-timer/sleep-timer.tsx
index c3b5c8e..6b9355c 100644
--- a/src/components/modals/sleep-timer/sleep-timer.tsx
+++ b/src/components/modals/sleep-timer/sleep-timer.tsx
@@ -61,6 +61,8 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
   const handleReset = () => {
     if (timerId.current) clearInterval(timerId.current);
     setTimeLeft(0);
+    setHours('0');
+    setMinutes('0');
     setRunning(false);
   };
 
@@ -114,6 +116,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
           />
           {!running && (
             <Button
+              disabled={calculateTotalSeconds() <= 0}
               icon={<FaPlay />}
               smallIcon
               tooltip={'Start'}