Matthias-Claudius-Schule/ca-lose
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Theis Gaedigk
2026-01-21 16:15:52 +01:00
parent 308b21ae6c
commit 9445f5d417
4 changed files with 156 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
frontend/src/pages/MainForm.tsx
View File

@@ -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 ? (