From 1cd03796541a739f0d89f7b1b50408480214b377 Mon Sep 17 00:00:00 2001
From: Theis <theis.gaedigk@icloud.com>
Date: Sun, 24 May 2026 13:12:09 +0200
Subject: [PATCH] redesgigned page

---
 frontend/src/pages/MainForm.tsx | 66 ++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/frontend/src/pages/MainForm.tsx b/frontend/src/pages/MainForm.tsx
index 9939e1f..70f0ad4 100644
--- a/frontend/src/pages/MainForm.tsx
+++ b/frontend/src/pages/MainForm.tsx
@@ -248,7 +248,6 @@ export const MainForm = () => {
 
             {/* Name row */}
             <div className="grid grid-cols-2 gap-3">
-              <FormLabel>{t("first-name")}</FormLabel>
               <Field
                 name="firstName"
                 validators={makeFieldValidator("firstName")}
@@ -256,7 +255,8 @@ export const MainForm = () => {
                 {(field) => {
                   const errors = getErrors(field);
                   return (
-                    <>
+                    <FormControl required>
+                      <FormLabel>{t("first-name")}</FormLabel>
                       <Input
                         value={field.state.value ?? ""}
                         onBlur={field.handleBlur}
@@ -269,12 +269,11 @@ export const MainForm = () => {
                           {errors[0]}
                         </span>
                       )}
-                    </>
+                    </FormControl>
                   );
                 }}
               </Field>
 
-              <FormLabel>{t("last-name")}</FormLabel>
               <Field
                 name="lastName"
                 validators={makeFieldValidator("lastName")}
@@ -282,7 +281,8 @@ export const MainForm = () => {
                 {(field) => {
                   const errors = getErrors(field);
                   return (
-                    <>
+                    <FormControl required>
+                      <FormLabel>{t("last-name")}</FormLabel>
                       <Input
                         value={field.state.value ?? ""}
                         onBlur={field.handleBlur}
@@ -295,18 +295,18 @@ export const MainForm = () => {
                           {errors[0]}
                         </span>
                       )}
-                    </>
+                    </FormControl>
                   );
                 }}
               </Field>
             </div>
 
-            <FormLabel>{t("email")}</FormLabel>
             <Field name="email" validators={makeFieldValidator("email")}>
               {(field) => {
                 const errors = getErrors(field);
                 return (
-                  <>
+                  <FormControl required>
+                    <FormLabel>{t("email")}</FormLabel>
                     <Input
                       value={field.state.value ?? ""}
                       onBlur={field.handleBlur}
@@ -318,12 +318,11 @@ export const MainForm = () => {
                     {errors.length > 0 && (
                       <span className="text-red-500 text-sm">{errors[0]}</span>
                     )}
-                  </>
+                  </FormControl>
                 );
               }}
             </Field>
 
-            <FormLabel>{t("phone-number")}</FormLabel>
             <Field
               name="phoneNumber"
               validators={makeFieldValidator("phoneNumber")}
@@ -331,7 +330,8 @@ export const MainForm = () => {
               {(field) => {
                 const errors = getErrors(field);
                 return (
-                  <>
+                  <FormControl required>
+                    <FormLabel>{t("phone-number")}</FormLabel>
                     <Input
                       value={field.state.value ?? ""}
                       onBlur={field.handleBlur}
@@ -343,7 +343,7 @@ export const MainForm = () => {
                     {errors.length > 0 && (
                       <span className="text-red-500 text-sm">{errors[0]}</span>
                     )}
-                  </>
+                  </FormControl>
                 );
               }}
             </Field>
@@ -410,7 +410,6 @@ export const MainForm = () => {
                   {t("invoice-details")}
                 </Typography>
 
-                <FormLabel>{t("company-name")}</FormLabel>
                 <Field
                   name="companyName"
                   validators={makeFieldValidator("companyName")}
@@ -418,7 +417,8 @@ export const MainForm = () => {
                   {(field) => {
                     const errors = getErrors(field);
                     return (
-                      <>
+                      <FormControl required>
+                        <FormLabel>{t("company-name")}</FormLabel>
                         <Input
                           value={field.state.value ?? ""}
                           onBlur={field.handleBlur}
@@ -431,13 +431,12 @@ export const MainForm = () => {
                             {errors[0]}
                           </span>
                         )}
-                      </>
+                      </FormControl>
                     );
                   }}
                 </Field>
 
                 <div className="grid grid-cols-2 gap-3">
-                  <FormLabel>{t("first-name")}</FormLabel>
                   <Field
                     name="cmpFirstName"
                     validators={makeFieldValidator("cmpFirstName")}
@@ -445,7 +444,8 @@ export const MainForm = () => {
                     {(field) => {
                       const errors = getErrors(field);
                       return (
-                        <>
+                        <FormControl required>
+                          <FormLabel>{t("first-name")}</FormLabel>
                           <Input
                             value={field.state.value ?? ""}
                             onBlur={field.handleBlur}
@@ -458,12 +458,11 @@ export const MainForm = () => {
                               {errors[0]}
                             </span>
                           )}
-                        </>
+                        </FormControl>
                       );
                     }}
                   </Field>
 
-                  <FormLabel>{t("last-name")}</FormLabel>
                   <Field
                     name="cpmLastName"
                     validators={makeFieldValidator("cpmLastName")}
@@ -471,7 +470,8 @@ export const MainForm = () => {
                     {(field) => {
                       const errors = getErrors(field);
                       return (
-                        <>
+                        <FormControl required>
+                          <FormLabel>{t("last-name")}</FormLabel>
                           <Input
                             value={field.state.value ?? ""}
                             onBlur={field.handleBlur}
@@ -484,18 +484,18 @@ export const MainForm = () => {
                               {errors[0]}
                             </span>
                           )}
-                        </>
+                        </FormControl>
                       );
                     }}
                   </Field>
                 </div>
 
-                <FormLabel>{t("street")}</FormLabel>
                 <Field name="street" validators={makeFieldValidator("street")}>
                   {(field) => {
                     const errors = getErrors(field);
                     return (
-                      <>
+                      <FormControl required>
+                        <FormLabel>{t("street")}</FormLabel>
                         <Input
                           value={field.state.value ?? ""}
                           onBlur={field.handleBlur}
@@ -508,12 +508,11 @@ export const MainForm = () => {
                             {errors[0]}
                           </span>
                         )}
-                      </>
+                      </FormControl>
                     );
                   }}
                 </Field>
 
-                <FormLabel>{t("postal-code")}</FormLabel>
                 <Field
                   name="postalCode"
                   validators={makeFieldValidator("postalCode")}
@@ -521,7 +520,8 @@ export const MainForm = () => {
                   {(field) => {
                     const errors = getErrors(field);
                     return (
-                      <>
+                      <FormControl required>
+                        <FormLabel>{t("postal-code")}</FormLabel>
                         <Input
                           value={field.state.value ?? ""}
                           onBlur={field.handleBlur}
@@ -534,12 +534,11 @@ export const MainForm = () => {
                             {errors[0]}
                           </span>
                         )}
-                      </>
+                      </FormControl>
                     );
                   }}
                 </Field>
 
-                <FormLabel>{t("phone-number")}</FormLabel>
                 <Field
                   name="cpmPhoneNumber"
                   validators={makeFieldValidator("cpmPhoneNumber")}
@@ -547,7 +546,8 @@ export const MainForm = () => {
                   {(field) => {
                     const errors = getErrors(field);
                     return (
-                      <>
+                      <FormControl required>
+                        <FormLabel>{t("phone-number")}</FormLabel>
                         <Input
                           value={field.state.value ?? ""}
                           onBlur={field.handleBlur}
@@ -561,12 +561,11 @@ export const MainForm = () => {
                             {errors[0]}
                           </span>
                         )}
-                      </>
+                      </FormControl>
                     );
                   }}
                 </Field>
 
-                <FormLabel>{t("email")}</FormLabel>
                 <Field
                   name="cpmEmail"
                   validators={makeFieldValidator("cpmEmail")}
@@ -574,7 +573,8 @@ export const MainForm = () => {
                   {(field) => {
                     const errors = getErrors(field);
                     return (
-                      <>
+                      <FormControl required>
+                        <FormLabel>{t("email")}</FormLabel>
                         <Input
                           value={field.state.value ?? ""}
                           onBlur={field.handleBlur}
@@ -588,7 +588,7 @@ export const MainForm = () => {
                             {errors[0]}
                           </span>
                         )}
-                      </>
+                      </FormControl>
                     );
                   }}
                 </Field>