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

style: change input styles

Browse source
This commit is contained in:
MAZE 2024-04-29 15:46:06 +04:30
parent 34d3c72f35
commit 8fe90daf1e
2 changed files with 57 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -19,23 +19,32 @@
align-items: flex-start;
margin-top: 8px;
& .inputContainer {
& .inputs {
display: flex;
align-items: center;
column-gap: 12px;
align-items: flex-end;
& .input {
display: block;
height: 40px;
padding: 0 8px;
color: var(--color-foreground);
background-color: var(--color-neutral-50);
border: 1px solid var(--color-neutral-200);
border-radius: 4px;
outline: none;
}
& .field {
flex-grow: 1;
& .label {
width: 100px;
& .label {
display: block;
margin-bottom: 4px;
font-weight: 500;
}
& .input {
display: block;
width: 100%;
min-width: 0;
height: 40px;
padding: 0 8px;
color: var(--color-foreground);
background-color: var(--color-neutral-50);
border: 1px solid var(--color-neutral-200);
border-radius: 4px;
outline: none;
}
}
}

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

@ -86,43 +86,15 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
<form onSubmit={handleSubmit}>
<div className={styles.controls}>
{!running && (
<div className={styles.inputContainer}>
<label className={styles.label} htmlFor="hours">
Hours:
</label>
<input
className={styles.input}
id="hours"
min="0"
required
type="number"
value={hours}
onChange={e =>
setHours(e.target.value === '' ? '' : e.target.value)
}
/>
</div>
)}
<div className={styles.inputs}>
{!running && (
<Field label="Hours" value={hours} onChange={setHours} />
)}
{!running && (
<div className={styles.inputContainer}>
<label className={styles.label} htmlFor="minutes">
Minutes:
</label>
<input
className={styles.input}
max="59"
min="0"
required
type="number"
value={minutes}
onChange={e =>
setMinutes(e.target.value === '' ? '' : e.target.value)
}
/>
</div>
)}
{!running && (
<Field label="Minutes" value={minutes} onChange={setMinutes} />
)}
</div>
{running ? <Timer displayHours={true} timer={timeLeft} /> : null}
@ -151,3 +123,29 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
</Modal>
);
}
interface FieldProps {
label: string;
onChange: (value: string) => void;
value: string;
}
function Field({ label, onChange, value }: FieldProps) {
return (
<div className={styles.field}>
<label className={styles.label} htmlFor={label.toLocaleLowerCase()}>
{label}
</label>
<input
className={styles.input}
id={label.toLocaleLowerCase()}
max="59"
min="0"
required
type="number"
value={value}
onChange={e => onChange(e.target.value === '' ? '' : e.target.value)}
/>
</div>
);
}