feat: add icon to create a new lesson from side nav (#145)

* feat: classroomio-issue-143

* issue 143: remove bg-color from the add icon

* fix: hide the + icon for student

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte

@@ -6,7 +6,7 @@
   import Tabs from './components/Tabs.svelte';
   import { polls } from './store';
   import type { PollType, TabsType, PollOptionsSubmissionType } from './types';
-  import { apps } from '$lib/components/Apps/store';
+  import { globalStore } from '$lib/utils/store/app';
   import { getSupabase } from '$lib/utils/functions/supabase';
   import { profile } from '$lib/utils/store/user';
   import { group, course } from '$lib/components/Course/store';
@@ -198,7 +198,7 @@
       return;
     }
 
-    polls.set(getPollsData(data, $apps.isStudent));
+    polls.set(getPollsData(data, $globalStore.isStudent));
 
     setCoursePolls();
 

apps/dashboard/src/lib/components/Apps/components/Poll/utils.ts

@@ -1,6 +1,6 @@
 import type { PollType, FetchPollsResponse } from './types';
 
-export const getPollsData = (data: FetchPollsResponse, isStudent: boolean) => {
+export const getPollsData = (data: FetchPollsResponse, isStudent?: boolean) => {
   const pollsData: PollType[] = data.map((appsPollItem) => ({
     id: appsPollItem.id,
     courseId: appsPollItem.courseId,

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

@@ -6,6 +6,7 @@
   import IconButton from '$lib/components/IconButton/index.svelte';
   import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
   import { apps } from './store';
+  import { globalStore } from '$lib/utils/store/app';
 
   import Chip from '$lib/components/Chip/index.svelte';
   import QandA from './components/QandA/index.svelte';
@@ -19,7 +20,7 @@
 
   let appBarRef: HTMLDivElement;
   let appContentRef: HTMLDivElement;
-  let topPadding = $apps.isStudent ? '48px' : '109px';
+  let topPadding = $globalStore.isStudent ? '48px' : '109px';
 
   const getResizableSidebar = () => {
     if (!browser) return;
@@ -29,7 +30,7 @@
 
   function handleClose() {
     $apps.selectedApp = undefined;
-    if ($apps.isStudent) {
+    if ($globalStore.isStudent) {
       $apps.open = false;
     }
   }
@@ -43,7 +44,7 @@
     $apps.dropdown = !$apps.dropdown;
   }
 
-  function updateTopPadding(isStudent: boolean) {
+  function updateTopPadding(isStudent?: boolean) {
     topPadding = isStudent ? '48px' : '109px';
   }
 
@@ -54,10 +55,10 @@
   }
 
   onMount(() => {
-    updateTopPadding($apps.isStudent);
+    updateTopPadding($globalStore.isStudent);
   });
 
-  $: updateTopPadding($apps.isStudent);
+  $: updateTopPadding($globalStore.isStudent);
   $: getResizableSidebar();
 </script>
 

apps/dashboard/src/lib/components/Apps/store.ts

@@ -4,10 +4,8 @@ export const apps = writable<{
   open: boolean;
   dropdown: boolean;
   selectedApp: string | undefined;
-  isStudent: boolean;
 }>({
   open: false,
   dropdown: false,
-  selectedApp: undefined,
-  isStudent: false
+  selectedApp: undefined
 });

apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte

@@ -9,7 +9,7 @@
   import Plain from './certificates/Plain.svelte';
   import { course } from '$lib/components/Course/store';
   import { currentOrg } from '$lib/utils/store/org';
-  import { appStore } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';
 
   const studentNamePlaceholder = 'Name of student';
   const themes = ['professional', 'plain'];
@@ -94,7 +94,7 @@
           class="my-4"
           size="sm"
         >
-          <span slot="labelA" style={$appStore.isDark ? 'color: white' : 'color: #161616'}
+          <span slot="labelA" style={$globalStore.isDark ? 'color: white' : 'color: #161616'}
             >Locked</span
           >
           <span slot="labelB" style="color: green">Unlocked</span>

apps/dashboard/src/lib/components/Course/components/Lesson/AddLessonModal.svelte

@@ -13,8 +13,8 @@
   import TextChip from '$lib/components/Chip/Text.svelte';
   import Modal from '$lib/components/Modal/index.svelte';
   import { goto } from '$app/navigation';
+  import { handleAddLessonWidget } from '../Navigation/store';
 
-  export let openModal = false;
   export let isStudent = false;
   let errors = {
     title: ''
@@ -49,13 +49,13 @@
       $lessons = [...$lessons, lesson];
       goto('/courses/' + $course.id + '/lessons/' + lesson.id);
     }
-    openModal = false;
+    $handleAddLessonWidget.open = false;
   };
 </script>
 
 <Modal
-  onClose={() => (openModal = false)}
-  bind:open={openModal}
+  onClose={() => ($handleAddLessonWidget.open = false)}
+  bind:open={$handleAddLessonWidget.open}
   width="w-[80%] md:w-[60%]"
   containerClass="overflow-hidden"
   modalHeading="Add New Lesson"

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

@@ -2,10 +2,12 @@
   import { slide } from 'svelte/transition';
   import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
   import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte';
+  import Add from 'carbon-icons-svelte/lib/Add.svelte';
+  import { SkeletonText } from 'carbon-components-svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import { NavClasses } from '$lib/utils/constants/reusableClass';
+  import { handleAddLessonWidget } from './store';
   import NavIcons from './NavIcons.svelte';
-  import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
 
   export let handleClick = () => {};
   export let label = '';
@@ -13,8 +15,14 @@
   export let isExpanded = true;
   export let total = 0;
   export let isLoading = true;
+  export let isLesson = false;
+  export let isStudent = true;
   // export let subMenuItems = [];
 
+  function addLesson() {
+    $handleAddLessonWidget.open = true;
+  }
+
   function onClick() {
     handleClick();
   }
@@ -46,7 +54,12 @@
     {/if}
     <span class="grow" />
 
-    {#if label === 'Lessons' && !isLoading}
+    {#if isLesson && !isLoading}
+      {#if !isStudent}
+        <IconButton onClick={() => addLesson()} size="small">
+          <Add />
+        </IconButton>
+      {/if}
       <IconButton size="small" stopPropagation={true} onClick={toggleIsExpanded}>
         {#if isExpanded}
           <ChevronUpIcon class="carbon-icon dark:text-white" />

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

@@ -15,6 +15,7 @@
   import { sideBar } from '$lib/components/Org/store';
   import { profile } from '$lib/utils/store/user';
   import { getIsLessonComplete } from '../Lesson/functions';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let path: string;
   export let isStudent: boolean = false;
@@ -23,7 +24,7 @@
     label: string;
     to: string;
     hideSortIcon: boolean;
-    isLecture?: boolean;
+    isLesson?: boolean;
     show?: () => boolean;
   }
 
@@ -153,7 +154,7 @@
         label: 'Lessons',
         to: getLessonsRoute($course.id),
         hideSortIcon: false,
-        isLecture: true
+        isLesson: true
       },
       {
         label: 'Attendance',
@@ -206,6 +207,8 @@
       }
     ];
   }
+
+  $: console.log({ isStudent: $globalStore.isStudent });
 </script>
 
 <aside
@@ -236,10 +239,12 @@
             handleClick={handleMainGroupClick(navItem.to)}
             isGroupActive={(path || $page.url.pathname) === navItem.to}
             isExpanded={isLessonActive}
-            total={navItem.isLecture ? ($lessons || []).length : 0}
+            total={navItem.isLesson ? ($lessons || []).length : 0}
             isLoading={!$course.id}
+            isLesson={navItem.isLesson}
+            {isStudent}
           >
-            {#if navItem.isLecture}
+            {#if navItem.isLesson}
               {#each $lessons as item, index}
                 <a
                   class="pl-7 w-[95%] text-[0.80rem] mb-1 text-black dark:text-white {isStudent &&

apps/dashboard/src/lib/components/Course/components/Navigation/store.js

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+export let handleAddLessonWidget = writable({
+  open: false
+});

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

@@ -7,8 +7,8 @@
   import Confetti from '../Confetti/index.svelte';
   import { isMobile } from '$lib/utils/store/useMobile';
   import { profile } from '$lib/utils/store/user';
-  import { apps } from '$lib/components/Apps/store';
   import { fetchCourse } from '$lib/utils/services/courses';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let courseId = '';
   export let path = '';
@@ -44,15 +44,17 @@
 
   $: onCourseIdChange(courseId);
 
-  $: {
+  $: if (typeof $globalStore.isStudent !== 'boolean') {
     const user = $group.people.find((person) => person.profile_id === $profile.id);
 
     if (user) {
       isStudent = user.role_id === 3;
-      $apps.isStudent = isStudent;
+      $globalStore.isStudent = isStudent;
 
       filterPollsByStatus(isStudent);
     }
+  } else {
+    isStudent = $globalStore.isStudent;
   }
 </script>
 

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

@@ -5,7 +5,7 @@
   import CoursesEmptyIcon from '../Icons/CoursesEmptyIcon.svelte';
   import { courseMetaDeta } from './store';
   import type { Course } from '$lib/utils/types';
-  import { appStore } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let courses: Course[] = [];
   export let emptyTitle = 'No Courses Created';
@@ -42,7 +42,7 @@
           currency={courseData.currency}
           totalLessons={courseData.total_lessons}
           totalStudents={courseData.total_students}
-          isLMS={$appStore.isOrgSite}
+          isLMS={$globalStore.isOrgSite}
           progressRate={calcProgressRate(courseData.progress_rate, courseData.total_lessons)}
         />
       {/key}

apps/dashboard/src/lib/components/Navigation/app.svelte

@@ -9,7 +9,7 @@
   import ArrowLeft from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
 
   import IconButton from '$lib/components/IconButton/index.svelte';
-  import { appStore } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';
   import { currentOrgPath } from '$lib/utils/store/org';
   import { toggleBodyByMode } from '$lib/utils/functions/app';
   import { sideBar } from '../Org/store';
@@ -23,16 +23,16 @@
   };
 
   function toggleDarkMode() {
-    $appStore.isDark = !$appStore.isDark;
+    $globalStore.isDark = !$globalStore.isDark;
 
-    toggleBodyByMode($appStore.isDark);
+    toggleBodyByMode($globalStore.isDark);
 
     if (browser) {
-      localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
+      localStorage.setItem('mode', $globalStore.isDark ? 'dark' : '');
     }
   }
 
-  $: coursesPath = $appStore.isOrgSite
+  $: coursesPath = $globalStore.isOrgSite
     ? '/lms/mylearning'
     : isCoursePage
       ? `${$currentOrgPath}/courses`
@@ -91,7 +91,7 @@
     </li>
     <li>
       <IconButton size="small" onClick={toggleDarkMode}>
-        {#if $appStore.isDark}
+        {#if $globalStore.isDark}
           <Sun size={16} class="text-white" />
         {:else}
           <Moon size={16} class="text-white" />

apps/dashboard/src/lib/components/Navigation/lms.svelte

@@ -8,7 +8,7 @@
   import TextChip from '$lib/components/Chip/Text.svelte';
 
   import IconButton from '$lib/components/IconButton/index.svelte';
-  import { appStore } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';
   import { Close, Menu } from 'carbon-icons-svelte';
   import { sideBar } from '$lib/components/Org/store';
   import { currentOrg } from '$lib/utils/store/org';
@@ -21,11 +21,11 @@
   };
 
   function toggleDarkMode() {
-    $appStore.isDark = !$appStore.isDark;
+    $globalStore.isDark = !$globalStore.isDark;
 
-    toggleBodyByMode($appStore.isDark);
+    toggleBodyByMode($globalStore.isDark);
     if (browser) {
-      localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
+      localStorage.setItem('mode', $globalStore.isDark ? 'dark' : '');
     }
   }
 
@@ -80,7 +80,7 @@
     </li>
     <li>
       <IconButton size="small" onClick={toggleDarkMode}>
-        {#if $appStore.isDark}
+        {#if $globalStore.isDark}
           <SunIcon size={16} class="text-white" />
         {:else}
           <MoonIcon size={16} class="text-white" />

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { PUBLIC_TINYMCE_API_KEY } from '$env/static/public';
   import Editor from '@tinymce/tinymce-svelte';
-  import { appStore } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let id = '';
   export let value: string | undefined = '';
@@ -72,7 +72,7 @@
 
   $: value = !value ? '' : value;
 
-  $: handleModeChange($appStore.isDark);
+  $: handleModeChange($globalStore.isDark);
 </script>
 
 <div>

apps/dashboard/src/lib/utils/store/app.js

@@ -1,7 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const appStore = writable({
-  isDark: false,
-  isOrgSite: false,
-  orgSiteName: ''
-});

apps/dashboard/src/lib/utils/store/app.ts

@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store';
+
+export const globalStore = writable<{
+  isDark: boolean;
+  isOrgSite: boolean;
+  orgSiteName: string;
+  isStudent?: boolean;
+}>({
+  isDark: false,
+  isOrgSite: false,
+  orgSiteName: '',
+  isStudent: undefined
+});

apps/dashboard/src/routes/+error.svelte

@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import { browser } from '$app/environment';
   import { page } from '$app/stores';
-  import { appStore } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';
   import ErrorIcon from '$lib/components/Icons/ErrorIcon.svelte';
   import ErrorIconDarkMode from '$lib/components/Icons/ErrorIconDarkMode.svelte';
 
@@ -36,7 +36,7 @@
 
   <div class="w-72 lg:w-2/4 flex items-center justify-center">
     <!-- to check if it's in dark mode so as to render the appropriate svg -->
-    {#if $appStore.isDark}
+    {#if $globalStore.isDark}
       <ErrorIconDarkMode />
     {:else}
       <ErrorIcon />

apps/dashboard/src/routes/+layout.svelte

@@ -27,7 +27,7 @@
   import { ROUTE } from '$lib/utils/constants/routes';
   import { getOrganizations } from '$lib/utils/services/org';
   import { toggleBodyByMode } from '$lib/utils/functions/app';
-  import { appStore } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';
   import { currentOrg } from '$lib/utils/store/org';
   import { setTheme } from '$lib/utils/functions/theme';
   import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';
@@ -207,8 +207,8 @@
 
     if (browser) {
       // Update theme - dark or light mode
-      $appStore.isDark = localStorage.getItem('mode') === 'dark';
-      toggleBodyByMode($appStore.isDark);
+      $globalStore.isDark = localStorage.getItem('mode') === 'dark';
+      toggleBodyByMode($globalStore.isDark);
 
       const theme = localStorage.getItem('theme');
       if (data.isOrgSite && data.org?.theme) {
@@ -256,8 +256,8 @@
       if (!data.org) {
         goto('/404');
       } else {
-        $appStore.orgSiteName = data.orgSiteName;
-        $appStore.isOrgSite = data.isOrgSite;
+        $globalStore.orgSiteName = data.orgSiteName;
+        $globalStore.isOrgSite = data.isOrgSite;
 
         currentOrg.set(data.org);
       }
@@ -270,7 +270,7 @@
   });
 
   $: path = $page.url?.pathname?.replace('/', '');
-  $: carbonTheme = $appStore.isDark ? 'g100' : 'white';
+  $: carbonTheme = $globalStore.isDark ? 'g100' : 'white';
 </script>
 
 <svelte:window on:resize={handleResize} />

apps/dashboard/src/routes/404/+page.svelte

@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
 
-  import { appStore } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
 
   const src = './bg-404.png';
@@ -11,7 +11,7 @@
 </script>
 
 <div
-  style={$appStore.isDark ? `background-image:url(${src})` : ''}
+  style={$globalStore.isDark ? `background-image:url(${src})` : ''}
   class={`error bg-gray-200 bg-no-repeat bg-cover flex items-center justify-center w-screen gap-20`}
 >
   <div class=" dark:text-white gap-3 w-4/5 lg:w-2/5">

apps/dashboard/src/routes/courses/[id]/+layout.svelte

@@ -2,12 +2,13 @@
   import { onMount } from 'svelte';
   import { sideBar } from '$lib/components/Org/store';
   import { apps } from '$lib/components/Apps/store';
+  import { globalStore } from '$lib/utils/store/app';
   import APPS_CONSTANTS from '$lib/components/Apps/constants';
   import hotkeys from 'hotkeys-js';
 
   function handleClose() {
     $apps.selectedApp = undefined;
-    if ($apps.isStudent) {
+    if ($globalStore.isStudent) {
       $apps.open = false;
     }
   }

apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import {
     Search,
     Checkbox,
@@ -21,10 +20,11 @@
   import { ROLE } from '$lib/utils/constants/roles';
   import { takeAttendance } from '$lib/utils/services/attendance';
   import { snackbar } from '$lib/components/Snackbar/store';
-  import { attendance } from '$lib/utils/store/attendance.js';
+  import { attendance } from '$lib/utils/store/attendance';
   import { profile } from '$lib/utils/store/user';
   import type { GroupPerson, Lesson } from '$lib/utils/types/index';
   import { browser } from '$app/environment';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let data;
 
@@ -38,7 +38,6 @@
   }
 
   let students: GroupPerson[] = [];
-  let isStudent: boolean = false;
   let searchValue = '';
 
   function setAttendance(courseData: CourseData) {
@@ -65,7 +64,7 @@
   }
 
   function handleAttendanceChange(e: any, student: GroupPerson, lesson: Lesson) {
-    if (isStudent) return;
+    if ($globalStore.isStudent) return;
 
     const attendanceItem = $attendance[student.id]
       ? $attendance[student.id][lesson.id] || { id: undefined }
@@ -130,14 +129,14 @@
     }
   }
 
-  $: students = isStudent
+  $: students = $globalStore.isStudent
     ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
 
   $: browser && $course.id && firstRender($course.id);
 </script>
 
-<CourseContainer bind:isStudent bind:courseId={data.courseId}>
+<CourseContainer bind:courseId={data.courseId}>
   <PageNav title="Attendance" />
   <PageBody width="w-full max-w-6xl md:w-11/12">
     <section class="flex items-center mx-2 lg:mx-9 my-5">
@@ -189,8 +188,8 @@
               {#each $lessons as lesson}
                 <StructuredListCell class="">
                   <Checkbox
-                    class={isStudent ? 'cursor-not-allowed' : ''}
-                    disabled={isStudent}
+                    class={$globalStore.isStudent ? 'cursor-not-allowed' : ''}
+                    disabled={$globalStore.isStudent}
                     checked={$attendance[student.id]
                       ? $attendance[student.id][lesson.id]
                         ? $attendance[student.id][lesson.id].is_present

apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte

@@ -14,12 +14,11 @@
   import StudentCertificate from '$lib/components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
 
   export let courseId: string = '';
-  let isStudent = false;
 </script>
 
 <IssueCertificateModal />
 
-<CourseContainer bind:isStudent bind:courseId>
+<CourseContainer bind:courseId>
   <PageNav title="Certificates" disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>

apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte

@@ -18,7 +18,6 @@
   import Select from '$lib/components/Form/Select.svelte';
   import { updateLesson } from '$lib/utils/services/courses';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import { profile } from '$lib/utils/store/user';
   import type { Lesson } from '$lib/utils/types';
   import {
     lessons,
@@ -32,13 +31,13 @@
   import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
   import DateField from '$lib/components/Form/Date.svelte';
   import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
+  import { handleAddLessonWidget } from '$lib/components/Course/components/Navigation/store.js';
 
   export let data;
 
   let lessonEditing: string | undefined;
   let lessonToDelete: Lesson | undefined;
   let isStudent = true;
-  let openModal = false;
   let openDeleteModal = false;
 
   const flipDurationMs = 300;
@@ -55,7 +54,7 @@
   }
 
   function addLesson() {
-    openModal = true;
+    $handleAddLessonWidget.open = true;
   }
 
   function handleDndConsider(e: any) {
@@ -88,17 +87,11 @@
       return index + 1;
     }
   }
-
-  $: {
-    const user = $group.people.find((person) => person.profile_id === $profile.id);
-
-    if (user) {
-      isStudent = user.role_id === 3;
-    }
-  }
 </script>
 
-<AddLessonModal {isStudent} bind:openModal />
+{#if $handleAddLessonWidget}
+  <AddLessonModal {isStudent} />
+{/if}
 
 <DeleteLessonConfirmation
   bind:openDeleteModal
@@ -106,6 +99,7 @@
   deleteLesson={() => handleDelete(lessonToDelete?.id)}
 />
 
+<!-- TODO: Refactor usage of two way binding isStudent, rather use $globalStore.isStudent -->
 <CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Lessons">
     <div slot="widget">

apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -217,6 +217,7 @@
   $: isLessonComplete = getIsLessonComplete($lesson.lesson_completion, $profile.id);
 </script>
 
+<!-- TODO: Refactor usage of two way binding isStudent, rather use $globalStore.isStudent -->
 <CourseContainer
   bind:isStudent
   {path}

apps/dashboard/src/routes/courses/[id]/marks/+page.svelte

@@ -14,13 +14,13 @@
   import { browser } from '$app/environment';
   import { course } from '$lib/components/Course/store';
   import { snackbar } from '$lib/components/Snackbar/store';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let data;
 
   let borderBottomGrey = 'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
   let borderleftGrey = 'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
   let students = [];
-  let isStudent = false;
 
   let lessonMapping = {}; // { lessonId: { exerciseId: exerciseTitle, ... }, ... }
   let studentMarksByExerciseId = {}; // { groupMemberId: { exerciseId: `total_gotten/points`, ... }, ... }
@@ -78,14 +78,14 @@
     });
   }
 
-  $: students = isStudent
+  $: students = $globalStore.isStudent
     ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
 
   $: browser && $course.id && firstRender($course.id);
 </script>
 
-<CourseContainer bind:isStudent bind:courseId={data.courseId}>
+<CourseContainer bind:courseId={data.courseId}>
   <PageNav title="Marks" />
 
   <PageBody width="w-full max-w-6xl md:w-11/12">

apps/dashboard/src/routes/courses/[id]/people/+page.svelte

@@ -40,7 +40,6 @@
   let member: { id?: string; email?: string; profile?: { email: string } } = {};
   let shouldEditMemberId: string | null = null;
   let filterBy: ProfileRole = ROLES[0];
-  let isStudent = false;
   let searchValue = '';
 
   // function setPeople(people: Array<Person>) {
@@ -91,12 +90,13 @@
     return profile ? profile.email : email;
   }
 
-	function obscureEmail(email) {
-		const [username, domain] = email.split('@');
-		const obscuredUsername = username.charAt(0) + '*'.repeat(username.length - 2) + username.charAt(username.length - 1);
+  function obscureEmail(email) {
+    const [username, domain] = email.split('@');
+    const obscuredUsername =
+      username.charAt(0) + '*'.repeat(username.length - 2) + username.charAt(username.length - 1);
 
-		return `${obscuredUsername}@${domain}`;
-	}
+    return `${obscuredUsername}@${domain}`;
+  }
 
   function handleEditStudentIdMode(personId: string) {
     shouldEditMemberId = personId;
@@ -120,7 +120,7 @@
   {deletePerson}
 />
 
-<CourseContainer bind:isStudent bind:courseId={data.courseId}>
+<CourseContainer bind:courseId={data.courseId}>
   <PageNav title="People" disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>

apps/dashboard/src/routes/courses/[id]/settings/+page.svelte

@@ -5,10 +5,9 @@
   import Settings from '$lib/components/Course/components/Settings/index.svelte';
 
   export let data;
-  let isStudent = false;
 </script>
 
-<CourseContainer bind:isStudent bind:courseId={data.courseId}>
+<CourseContainer bind:courseId={data.courseId}>
   <PageNav title="Settings" />
   <PageBody>
     <Settings />

apps/dashboard/src/routes/org/[slug]/+page.svelte

@@ -16,10 +16,10 @@
   import { onMount } from 'svelte';
   import { Add } from 'carbon-icons-svelte';
   import { isOrgAdmin, currentOrgPath, currentOrg, userUpcomingData } from '$lib/utils/store/org';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants.js';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
   import { getGreeting } from '$lib/utils/functions/date';
-  import { appStore } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let data;
 
@@ -164,15 +164,15 @@
       },
       colors: {
         text: {
-          primary: $appStore.isDark ? '#eee' : '#333',
+          primary: $globalStore.isDark ? '#eee' : '#333',
           highlight: '#fff'
         },
         background: {
-          primary: $appStore.isDark ? '#333' : '#fff',
-          highlight: $appStore.isDark ? '#5829d6' : '#eb7400',
-          hover: $appStore.isDark ? '#222' : '#eee'
+          primary: $globalStore.isDark ? '#333' : '#fff',
+          highlight: $globalStore.isDark ? '#5829d6' : '#eb7400',
+          hover: $globalStore.isDark ? '#222' : '#eee'
         },
-        border: $appStore.isDark ? '#222' : '#eee'
+        border: $globalStore.isDark ? '#222' : '#eee'
       }
     }
   };