added design to storage table

frontend/src/components/StorageRow.tsx

@@ -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 className="text-sm text-slate-500">
-      <td>{formatDate(storage.updated_at)}</td>
+        {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>
   );

frontend/src/components/modals/AddStorageModal.tsx

@@ -59,16 +59,20 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
   return (
     <>
       <Modal open={props.isOpen} onClose={() => props.setOpen(false)}>
-        <ModalDialog>
+        <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>{t("new-storage-title")}</DialogTitle>
+          <DialogTitle className="text-slate-900">
-          <DialogContent>{t("new-storage-content")}</DialogContent>
+            {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}

frontend/src/pages/Storages.tsx

@@ -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} />
+      <div className="space-y-6">
-          <Button onClick={() => setModal(true)}>+</Button>
+        <div className="flex flex-wrap items-center gap-3">
-          <Typography level="body-md" color="warning" fontWeight={"bold"}>
+          <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"
+            hoverRow
-            color="neutral"
+            className="min-w-240 text-slate-700"
-            stickyHeader
+            sx={{
-            stripe="odd"
+              "--TableCell-headBackground": "transparent",
-            variant="soft"
+              "& 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>
+    </>
   );
 };