feat: Safelist all classes needed for alerts

1 files changed, 11 insertions, 5 deletions

diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte
index 87962cf..53aa783 100644
--- a/apps/kit/src/lib/components/alert.svelte
+++ b/apps/kit/src/lib/components/alert.svelte
@@ -25,12 +25,11 @@
     export let actions: Array<{ id: string; text: string; color?: string }> =
         [];
     // This value is set on a plain anchor tag without any svelte routing,
-    // listen to the right-link-click if you want to intercept the click without navigating
+    // listen to the rightLinkClick if you want to intercept the click without navigating
     export let rightLinkHref = "javascript:void(0)";
     export let visible = true;
 
     const dispatch = createEventDispatcher();
-
     const cooldownStorageKey = "lastseen--" + id;
 
     let iconComponent: any;
@@ -79,6 +78,14 @@
         }
     }
 
+    function rightLinkClicked() {
+        dispatch("rightLinkCliked");
+    }
+
+    function actionClicked(name: string) {
+        dispatch("act-" + name);
+    }
+
     // Manages the state of the alert if cooldown is enabled
     function run_cooldown() {
         if (!cooldownEnabled) {
@@ -160,8 +167,7 @@
                                 <p class="mt-3 text-sm md:mt-0 md:ml-6">
                                     <a
                                         href={rightLinkHref}
-                                        on:click={() =>
-                                            dispatch("right-link-click")}
+                                        on:click={() => rightLinkClicked()}
                                         class="whitespace-nowrap font-medium text-{colorClassPart}-700 hover:text-{colorClassPart}-600"
                                     >
                                         {rightLinkText}
@@ -187,7 +193,7 @@
                             {@const color = action?.color ?? colorClassPart}
                             <button
                                 type="button"
-                                on:click={() => dispatch("act-" + action.id)}
+                                on:click={() => actionClicked(action.id)}
                                 class="rounded-md
                             bg-{color}-50
                             px-2 py-1.5 text-sm font-medium