style: change input styles

remvze · Apr 29, 2024 · 8fe90da · 8fe90da
1 parent 34d3c72
commit 8fe90da
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 51 deletions.
diff --git a/src/components/modals/sleep-timer/sleep-timer.module.css b/src/components/modals/sleep-timer/sleep-timer.module.css
@@ -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;
+      }
     }
   }
 

diff --git a/src/components/modals/sleep-timer/sleep-timer.tsx b/src/components/modals/sleep-timer/sleep-timer.tsx
@@ -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>
-          )}
-
-          {!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>
-          )}
+          <div className={styles.inputs}>
+            {!running && (
+              <Field label="Hours" value={hours} onChange={setHours} />
+            )}
+
+            {!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>
+  );
+}