style: change button styles

src/components/modals/sleep-timer/sleep-timer.module.css

@@ -41,7 +41,45 @@
 
   & .buttons {
     display: flex;
+    column-gap: 8px;
+    align-items: center;
     justify-content: flex-end;
     width: 100%;
+    margin-top: 16px;
+
+    & .button {
+      padding: 12px 16px;
+      font-family: var(--font-heading);
+      font-size: var(--font-sm);
+      font-weight: 600;
+      color: var(--color-foreground-subtle);
+      cursor: pointer;
+      background-color: var(--color-neutral-200);
+      border: none;
+      border-radius: 4px;
+      outline: none;
+      transition: 0.2s;
+
+      &:focus-visible {
+        outline: 2px solid var(--color-neutral-400);
+        outline-offset: 2px;
+      }
+
+      &:hover,
+      &:focus-visible {
+        color: var(--color-foreground);
+        background-color: var(--color-neutral-300);
+      }
+
+      &.primary {
+        color: var(--color-neutral-200);
+        background-color: var(--color-neutral-950);
+
+        &:hover,
+        &:focus-visible {
+          background-color: var(--color-neutral-800);
+        }
+      }
+    }
   }
 }

src/components/modals/sleep-timer/sleep-timer.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
-import { Modal } from '@/components/modal';
-import { FaPlay, FaUndo } from 'react-icons/fa/index';
-import { useSoundStore } from '@/store';
 
-import { Button } from '@/components/toolbox/generics/button';
+import { Modal } from '@/components/modal';
 import { Timer } from '@/components/timer';
+import { useSoundStore } from '@/store';
+import { cn } from '@/helpers/styles';
 
 import styles from './sleep-timer.module.css';
 
@@ -41,9 +40,10 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
     if (!isPlaying) play();
 
     setTimeLeft(calculateTotalSeconds);
-    setRunning(true);
 
     if (timeLeft > 0) {
+      setRunning(true);
+
       const newTimerId = setInterval(() => {
         setTimeLeft(prevTimeLeft => {
           const newTimeLeft = prevTimeLeft - 1;
@@ -118,21 +118,19 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
         {running ? <Timer displayHours={true} timer={timeLeft} /> : null}
 
         <div className={styles.buttons}>
-          <Button
+          {running && (
-            icon={<FaUndo />}
+            <button className={styles.button} onClick={handleReset}>
-            smallIcon
+              Reset
-            tooltip="Reset"
+            </button>
-            onClick={handleReset}
+          )}
-          />
 
           {!running && (
-            <Button
+            <button
-              disabled={calculateTotalSeconds() <= 0}
+              className={cn(styles.button, styles.primary)}
-              icon={<FaPlay />}
-              smallIcon
-              tooltip={'Start'}
               onClick={handleStart}
-            />
+            >
+              Save
+            </button>
           )}
         </div>
       </div>