Fix Styles

src/components/styled/SWModal.svelte

@@ -18,28 +18,28 @@
   -->
 
 <script lang="ts">
-  import { run, createBubbler, stopPropagation } from 'svelte/legacy';
-
-  const bubble = createBubbler();
-    import {createEventDispatcher, onMount} from "svelte";
+    import {onMount} from "svelte";
 
   interface Props {
     title: string;
     open: boolean;
     children?: import('svelte').Snippet;
     footer?: import('svelte').Snippet;
+    onclose?: () => void;
+    onclick?: () => void;
+
   }
 
   let {
     title,
     open = $bindable(),
     children,
-    footer
+    footer,
+      onclose = () => {},
+      onclick = () => {}
   }: Props = $props();
     let internalOpen = $state(open);
 
-    const dispatch = createEventDispatcher();
-
 
     let dialog: HTMLDialogElement = $state();
 
@@ -53,52 +53,30 @@
     function close() {
         open = false;
         internalOpen = false;
-        dispatch("close");
+        onclose()
     }
-    run(() => {
-    if (open && !internalOpen) {
-          dialog.showModal();
-          internalOpen = true;
-      } else if (!open && internalOpen) {
-          dialog.close();
-          internalOpen = false;
-      }
-  });
+
+    $effect(() => {
+        if (open && !internalOpen) {
+            dialog.showModal();
+            internalOpen = true;
+        } else if (!open && internalOpen) {
+            dialog.close();
+            internalOpen = false;
+        }
+    })
 </script>
 
-<dialog bind:this={dialog} onclose={close} oncancel={close} onclick={() => dialog.close()} aria-hidden="true">
-    <div onclick={stopPropagation(bubble('click'))} aria-hidden="true">
-        <div class="spaced bordered">
-            <h1>{title}</h1>
+<dialog bind:this={dialog} onclose={close} oncancel={close} onclick={() => dialog.close()} aria-hidden="true" class="max-h-full max-w-md w-full rounded-lg shadow-lg dark:bg-neutral-800 dark:text-neutral-100">
+    <div onclick={onclick} aria-hidden="true">
+        <div class="p-6 border-b border-neutral-200 dark:border-neutral-700">
+            <h1 class="text-4xl font-bold">{title}</h1>
         </div>
-        <div class="spaced main bordered">
+        <div class="p-6 main border-b border-neutral-200 dark:border-neutral-700">
             {@render children?.()}
         </div>
-        <div class="footer spaced" onclick={() => dialog.close()} aria-hidden="true">
+        <div class="flex mx-4 my-2 p-6" onclick={() => dialog.close()} aria-hidden="true">
             {@render footer?.()}
         </div>
     </div>
 </dialog>
-
-<style lang="scss">
-  h1 {
-    @apply text-4xl font-bold;
-  }
-
-  dialog {
-    @apply max-h-full max-w-md w-full rounded-lg shadow-lg
-        dark:bg-neutral-800 dark:text-neutral-100;
-  }
-
-  .spaced {
-    @apply p-6;
-  }
-
-  .bordered {
-    @apply border-b border-neutral-200 dark:border-neutral-700;
-  }
-
-  .footer {
-    @apply flex mx-4 my-2;
-  }
-</style>