Enhance Vote component by adding icons to text fields and improving l…

…ayout with flexbox
JohanGrims · Dec 11, 2024 · 4547ac6 · 4547ac6
1 parent a7b257e
commit 4547ac6
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/Vote.jsx b/src/Vote.jsx
@@ -234,36 +234,41 @@ export default function Vote() {
           </div>
         )}
         <p />
+        <br />
         <div className="flex-row">
           <mdui-text-field
             label="Vorname(n)"
             placeholder="Max Erika"
             value={firstName}
             onInput={(e) => setFirstName(capitalizeWords(e.target.value))}
+            icon="person"
           ></mdui-text-field>
           <mdui-text-field
             label="Nachname"
             placeholder="Mustermann"
             value={lastName}
             onInput={(e) => setLastName(capitalizeWords(e.target.value))}
+            icon="badge"
           ></mdui-text-field>
         </div>
         <p />
-        <div className="flex-row">
+        <div style={{ display: "flex", gap: "20px" }}>
           <mdui-text-field
             type="number"
             label="Klasse"
             placeholder="11"
             value={grade}
             onInput={(e) => setGrade(e.target.value)}
+            icon="school"
           ></mdui-text-field>
           <mdui-text-field
             type="number"
-            label="Klassenlistennr."
+            label="Nummer"
             prefix="#"
             placeholder="17"
             value={listIndex}
             onInput={(e) => setListIndex(e.target.value)}
+            icon="format_list_numbered"
           ></mdui-text-field>
         </div>
         <p />
@@ -275,6 +280,7 @@ export default function Vote() {
               onInput={(e) =>
                 handleInputChange(i, capitalizeWords(e.target.value))
               }
+              icon="edit"
             ></mdui-text-field>
             <p />
           </div>