From 4547ac621a76f3a4f9ab5a448f2fbbed78dfa7ef Mon Sep 17 00:00:00 2001
From: JohanGrims <johan.grimsehl@gmail.com>
Date: Wed, 11 Dec 2024 13:52:22 +0100
Subject: [PATCH] Enhance Vote component by adding icons to text fields and
 improving layout with flexbox

---
 src/Vote.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Vote.jsx b/src/Vote.jsx
index 6e4b901..102f4cd 100644
--- 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>