CLASSROOMIO-T-127: Theming configuration

CLASSROOMIO-T-127: Add 4 themes configurations into the app

Clean up


Co-authored-by: Rotimi Best <[email protected]>


Merge-request: CLASSROOMIO-MR-51
Merged-by: Best Admin <[email protected]>

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

@@ -162,11 +162,11 @@
   <section class="my-5 mx-9">
     <StructuredList class="m-0">
       <!-- Moved the lesson headers outside the students loop -->
-      <StructuredListHead class="bg-blue-100">
+      <StructuredListHead class="bg-primary-100">
         <StructuredListRow head class="mx-7">
-          <StructuredListCell head class="text-blue-600 py-3">Student</StructuredListCell>
+          <StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
           {#each $lessons as lesson, index}
-            <StructuredListCell head class="text-blue-600 py-3"
+            <StructuredListCell head class="text-primary-600 py-3"
               >Lesson 0{getLectureNo(index + 1)}</StructuredListCell
             >
           {/each}

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

@@ -29,6 +29,7 @@
   import { course, setCourse, group } from '$lib/components/Course/store';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import TextChip from '$lib/components/Chip/Text.svelte';
+  import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
 
   export let data;
   const { courseId } = data;
@@ -143,7 +144,7 @@
               value={getLessonOrder(lesson.id)}
               size="sm"
               shape="rounded-full"
-              className="bg-blue-200 text-blue-600 text-xs"
+              className="bg-primary-200 text-primary-600 text-xs"
             />
           </div>
 
@@ -186,12 +187,10 @@
                   <p class="dark:text-white ml-2 text-sm mb-3">No tutor added</p>
                 {:else}
                   <a href="." class="flex items-center hover:underline mb-2">
-                    <img
-                      alt="Placeholder"
-                      class="block rounded-full"
-                      width="24"
-                      height="20"
+                    <Avatar
+                      className="w-6 h-6"
                       src={lesson.profile.avatar_url}
+                      name="Avatar placeholder"
                     />
                     <p class="dark:text-white ml-2 text-sm">
                       {lesson.profile.fullname}
@@ -231,7 +230,7 @@
                   <div class="flex">
                     <Video size={20} class="carbon-icon text-gray-400 dark:text-white ml-0.5" />
                     <a
-                      class="text-sm ml-2 text-blue-600"
+                      class="text-sm ml-2 text-primary-600"
                       href={lesson.call_url || '#'}
                       target="_blank"
                     >

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

@@ -158,13 +158,13 @@
         class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
       >
         <StructuredListRow head class="mx-7">
-          <StructuredListCell head class="text-blue-700 py-3 dark:text-white"
+          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
             >Name</StructuredListCell
           >
-          <StructuredListCell head class="text-blue-700 py-3 dark:text-white"
+          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
             >Role</StructuredListCell
           >
-          <StructuredListCell head class="text-blue-700 py-3 dark:text-white"
+          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
             >Action</StructuredListCell
           >
           <RoleBasedSecurity allowedRoles={[1, 2]}>
@@ -192,7 +192,7 @@
                       <p class="dark:text-white text-base font-normal">
                         {person.profile.fullname}
                       </p>
-                      <p class="text-xs text-blue-600">
+                      <p class="text-xs text-primary-600">
                         {getEmail(person)}
                       </p>
                     </div>
@@ -210,12 +210,12 @@
                 <div class="flex items-center w-2/4 absolute bottom-3">
                   <TextChip
                     value={person.email.substring(0, 2).toUpperCase()}
-                    className="bg-blue-200 text-black font-semibold text-xs mr-3"
+                    className="bg-primary-200 text-black font-semibold text-xs mr-3"
                     shape="rounded-full"
                   />
                   <a
                     href="mailto:{person.email}"
-                    class="text-md text-blue-600 mr-2 dark:text-white"
+                    class="text-md text-primary-600 mr-2 dark:text-white"
                   >
                     {person.email}
                   </a>

src/routes/courses/[id]/submissions/+page.svelte

@@ -286,7 +286,7 @@
                     </p>
                   </a>
                   <a
-                    class="text-blue-700 text-md font-bold"
+                    class="text-primary-700 text-md font-bold"
                     href="{$page.url.pathname}?submissionId={item.id}"
                   >
                     {item.exercise.title}