From 4ef1d7bf6c19f7b6bb776620e01ea9c64e45d5dc Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 11 Apr 2024 10:14:37 +0100
Subject: [PATCH] feat: hide other course participants from students

---
 .../Navigation/NavExpandable.svelte           |  4 ++--
 .../Course/components/Navigation/index.svelte | 22 +++++++------------
 .../src/lib/components/Modal/index.svelte     |  2 +-
 .../Org/VerifyEmail/VerifyEmailModal.svelte   |  2 +-
 .../lib/components/PrimaryButton/constants.js |  2 +-
 5 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte b/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte
index 6aaabd5e..d46540bb 100644
--- a/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte
+++ b/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;
diff --git a/apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte b/apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte
index 1812bd26..3cf1b7b4 100644
--- a/apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte
+++ b/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}
diff --git a/apps/dashboard/src/lib/components/Modal/index.svelte b/apps/dashboard/src/lib/components/Modal/index.svelte
index 094bd063..465db519 100644
--- a/apps/dashboard/src/lib/components/Modal/index.svelte
+++ b/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}
diff --git a/apps/dashboard/src/lib/components/Org/VerifyEmail/VerifyEmailModal.svelte b/apps/dashboard/src/lib/components/Org/VerifyEmail/VerifyEmailModal.svelte
index 51e24d4f..6e713392 100644
--- a/apps/dashboard/src/lib/components/Org/VerifyEmail/VerifyEmailModal.svelte
+++ b/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>
 
diff --git a/apps/dashboard/src/lib/components/PrimaryButton/constants.js b/apps/dashboard/src/lib/components/PrimaryButton/constants.js
index 225cd44f..446912c3 100644
--- a/apps/dashboard/src/lib/components/PrimaryButton/constants.js
+++ b/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'