refactor: update MainForm layout and payment method selection; localize submit button text

frontend/src/pages/MainForm.tsx

@@ -9,8 +9,7 @@ import {
   Chip,
   Box,
   Paper,
-  Menu,
-  MenuItem,
+  Typography,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect } from "react";
@@ -48,16 +47,6 @@ export const MainForm = () => {
   const [users, setUsers] = useState<string[]>([]);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
 
-  // Payment Methods Menu States
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
   useEffect(() => {
     // Fetch user data or any other data needed for the form
     try {
@@ -126,11 +115,33 @@ export const MainForm = () => {
   };
 
   return (
-    <Box className="min-h-screen bg-gray-800 flex items-center justify-center p-4">
+    <Box
+      className="bg-gray-100 py-10 px-4"
+      sx={{
+        minHeight: "100vh",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
       <Paper
-        elevation={3}
-        className="w-full max-w-md p-6 rounded-lg"
-        sx={{ backgroundColor: "#fff" }}
+        elevation={6}
+        className="w-full rounded-2xl"
+        sx={{
+          backgroundColor: "#fff",
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+          width: "100%",
+          maxWidth: {
+            xs: 360, // kompakte Handy-Ansicht
+            sm: 420, // kleine Tablets / große Phones
+            md: 480, // Desktop, bleibt angenehm schmal
+          },
+          padding: {
+            xs: "1.5rem",
+            sm: "2rem",
+          },
+        }}
       >
         <form
           onSubmit={(e) => {
@@ -162,10 +173,14 @@ export const MainForm = () => {
             color="primary"
             sx={{
               alignSelf: "flex-start",
-              fontWeight: "bold",
-              fontSize: "1rem",
-              py: 2,
-              px: 1,
+              fontWeight: 500,
+              fontSize: "0.9rem",
+              mt: 0.5,
+              mb: 0.5,
+              py: 0.5,
+              px: 1.25,
+              borderRadius: "999px",
+              background: "linear-gradient(135deg, #1976d2 0%, #1565c0 100%)",
             }}
           />
 
@@ -247,7 +262,14 @@ export const MainForm = () => {
 
           {/* Invoice Fields */}
           {invoice && (
-            <Box className="flex flex-col gap-3 pt-2 border-t border-gray-200">
+            <Box
+              className="flex flex-col gap-2 pt-3 mt-2"
+              sx={{
+                borderTop: "2px solid",
+                borderColor: "primary.light",
+                borderRadius: "0",
+              }}
+            >
               <TextField
                 required
                 id="company-name"
@@ -331,64 +353,117 @@ export const MainForm = () => {
             </Box>
           )}
           {/* Payment Methods */}
-          <Button
-            id="basic-button"
-            aria-controls={open ? "basic-menu" : undefined}
-            aria-haspopup="true"
-            aria-expanded={open ? "true" : undefined}
-            onClick={handleClick}
-          >
-            {formData.paymentMethod || t("select-payment-method")}
-          </Button>
-          <Menu
-            id="basic-menu"
-            anchorEl={anchorEl}
-            open={open}
-            onClose={handleClose}
-            slotProps={{
-              list: {
-                "aria-labelledby": "basic-button",
-              },
-            }}
-          >
-            <MenuItem
-              onClick={() => {
-                setFormData({ ...formData, paymentMethod: "bar" });
-                handleClose();
+          <Box className="flex flex-col gap-2 mt-2">
+            <Typography
+              component="label"
+              sx={{
+                fontSize: "0.875rem",
+                fontWeight: 500,
+                color: "text.secondary",
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
               }}
             >
-              {t("cash")}
-            </MenuItem>
-            <MenuItem
-              onClick={() => {
-                setFormData({ ...formData, paymentMethod: "paypal" });
-                handleClose();
-              }}
-            >
-              {t("paypal")}
-            </MenuItem>
-            <MenuItem
-              onClick={() => {
-                setFormData({ ...formData, paymentMethod: "andere" });
-                handleClose();
-              }}
-            >
-              {t("transfer")}
-            </MenuItem>
-          </Menu>
+              {t("select-payment-method")} *
+            </Typography>
+            <Box className="flex gap-2 flex-wrap">
+              <Button
+                variant={
+                  formData.paymentMethod === "bar" ? "contained" : "outlined"
+                }
+                onClick={() =>
+                  setFormData({ ...formData, paymentMethod: "bar" })
+                }
+                sx={{
+                  flex: 1,
+                  minWidth: "100px",
+                  py: 1.5,
+                  borderRadius: "12px",
+                  textTransform: "none",
+                  fontWeight: formData.paymentMethod === "bar" ? 600 : 400,
+                }}
+              >
+                {t("cash")}
+              </Button>
+              <Button
+                variant={
+                  formData.paymentMethod === "paypal" ? "contained" : "outlined"
+                }
+                onClick={() =>
+                  setFormData({ ...formData, paymentMethod: "paypal" })
+                }
+                sx={{
+                  flex: 1,
+                  minWidth: "100px",
+                  py: 1.5,
+                  borderRadius: "12px",
+                  textTransform: "none",
+                  fontWeight: formData.paymentMethod === "paypal" ? 600 : 400,
+                }}
+              >
+                {t("paypal")}
+              </Button>
+              <Button
+                variant={
+                  formData.paymentMethod === "andere" ? "contained" : "outlined"
+                }
+                onClick={() =>
+                  setFormData({ ...formData, paymentMethod: "andere" })
+                }
+                sx={{
+                  flex: 1,
+                  minWidth: "100px",
+                  py: 1.5,
+                  borderRadius: "12px",
+                  textTransform: "none",
+                  fontWeight: formData.paymentMethod === "andere" ? 600 : 400,
+                }}
+              >
+                {t("transfer")}
+              </Button>
+            </Box>
+            {!formData.paymentMethod && (
+              <input
+                tabIndex={-1}
+                autoComplete="off"
+                style={{
+                  opacity: 0,
+                  width: 0,
+                  height: 0,
+                  position: "absolute",
+                }}
+                required
+                value={formData.paymentMethod}
+                onChange={() => {}}
+              />
+            )}
+          </Box>
 
           {/* Submit Button */}
           <Button
             type="submit"
             variant="contained"
-            disabled={isLoading}
+            disabled={isLoading || !formData.paymentMethod}
             fullWidth
             size="large"
             sx={{
-              mt: 2,
-              py: 1.5,
+              mt: 3,
+              py: 2,
               textTransform: "uppercase",
               fontWeight: "bold",
+              borderRadius: "12px",
+              fontSize: "1rem",
+              background: "linear-gradient(135deg, #1976d2 0%, #1565c0 100%)",
+              boxShadow: "0 4px 14px 0 rgba(25, 118, 210, 0.39)",
+              "&:hover": {
+                background: "linear-gradient(135deg, #1565c0 0%, #0d47a1 100%)",
+                boxShadow: "0 6px 20px 0 rgba(25, 118, 210, 0.5)",
+              },
+              "&:disabled": {
+                background: "#e0e0e0",
+                boxShadow: "none",
+              },
             }}
           >
             {isLoading ? (

frontend/src/utils/i18n/locales/de/de.json

@@ -8,7 +8,7 @@
     "street": "Straße + Haus Nr.",
     "postal-code": "Plz + Stadt",
     "email": "E-Mail",
-    "submit": "Kaufen",
+    "submit": "Abschicken",
     "failed-to-load-users": "Das Laden der Benutzer ist fehlgeschlagen.",
     "user": "Benutzer",
     "next-id": "Nächste Eintragsnummer: ",

frontend/src/utils/i18n/locales/en/en.json

@@ -7,7 +7,7 @@
     "street": "Street + House No.",
     "postal-code": "Postal Code + City",
     "email": "Email",
-    "submit": "Buy",
+    "submit": "Submit Form",
     "failed-to-load-users": "Failed to load users.",
     "user": "User",
     "next-id": "Next Entry Number: ",
@@ -20,8 +20,8 @@
     "transfer": "Other (note down)",
     "ticket-payment_one": "You have successfully purchased {{count}} ticket.",
     "ticket-payment_other": "You have successfully purchased {{count}} tickets.",
-    "ticket": "ticket",
-    "tickets": "tickets",
+    "ticket": "Ticket",
+    "tickets": "Tickets",
     "entry-id": "Entry ID",
     "thank-you": "Thank you for supporting the Claudius Akademie! We wish you the best of luck with your ticket.",
     "select-payment-method": "Select Payment Method"

frontend/src/utils/sender.ts

@@ -15,14 +15,18 @@ interface FormData {
 }
 
 export const submitFormData = async (data: FormData, username: string) => {
+  console.log(data);
   try {
-    const response = await fetch(`http://localhost:8004/default/new-entry?username=${username}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
+    const response = await fetch(
+      `http://localhost:8004/default/new-entry?username=${username}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
       },
-      body: JSON.stringify(data),
-    });
+    );
 
     if (!response.ok) {
       const errorText = await response.text();