fix: course settings showing save popup wrongly

apps/dashboard/src/lib/components/Modal/DeleteModal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import Modal from './index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { t } from '$lib/utils/functions/translations';
+
+  export let open = false;
+  export let onDelete = () => {};
+
+  function handleDelete() {
+    onDelete();
+    open = false;
+  }
+</script>
+
+<Modal
+  onClose={() => (open = false)}
+  bind:open
+  width="w-96"
+  containerClass="p-6"
+  headerClass="p-2"
+  modalHeading={$t('delete_modal.label')}
+>
+  <div>
+    <p class="dark:text-white text-xl text-center">
+      {$t('delete_modal.content')}
+    </p>
+
+    <div class="mt-8 flex items-center justify-between">
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.OUTLINED}
+        label={$t('delete_modal.no')}
+        onClick={() => (open = false)}
+      />
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.CONTAINED_DANGER}
+        label={$t('delete_modal.yes')}
+        onClick={handleDelete}
+      />
+    </div>
+  </div>
+</Modal>

apps/dashboard/src/lib/components/Modal/index.svelte

@@ -39,7 +39,7 @@
       role="presentation"
     >
       <div
-        class="flex items-center justify-between border border-l-0 border-r-0 border-t-0 border-gray-100 dark:border-neutral-600 p-4 px-5 {headerClass}"
+        class="{headerClass} flex items-center justify-between border border-l-0 border-r-0 border-t-0 border-gray-100 dark:border-neutral-600 p-4 px-5"
       >
         <p class="text-md m-0 font-medium dark:text-white {labelClass}">
           {modalHeading}