CLASSROOMIO-T-95: Upload finishing touches

src/lib/components/Course/components/Navigation/NavExpandable.svelte

@@ -3,6 +3,7 @@
   import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
   import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
+  import { NavClasses } from '$lib/utils/constants/reusableClass';
   import NavIcons from './NavIcons.svelte';
 
   export let handleClick = () => {};
@@ -12,8 +13,6 @@
   export let total = 0;
   // export let subMenuItems = [];
 
-  let activeClass = 'bg-gray-200 dark:bg-gray-800';
-
   function onClick() {
     handleClick();
   }
@@ -25,8 +24,8 @@
 
 <div class="">
   <button
-    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isGroupActive &&
-      activeClass} w-[95%]"
+    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isGroupActive &&
+      NavClasses.active} w-[95%]"
     tabindex="0"
     on:click={onClick}
   >

src/lib/components/Course/components/Navigation/index.svelte

@@ -24,7 +24,7 @@
   import { course } from '$lib/components/Course/store';
   import { updateCourse } from '$lib/utils/services/courses';
   import { profile } from '$lib/utils/store/user';
-  import { currentOrgPath } from '$lib/utils/store/org';
+  import { NavClasses } from '$lib/utils/constants/reusableClass';
   import { isMobile } from '$lib/utils/store/useMobile';
 
   // export let lessonId;
@@ -32,7 +32,6 @@
   export let isStudent = null;
 
   let show = null;
-  let activeClass = 'bg-gray-200 dark:bg-gray-800';
   let isLessonActive = false;
 
   function handleMainGroupClick(href) {
@@ -151,7 +150,7 @@
 
 <div class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}">
   {#if show}
-    <div class="relative h-full dark:bg-gray-700">
+    <div class="relative h-full dark:bg-gray-800">
       <!-- <PageNav title="Back to courses" paddingClass="pl-2" titleSize="text-md">
         <slot:fragment slot="image">
           <Avatar src={$course.logo} />
@@ -202,12 +201,12 @@
                     <div
                       class="flex items-center py-3 px-4 rounded hover:bg-gray-200 dark:hover:bg-gray-800 w-full {(
                         path || $page.url.pathname
-                      ).includes(item.id) && activeClass}"
+                      ).includes(item.id) && NavClasses.active}"
                     >
                       <TextChip
                         value={getLectureNo(index + 1)}
                         className="bg-blue-200 text-blue-600 text-xs mr-2"
-                        size="xl"
+                        size="sm"
                         shape="rounded-full"
                       />
                       <span>{item.title}</span>