Better add form

bakaq · Oct 5, 2024 · afe76cd · afe76cd
1 parent e38c636
commit afe76cd
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -75,11 +75,9 @@ function AddForm({ setShow, getItems }) {
   }
 
   const fieldsArray = Object.entries(fields).map(([name, label]) => (
-    <div key={name}>
-      <label>{label}:
-        <input type="text" name={name} onChange={changeHandler} />
-      </label>
-      <br />
+    <div key={name} className="field">
+      <label htmlFor={`add-${name}`}>{label}:</label>
+      <input type="text" id={`add-${name}`} name={name} onChange={changeHandler} />
     </div>
   ));
 
@@ -110,13 +108,16 @@ function AddForm({ setShow, getItems }) {
   }
 
   return (
-    <div className="add-form">
-      <form onSubmit={submitHandler}>
+    <form className="add-form" onSubmit={submitHandler}>
+      <h3>Add item</h3>
+      <div className="add-form-fields">
         {fieldsArray}
+      </div>
+      <div className="add-form-footer">
         <input type="submit" id="submit-add" value="Add item" />
         <button onClick={() => setShow(false)}>Cancel</button>
-      </form>
-    </div>
+      </div>
+    </form>
   );
 }
 

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -76,6 +76,26 @@ body {
   background-color: pink;
   padding: var(--padding);
   border-radius: var(--padding);
+  display: flex;
+  flex-flow: column nowrap;
+  gap: var(--padding);
+}
+
+.add-form-fields {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.add-form-fields > .field {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+}
+
+.add-form-footer {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
 }
 
 .nutritional-table {