hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 08:54:13 +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 { .header {
display: flex; margin-bottom: 16px;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
& .title { & .title {
font-size: var(--font-sm); margin-bottom: 8px;
font-weight: 500; font-family: var(--font-heading);
font-size: var(--font-md);
font-weight: 600;
}
& .desc {
color: var(--color-foreground-subtle); 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}> <Modal show={show} onClose={onClose}>
<header className={styles.header}> <header className={styles.header}>
<h2 className={styles.title}>Sleep Timer</h2> <h2 className={styles.title}>Sleep Timer</h2>
<p className={styles.desc}>
Stop sounds after a certain amount of time.
</p>
</header> </header>
<div className={styles.controls}> <div className={styles.controls}>
{!running && ( {!running && (
<div className={styles.inputContainer}> <div className={styles.inputContainer}>
@ -92,6 +96,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
/> />
</div> </div>
)} )}
{!running && ( {!running && (
<div className={styles.inputContainer}> <div className={styles.inputContainer}>
<label className={styles.label} htmlFor="minutes"> <label className={styles.label} htmlFor="minutes">
@ -109,7 +114,9 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
/> />
</div> </div>
)} )}
{running ? <Timer displayHours={true} timer={timeLeft} /> : null} {running ? <Timer displayHours={true} timer={timeLeft} /> : null}
<div className={styles.buttons}> <div className={styles.buttons}>
<Button <Button
icon={<FaUndo />} icon={<FaUndo />}
@ -117,6 +124,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
tooltip="Reset" tooltip="Reset"
onClick={handleReset} onClick={handleReset}
/> />
{!running && ( {!running && (
<Button <Button
disabled={calculateTotalSeconds() <= 0} disabled={calculateTotalSeconds() <= 0}