fix

apps/web/components/dashboard/home/BlogSection.tsx

@@ -35,7 +35,7 @@ const blogPosts: BlogPost[] = [
     url: "https://plan4better.de/en/posts/2023-08-01-parking/",
   },
   {
-    title: "GOAT as a cross-stakeholder planning platform in the MRN",
+    title: "Green Spaces in Urban Areas: The Key to Resilient Cities",
     date: "May 30, 2023",
     thumbnail:
       "https://plan4better.de/images/blog/green-spaces-resilient-cities/thumbnail.webp",

apps/web/components/dashboard/home/SectionCard.tsx

@@ -60,6 +60,11 @@ const SectionCard = (props: SectionCard) => {
       <DeleteContentModal
         open={isDeleteDialogOpen}
         onClose={() => setIsDeleteDialogOpen(false)}
+        onDelete={() => {
+          setIsDeleteDialogOpen(false);
+          setActiveContent(null);
+          // show success toast
+        }}
         activeContent={activeContent}
       />
       <Card

apps/web/components/modals/DeleteContent.tsx

@@ -1,4 +1,6 @@
 import type { ActiveCard } from "@/components/dashboard/home/SectionCard";
+import { LAYERS_API_BASE_URL, deleteLayer } from "@/lib/api/layers";
+import { PROJECTS_API_BASE_URL, deleteProject } from "@/lib/api/projects";
 import {
   Button,
   Dialog,
@@ -8,6 +10,8 @@ import {
   DialogTitle,
   Typography,
 } from "@mui/material";
+import { toast } from "react-toastify";
+import { mutate } from "swr";
 
 interface DeleteContentDialogProps {
   open: boolean;
@@ -24,7 +28,21 @@ const DeleteContentModal: React.FC<DeleteContentDialogProps> = ({
   onDelete,
   activeContent,
 }) => {
-  const handleDelete = () => {
+  const handleDelete = async () => {
+    try {
+      if (!activeContent) return;
+      if (activeContent.type === "layer") {
+        await deleteLayer(activeContent?.id);
+        mutate((key) => Array.isArray(key) && key[0] === LAYERS_API_BASE_URL);
+      } else if (activeContent.type === "project") {
+        await deleteProject(activeContent?.id);
+        mutate((key) => Array.isArray(key) && key[0] === PROJECTS_API_BASE_URL);
+      }
+      toast.success(`${activeContent?.type} deleted successfully`);
+    } catch {
+      toast.error(`Error deleting ${activeContent?.type}`);
+    }
+
     if (onDelete) onDelete();
   };
 
@@ -43,10 +61,7 @@ const DeleteContentModal: React.FC<DeleteContentDialogProps> = ({
           pb: 2,
         }}
       >
-        <Button
-          onClick={onClose}
-          variant="text"
-        >
+        <Button onClick={onClose} variant="text" sx={{ borderRadius: 0 }}>
           <Typography variant="body2" fontWeight="bold" color="inherit">
             Cancel
           </Typography>
@@ -56,6 +71,7 @@ const DeleteContentModal: React.FC<DeleteContentDialogProps> = ({
           variant="text"
           color="error"
           disabled={disabled}
+          sx={{ borderRadius: 0 }}
         >
           <Typography variant="body2" fontWeight="bold" color="inherit">
             Delete

apps/web/lib/api/layers.ts

@@ -19,3 +19,14 @@ export const useLayers = (queryParams?: GetContentQueryParams) => {
     isValidating,
   };
 };
+
+export const deleteLayer = async (id: string) => {
+  try {
+    await fetch(`${LAYERS_API_BASE_URL}/${id}`, {
+      method: "DELETE",
+    });
+  } catch (error) {
+    console.error(error);
+    throw Error(`deleteLayer: unable to delete project with id ${id}`);
+  }
+};

apps/web/lib/api/projects.ts

@@ -34,3 +34,4 @@ export const deleteProject = async (id: string) => {
     throw Error(`deleteProject: unable to delete project with id ${id}`)
   }
 }
+

apps/web/lib/providers/ToastProvider.tsx

@@ -10,7 +10,12 @@ export default function ToastProvider({ children }: ToastProviderProps) {
   return (
     <>
       {children}
-      <ToastContainer transition={Zoom} position="top-center" autoClose={2000} />
+      <ToastContainer
+        transition={Zoom}
+        position="top-center"
+        autoClose={2000}
+        hideProgressBar
+      />
     </>
   );
 }

packages/ui/theme/overrides/button.ts

@@ -44,6 +44,9 @@ const Button = (theme: Theme) => {
             padding: `${theme.spacing(1.875, 6.25)}`,
           },
         },
+        dialogBoxRectangle: {
+          borderRadius: 0,
+        }
       },
     },
   };