From 71d87c8bd9cb8829ba147b0088b54812452ba415 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 26 Dec 2024 07:24:41 +0100
Subject: [PATCH] fix: course settings warning popup

---
 .../Course/components/Settings/index.svelte   | 49 ++++++++++---------
 .../Courses/components/Card/index.svelte      | 28 +++++------
 2 files changed, 37 insertions(+), 40 deletions(-)

diff --git a/apps/dashboard/src/lib/components/Course/components/Settings/index.svelte b/apps/dashboard/src/lib/components/Course/components/Settings/index.svelte
index ab22ea98..2ec6c0fb 100644
--- a/apps/dashboard/src/lib/components/Course/components/Settings/index.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Settings/index.svelte
@@ -1,42 +1,41 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { env } from '$env/dynamic/public';
   import {
     CodeSnippet,
-    Grid,
-    Row,
     Column,
-    Toggle,
+    Grid,
+    RadioButton,
     RadioButtonGroup,
-    RadioButton
+    Row,
+    Toggle
   } from 'carbon-components-svelte';
-  import { Restart, ArrowUpRight } from 'carbon-icons-svelte';
-  import { env } from '$env/dynamic/public';
+  import { ArrowUpRight, Restart } from 'carbon-icons-svelte';
 
-  import SectionTitle from '$lib/components/Org/SectionTitle.svelte';
-  import UnsavedChanges from '$lib/components/UnsavedChanges/index.svelte';
-  import TextField from '$lib/components/Form/TextField.svelte';
   import TextArea from '$lib/components/Form/TextArea.svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import SectionTitle from '$lib/components/Org/SectionTitle.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import UnsavedChanges from '$lib/components/UnsavedChanges/index.svelte';
   import DragAndDrop from './DragAndDrop.svelte';
 
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import { settings } from './store';
   import { course } from '$lib/components/Course/store';
-  import type { Course } from '$lib/utils/types';
-  import { updateCourse, deleteCourse } from '$lib/utils/services/courses';
-  import { currentOrgPath, isFreePlan } from '$lib/utils/store/org';
-  import { isObject } from '$lib/utils/functions/isObject';
-  import { lessons } from '../Lesson/store/lessons';
-  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
-  import { snackbar } from '$lib/components/Snackbar/store';
-  import UploadWidget from '$lib/components/UploadWidget/index.svelte';
   import { handleOpenWidget } from '$lib/components/CourseLandingPage/store';
-  import UpgradeBanner from '$lib/components/Upgrade/Banner.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
-  import generateSlug from '$lib/utils/functions/generateSlug';
-  import { t } from '$lib/utils/functions/translations';
   import DeleteModal from '$lib/components/Modal/DeleteModal.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import UpgradeBanner from '$lib/components/Upgrade/Banner.svelte';
+  import UploadWidget from '$lib/components/UploadWidget/index.svelte';
+  import generateSlug from '$lib/utils/functions/generateSlug';
+  import { isObject } from '$lib/utils/functions/isObject';
+  import { t } from '$lib/utils/functions/translations';
+  import { deleteCourse, updateCourse } from '$lib/utils/services/courses';
+  import { currentOrg, currentOrgDomain, currentOrgPath, isFreePlan } from '$lib/utils/store/org';
+  import type { Course } from '$lib/utils/types';
   import { COURSE_TYPE } from '$lib/utils/types';
+  import { lessons } from '../Lesson/store/lessons';
+  import { settings } from './store';
 
   let isSaving = false;
   let isLoading = false;
@@ -395,7 +394,7 @@
       <Toggle
         size="sm"
         bind:toggled={$settings.allow_new_students}
-        on:toggle={() => {
+        on:click={() => {
           hasUnsavedChanges = true;
         }}
       >
@@ -415,9 +414,11 @@
       <Toggle
         size="sm"
         bind:toggled={$settings.is_published}
+        on:click={() => {
+          hasUnsavedChanges = true;
+        }}
         on:toggle={(e) => {
           $settings.allow_new_students = e.detail.toggled;
-          hasUnsavedChanges = true;
           if (!$course.slug) {
             generateNewCourseLink();
           }
diff --git a/apps/dashboard/src/lib/components/Courses/components/Card/index.svelte b/apps/dashboard/src/lib/components/Courses/components/Card/index.svelte
index 90d834bf..624ed737 100644
--- a/apps/dashboard/src/lib/components/Courses/components/Card/index.svelte
+++ b/apps/dashboard/src/lib/components/Courses/components/Card/index.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-  import {
-    Tag,
-    ImageLoader,
-    SkeletonPlaceholder,
-    OverflowMenu,
-    OverflowMenuItem
-  } from 'carbon-components-svelte';
-  import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
+  import { goto } from '$app/navigation';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { calcCourseDiscount } from '$lib/utils/functions/course';
+  import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
   import { t } from '$lib/utils/functions/translations';
   import { COURSE_TYPE } from '$lib/utils/types';
-  import RadioButtonChecked from 'carbon-icons-svelte/lib/RadioButtonChecked.svelte';
+  import {
+    ImageLoader,
+    OverflowMenu,
+    OverflowMenuItem,
+    SkeletonPlaceholder,
+    Tag
+  } from 'carbon-components-svelte';
   import GrowthIcon from 'carbon-icons-svelte/lib/Growth.svelte';
+  import RadioButtonChecked from 'carbon-icons-svelte/lib/RadioButtonChecked.svelte';
   import UserProfileIcon from 'carbon-icons-svelte/lib/UserProfile.svelte';
-  import { calcCourseDiscount } from '$lib/utils/functions/course';
-  import { goto } from '$app/navigation';
 
   export let bannerImage: string | undefined;
   export let id = '';
@@ -116,7 +116,7 @@
     <div class="relative mb-5">
       {#if !isLMS && !isOnLandingPage}
         <OverflowMenu
-          class="absolute right-2 top-2 z-50 hidden rounded-full bg-white group-hover:flex"
+          class="absolute right-2 top-2 z-50 rounded-full bg-gray-200 opacity-0 transition-all delay-150  duration-200 ease-in-out group-hover:opacity-100 dark:bg-neutral-800"
           size="sm"
           on:click={(e) => e.stopPropagation()}
         >
@@ -235,10 +235,6 @@
 </div>
 
 <style>
-  a,
-  a:hover {
-    text-decoration: none;
-  }
   .title,
   .description {
     height: 42px;