Revert active navbar colors to gray

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

@@ -24,13 +24,13 @@
 
 <div class="">
   <button
-    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:opacity-80 dark:hover:bg-gray-700 {isGroupActive &&
+    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 hover:text-black {isGroupActive &&
       NavClasses.active} w-[95%]"
     tabindex="0"
     on:click={onClick}
   >
     <NavIcons name={label} />
-    <span class="dark:text-white font-bold text-md">{label}</span>
+    <span class="font-bold text-md">{label}</span>
     {#if total}
       <span class="ml-1">({total})</span>
     {/if}

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

@@ -12,19 +12,19 @@
 </script>
 
 {#if name === 'Overview'}
-  <TableOfContents size={20} class="carbon-icon dark:text-white mr-2" />
+  <TableOfContents size={20} class="carbon-icon  mr-2" />
 {:else if name === 'Lessons'}
-  <IbmWatsonKnowledgeCatalog size={20} class="carbon-icon dark:text-white mr-2" />
+  <IbmWatsonKnowledgeCatalog size={20} class="carbon-icon mr-2" />
 {:else if name === 'Attendance'}
-  <ListChecked size={20} class="carbon-icon dark:text-white mr-2" />
+  <ListChecked size={20} class="carbon-icon mr-2" />
 {:else if name === 'Submissions'}
-  <Workspace size={20} class="carbon-icon dark:text-white mr-2" />
+  <Workspace size={20} class="carbon-icon mr-2" />
 {:else if name === 'Marks'}
-  <Result size={20} class="carbon-icon dark:text-white mr-2" />
+  <Result size={20} class="carbon-icon mr-2" />
 {:else if name === 'People'}
-  <Group size={20} class="carbon-icon dark:text-white mr-2" />
+  <Group size={20} class="carbon-icon mr-2" />
 {:else if name === 'Landing Page'}
-  <ApplicationWeb size={20} class="carbon-icon dark:text-white mr-2" />
+  <ApplicationWeb size={20} class="carbon-icon mr-2" />
 {:else if name === 'Certificates'}
-  <Badge size={20} class="carbon-icon dark:text-white mr-2" />
+  <Badge size={20} class="carbon-icon mr-2" />
 {/if}

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

@@ -197,7 +197,7 @@
                     aria-disabled={!item.is_unlocked}
                   >
                     <div
-                      class="flex items-center py-3 px-4 rounded hover:opacity-80 w-full {(
+                      class="flex items-center py-3 px-4 rounded hover:opacity-80 w-full hover:bg-gray-200 hover:text-black {(
                         path || $page.url.pathname
                       ).includes(item.id) && NavClasses.active}"
                     >

src/lib/components/Org/SideBar.svelte

@@ -77,10 +77,12 @@
         {#each menuItems as menuItem}
           <a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
             <li
-              class="flex items-center py-3 px-4 mb-2 rounded hover:opacity-80 {isActive(
+              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 hover:text-black dark:hover:text-black {isActive(
                 $page.url.pathname,
                 `${$currentOrgPath}${menuItem.path}`
-              ) && NavClasses.active}"
+              )
+                ? NavClasses.active
+                : 'dark:text-white'}"
             >
               {#if menuItem.path === ''}
                 <HomeIcon color="#7A797D" />
@@ -89,16 +91,13 @@
               {:else if menuItem.path === '/site'}
                 <SiteSettingsIcon />
               {:else if menuItem.path === '/community'}
-                <ForumIcon
-                  size={24}
-                  class="carbon-icon dark:text-white fill-[#7A797D] dark:fill-[#fff]"
-                />
+                <ForumIcon size={24} class="carbon-icon dark:text-white fill-[#7A797D]" />
               {:else if menuItem.path === '/quiz'}
                 <QuizIcon />
               {:else if menuItem.path === '/audience'}
                 <AudienceIcon />
               {/if}
-              <p class="dark:text-white ml-2">{menuItem.label}</p>
+              <p class=" ml-2">{menuItem.label}</p>
             </li>
           </a>
         {/each}
@@ -114,13 +113,15 @@
       </a>
       <a href="{$currentOrgPath}/settings" class="text-black no-underline">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:opacity-80 {isActive(
+          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 hover:text-black dark:hover:text-black {isActive(
             $page.url.pathname,
             `${$currentOrgPath}/settings`
-          ) && NavClasses.active}"
+          )
+            ? NavClasses.active
+            : 'dark:text-white'}"
         >
           <Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" />
-          <p class="dark:text-white ml-2">Settings</p>
+          <p class="ml-2">Settings</p>
         </li>
       </a>
     </ul>

src/lib/utils/constants/reusableClass.js

@@ -1,4 +1,5 @@
 export const NavClasses = {
-  active: 'active-sidenav bg-primary-700 text-white transition delay-150 duration-300 ease-in-out',
+  active:
+    'bg-gray-200 dark:bg-gray-300 text-black dark:text-black transition delay-150 duration-300 ease-in-out',
   background: ''
 };

src/routes/+layout.svelte

@@ -365,9 +365,7 @@
     width: 100%;
   }
 
-  :global(.dark svg.dark path),
-  :global(.active-sidenav svg.dark path),
-  :global(.active-sidenav svg.carbon-icon path) {
+  :global(.dark svg.dark) {
     fill: #fff;
   }