From 77e2ec5e798771b7719b36882bc68c10265c06f6 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Mon, 29 Apr 2024 00:43:35 +0330
Subject: [PATCH] feat: add description for sleep timer

---
 .../modals/sleep-timer/sleep-timer.module.css      | 14 ++++++++------
 src/components/modals/sleep-timer/sleep-timer.tsx  |  8 ++++++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/sleep-timer/sleep-timer.module.css b/src/components/modals/sleep-timer/sleep-timer.module.css
index 3291906..b6039c4 100644
--- a/src/components/modals/sleep-timer/sleep-timer.module.css
+++ b/src/components/modals/sleep-timer/sleep-timer.module.css
@@ -1,12 +1,14 @@
 .header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
+  margin-bottom: 16px;
 
   & .title {
-    font-size: var(--font-sm);
-    font-weight: 500;
+    margin-bottom: 8px;
+    font-family: var(--font-heading);
+    font-size: var(--font-md);
+    font-weight: 600;
+  }
+
+  & .desc {
     color: var(--color-foreground-subtle);
   }
 }
diff --git a/src/components/modals/sleep-timer/sleep-timer.tsx b/src/components/modals/sleep-timer/sleep-timer.tsx
index 45271c7..03e769f 100644
--- a/src/components/modals/sleep-timer/sleep-timer.tsx
+++ b/src/components/modals/sleep-timer/sleep-timer.tsx
@@ -73,7 +73,11 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
     <Modal show={show} onClose={onClose}>
       <header className={styles.header}>
         <h2 className={styles.title}>Sleep Timer</h2>
+        <p className={styles.desc}>
+          Stop sounds after a certain amount of time.
+        </p>
       </header>
+
       <div className={styles.controls}>
         {!running && (
           <div className={styles.inputContainer}>
@@ -92,6 +96,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
             />
           </div>
         )}
+
         {!running && (
           <div className={styles.inputContainer}>
             <label className={styles.label} htmlFor="minutes">
@@ -109,7 +114,9 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
             />
           </div>
         )}
+
         {running ? <Timer displayHours={true} timer={timeLeft} /> : null}
+
         <div className={styles.buttons}>
           <Button
             icon={<FaUndo />}
@@ -117,6 +124,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
             tooltip="Reset"
             onClick={handleReset}
           />
+
           {!running && (
             <Button
               disabled={calculateTotalSeconds() <= 0}