feat: hide other course participants from students

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

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { slide } from 'svelte/transition';
   import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
   import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte';
@@ -14,7 +14,7 @@
   export let handleClick = () => {};
   export let label = '';
   export let isGroupActive = false;
-  export let isExpanded = true;
+  export let isExpanded: boolean | undefined;
   export let total = 0;
   export let isLoading = true;
   export let isLesson = false;

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

@@ -26,11 +26,10 @@
     hideSortIcon: boolean;
     isLesson?: boolean;
     isPaidFeature: boolean;
+    isExpanded?: boolean;
     show?: () => boolean;
   }
 
-  let show: boolean = false;
-  let isLessonActive: boolean = false;
   let resize = false;
   let isDragging = false;
   let startX: number;
@@ -52,11 +51,6 @@
 
   let navItems: NavItem[] = [];
 
-  function handleMobileChange(isMobile: boolean) {
-    if (isMobile) show = false;
-    else show = true;
-  }
-
   function handleCursor(event: MouseEvent) {
     if (!resize && sidebarRef) {
       const isNearLeftBorder = event.clientX - sidebarRef.getBoundingClientRect().left < 8;
@@ -140,10 +134,6 @@
     }
   });
 
-  $: handleMobileChange($isMobile);
-
-  $: isLessonActive = $page.url.pathname.includes('/lessons');
-
   $: {
     navItems = [
       {
@@ -157,7 +147,8 @@
         to: getLessonsRoute($course.id),
         hideSortIcon: false,
         isPaidFeature: false,
-        isLesson: true
+        isLesson: true,
+        isExpanded: isStudent ? true : $page.url.pathname.includes('/lessons')
       },
       {
         label: 'Attendance',
@@ -184,7 +175,10 @@
         label: 'People',
         to: getNavItemRoute($course.id, 'people'),
         isPaidFeature: false,
-        hideSortIcon: true
+        hideSortIcon: true,
+        show() {
+          return !isStudent;
+        }
       },
       {
         label: 'Certificates',
@@ -248,11 +242,11 @@
             label={navItem.label}
             handleClick={handleMainGroupClick(navItem.to)}
             isGroupActive={(path || $page.url.pathname) === navItem.to}
-            isExpanded={isLessonActive}
             total={navItem.isLesson ? ($lessons || []).length : 0}
             isLoading={!$course.id}
             isLesson={navItem.isLesson}
             isPaidFeature={navItem.isPaidFeature}
+            isExpanded={navItem.isExpanded}
             {isStudent}
           >
             {#if navItem.isLesson}

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

@@ -37,7 +37,7 @@
       role="presentation"
     >
       <div
-        class="mb-4 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"
+        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"
       >
         <p class="text-md m-0 font-medium dark:text-white">
           {modalHeading}

apps/dashboard/src/lib/components/Org/VerifyEmail/VerifyEmailModal.svelte

@@ -54,7 +54,7 @@
   <div class="flex flex-col items-center space-y-6 text-center">
     <img src="/verify-email.svg" alt="email verification" />
     <p class="font-bold text-xl">Verify your Email</p>
-    <p class="text-sm w-[70%] text-gray-700">
+    <p class="text-sm w-[70%] text-gray-500">
       We've sent a verification email to {$profile.email} to confirm the validity of the email provided.
     </p>
 

apps/dashboard/src/lib/components/PrimaryButton/constants.js

@@ -28,7 +28,7 @@ export const VARIANTS_CLASS = {
     'border border-black dark:border-white hover:bg-neutral-600 hover:text-white text-black dark:text-white',
   [VARIANTS.NONE]:
     'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-neutral-800 text-black',
-  [VARIANTS.TEXT]: 'text-black hover:underline',
+  [VARIANTS.TEXT]: 'text-black dark:text-white hover:underline',
   [VARIANTS.LINK]: 'text-primary-500 dark:text-primary-500 hover:underline',
   [VARIANTS.TEXT_DANGER]:
     'text-red-500 hover:border border-t-0 border-l-0 border-r-0 border-red-300'