added design to storage table

2026-05-29 18:01:47 +02:00
parent 214941ed7a
commit 67b46a759d
3 changed files with 107 additions and 42 deletions
@@ -44,7 +44,7 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
    (values.description ?? "") !== (storage.description ?? "");

  return (
-    <tr key={storage.uuid}>
+    <tr key={storage.uuid} className="align-top">
      <td>
        <form.Field name="name">
          {(field) => (
@@ -53,6 +53,8 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
              onChange={(e) => field.handleChange(e.target.value)}
              onBlur={field.handleBlur}
              size="sm"
+              variant="outlined"
+              className="rounded-xl bg-white/90 shadow-[0_8px_18px_rgba(15,23,42,0.06)]"
            />
          )}
        </form.Field>
@@ -65,17 +67,28 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
              onChange={(e) => field.handleChange(e.target.value)}
              onBlur={field.handleBlur}
              size="sm"
+              variant="outlined"
+              className="rounded-xl bg-white/90 shadow-[0_8px_18px_rgba(15,23,42,0.06)]"
            />
          )}
        </form.Field>
      </td>
-      <td>{formatDate(storage.created_at)}</td>
-      <td>{formatDate(storage.updated_at)}</td>
+      <td className="text-sm text-slate-500">
+        {formatDate(storage.created_at)}
+      </td>
+      <td className="text-sm text-slate-500">
+        {formatDate(storage.updated_at)}
+      </td>
      <td>
+        <div className="flex flex-wrap justify-end gap-2">
          <Button
            color="primary"
            onClick={form.handleSubmit}
-          disabled={!isDirty || mutation.isPending || deleteMutation.isPending}
+            disabled={
+              !isDirty || mutation.isPending || deleteMutation.isPending
+            }
+            size="sm"
+            className="rounded-xl"
          >
            {mutation.isPending ? "..." : "Save"}
          </Button>
@@ -83,9 +96,12 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
            color="danger"
            onClick={() => deleteMutation.mutateAsync(storage.uuid)}
            disabled={mutation.isPending || deleteMutation.isPending}
+            size="sm"
+            className="rounded-xl"
          >
            {deleteMutation.isPending ? "..." : "Delete"}
          </Button>
+        </div>
      </td>
    </tr>
  );
@@ -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}
@@ -6,6 +6,7 @@ import type { Storage } from "../misc/interfaces";
 import { StorageRow } from "../components/StorageRow";
 import { useState } from "react";
 import { AddStorageModal } from "../components/modals/AddStorageModal";
+import AddBoxIcon from "@mui/icons-material/AddBox";

 export const Storages = () => {
  const { t } = useTranslation();
@@ -17,22 +18,52 @@ export const Storages = () => {
  });

  return (
-    <Sheet>
-      {isLoading ? (
-        <CircularProgress />
-      ) : (
    <>
-          <AddStorageModal isOpen={modal} setOpen={setModal} />
-          <Button onClick={() => setModal(true)}>+</Button>
-          <Typography level="body-md" color="warning" fontWeight={"bold"}>
+      <div className="space-y-6">
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="space-y-1">
+            <Typography level="h2" className="text-slate-900">
+              {t("storages")}
+            </Typography>
+            <Typography level="body-lg" className="text-slate-500">
              {t("storage-delete-info")}
            </Typography>
+          </div>
+          <Button
+            onClick={() => setModal(true)}
+            size="lg"
+            startDecorator={<AddBoxIcon />}
+            className="ml-auto rounded-2xl bg-[#0b6bcb] px-5 text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
+          >
+            {t("add")}
+          </Button>
+        </div>
+      </div>
+
+      <Sheet className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
+        <AddStorageModal isOpen={modal} setOpen={setModal} />
+        {isLoading ? (
+          <div className="flex items-center justify-center py-16">
+            <CircularProgress size="lg" />
+          </div>
+        ) : (
          <Table
-            borderAxis="x"
-            color="neutral"
-            stickyHeader
-            stripe="odd"
-            variant="soft"
+            hoverRow
+            className="min-w-240 text-slate-700"
+            sx={{
+              "--TableCell-headBackground": "transparent",
+              "& thead th": {
+                fontWeight: "lg",
+                color: "#475569",
+                padding: "16px 20px",
+              },
+              "& tbody td": {
+                padding: "18px 20px",
+              },
+              "& tbody tr": {
+                borderTop: "1px solid #e2e8f0",
+              },
+            }}
          >
            <thead>
              <tr>
@@ -40,7 +71,7 @@ export const Storages = () => {
                <th>{t("description")}</th>
                <th>{t("created-at")}</th>
                <th>{t("updated-at")}</th>
-                <th></th>
+                <th className="text-right"></th>
              </tr>
            </thead>
            <tbody>
@@ -49,8 +80,8 @@ export const Storages = () => {
              ))}
            </tbody>
          </Table>
-        </>
        )}
      </Sheet>
+    </>
  );
 };