added design to storage table

This commit is contained in:
2026-05-29 18:01:47 +02:00
parent 214941ed7a
commit 67b46a759d
3 changed files with 107 additions and 42 deletions
@@ -59,16 +59,20 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
return (
<>
<Modal open={props.isOpen} onClose={() => props.setOpen(false)}>
<ModalDialog>
<DialogTitle>{t("new-storage-title")}</DialogTitle>
<DialogContent>{t("new-storage-content")}</DialogContent>
<ModalDialog className="rounded-3xl border border-white/70 bg-white/90 p-6 shadow-[0_30px_70px_rgba(12,38,78,0.2)] backdrop-blur">
<DialogTitle className="text-slate-900">
{t("new-storage-title")}
</DialogTitle>
<DialogContent className="text-slate-500">
{t("new-storage-content")}
</DialogContent>
<form
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<Stack>
<Stack spacing={2} className="mt-4">
<form.Field name="name">
{(field) => (
<Input
@@ -76,6 +80,8 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
onChange={(e) => field.handleChange(e.target.value)}
placeholder={t("storage-name")}
variant="outlined"
size="lg"
className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
/>
)}
</form.Field>
@@ -86,14 +92,26 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
onChange={(e) => field.handleChange(e.target.value)}
placeholder={t("description")}
variant="outlined"
size="lg"
className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
/>
)}
</form.Field>
<Button type="submit">{t("submit")}</Button>
<Button
type="submit"
size="lg"
className="rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
>
{t("submit")}
</Button>
</Stack>
</form>
{alert.isAlert && (
<Alert variant="soft" color={alert.type}>
<Alert
variant="soft"
color={alert.type}
className="mt-4 rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
>
{alert.header}
<br />
{alert.text}