hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 00:44:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add description for sleep timer

Browse source
This commit is contained in:
MAZE 2024-04-29 00:43:35 +03:30
parent 4adfb3ddc9
commit 77e2ec5e79
2 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/modals/sleep-timer/sleep-timer.module.css
View file

@ -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);
}
}

8
src/components/modals/sleep-timer/sleep-timer.tsx
View file

@ -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}