Improve dark mode of icons + inputs improvements

src/routes/+page.svelte

@@ -17,18 +17,18 @@
     {
       title: 'Access',
       description:
-        'Quickly find any material you need to get your job done. ClassroomIO offers the All-in-on-platform',
+        'Quickly find any material you need to get your job done. ClassroomIO offers the All-in-on-platform'
     },
     {
       title: 'Analytics',
       description:
-        'Avoid assumptions, better understand the needs of your classrooms and give students a personlized experience',
+        'Avoid assumptions, better understand the needs of your classrooms and give students a personlized experience'
     },
     {
       title: 'Automation',
       description:
-        'Lesson reminders, deadline reminders and many other automated alerts to help everyone in the learning process be proactive',
-    },
+        'Lesson reminders, deadline reminders and many other automated alerts to help everyone in the learning process be proactive'
+    }
   ];
 
   async function handleSubmit() {
@@ -72,9 +72,7 @@
   <form on:submit|preventDefault={handleSubmit} class="my-4">
     <div class="flex items-center flex-col sm:flex-row">
       {#if success}
-        <p class="dark:text-white">
-          You have been added successfully. Thanks for joining.
-        </p>
+        <p class="dark:text-white">You have been added successfully. Thanks for joining.</p>
       {:else}
         <TextField
           bind:value={email}
@@ -85,9 +83,7 @@
           isRequired={true}
           isDisabled={isAdding}
         />
-        <PrimaryButton type="submit" isLoading={isAdding}>
-          Join waiting list
-        </PrimaryButton>
+        <PrimaryButton type="submit" isLoading={isAdding}>Join waiting list</PrimaryButton>
       {/if}
     </div>
   </form>
@@ -99,11 +95,11 @@
       >
         <h3 class="dark:text-white text-3xl">
           {#if index === 0}
-            <FlowStreamReferenceIcon size={32} class="carbon-icon" />
+            <FlowStreamReferenceIcon size={32} class="carbon-icon dark:text-white" />
           {:else if index === 1}
-            <ChartClusterBarIcon size={32} class="carbon-icon" />
+            <ChartClusterBarIcon size={32} class="carbon-icon dark:text-white" />
           {:else if index === 2}
-            <MachineLearningModelIcon size={32} class="carbon-icon" />
+            <MachineLearningModelIcon size={32} class="carbon-icon dark:text-white" />
           {/if}
           {area.title}
         </h3>

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

@@ -149,9 +149,9 @@
                   }}
             >
               {#if lesson.is_unlocked}
-                <UnlockedIcon size={24} class="carbon-icon" />
+                <UnlockedIcon size={24} class="carbon-icon dark:text-white" />
               {:else}
-                <LockedIcon size={24} class="carbon-icon" />
+                <LockedIcon size={24} class="carbon-icon dark:text-white" />
               {/if}
             </IconButton>
           </div>
@@ -166,11 +166,11 @@
                     handleSaveLesson(lesson, $course.id);
                   }}
                 >
-                  <SaveIcon size={24} class="carbon-icon" />
+                  <SaveIcon size={24} class="carbon-icon dark:text-white" />
                 </IconButton>
               {:else}
                 <IconButton onClick={() => (lessonEditing = lesson.id)}>
-                  <EditIcon size={24} class="carbon-icon" />
+                  <EditIcon size={24} class="carbon-icon dark:text-white" />
                 </IconButton>
               {/if}
             </div>
@@ -239,7 +239,7 @@
                     on:input={(e) => (lesson.lesson_at = e.target.value)}
                   />
                 {:else}
-                  <TimeIcon size={24} class="carbon-icon" />
+                  <TimeIcon size={24} class="carbon-icon dark:text-white" />
                   <p class="dark:text-white text-md ml-2">
                     {new Date(lesson.lesson_at).toDateString()}
                   </p>
@@ -255,7 +255,7 @@
                     placeholder="https://meet.google.com/mga-dsjs-fmb"
                   />
                 {:else}
-                  <PhoneIcon size={24} class="carbon-icon" />
+                  <PhoneIcon size={24} class="carbon-icon dark:text-white" />
                   <a class="text-md ml-2" href={lesson.call_url || '#'} target="_blank">
                     {lesson.call_url ? 'Join lesson' : 'No link'}
                   </a>
@@ -267,7 +267,7 @@
           <RoleBasedSecurity allowedRoles={[1, 2]}>
             <div class="absolute bottom-2 right-0">
               <IconButton onClick={handleDelete(lesson.id)}>
-                <TrashCanIcon size={24} class="carbon-icon" />
+                <TrashCanIcon size={24} class="carbon-icon dark:text-white" />
               </IconButton>
             </div>
           </RoleBasedSecurity>

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

@@ -2,11 +2,7 @@
   import { onMount } from 'svelte';
   import copy from 'copy-to-clipboard';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import {
-    fetchCourse,
-    deleteGroupMember,
-    updatedGroupMember,
-  } from '$lib/utils/services/courses';
+  import { fetchCourse, deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
   import EditIcon from 'carbon-icons-svelte/lib/Edit.svelte';
   import CopyIcon from 'carbon-icons-svelte/lib/Copy.svelte';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
@@ -23,12 +19,9 @@
   import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
   import {
     invitationModal,
-    deleteMemberModal,
+    deleteMemberModal
   } from '$lib/components/Course/components/People/store';
-  import type {
-    Person,
-    ProfileRole,
-  } from '$lib/components/Course/components/People/types';
+  import type { Person, ProfileRole } from '$lib/components/Course/components/People/types';
   import { ROLE_LABEL, ROLES } from '$lib/utils/constants/roles';
   import { profile } from '$lib/utils/store/user';
   import { snackbarStore } from '$lib/components/Snackbar/store';
@@ -51,9 +44,7 @@
   // }
 
   async function deletePerson() {
-    $group.people = $group.people.filter(
-      (person: { id: string }) => person.id !== member.id
-    );
+    $group.people = $group.people.filter((person: { id: string }) => person.id !== member.id);
 
     await deleteGroupMember(member.id);
   }
@@ -127,9 +118,7 @@
     </div>
 
     <div class="table rounded-md border border-gray-300 w-full">
-      <div
-        class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
-      >
+      <div class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3">
         <span class="dark:text-white w-1/4 text-center">ID</span>
         <!-- <span class="flex-grow" /> -->
         <p class="dark:text-white text-lg w-2/4">Name</p>
@@ -156,14 +145,10 @@
               </p>
               {#if !isStudent}
                 <div class="absolute edit-btn">
-                  <IconButton
-                    onClick={() => handleEditStudentIdMode(person.id)}
-                  >
+                  <IconButton onClick={() => handleEditStudentIdMode(person.id)}>
                     <EditIcon size={16} class="carbon-icon active" />
                   </IconButton>
-                  <IconButton
-                    onClick={() => copyToClipboard(person.assigned_student_id)}
-                  >
+                  <IconButton onClick={() => copyToClipboard(person.assigned_student_id)}>
                     <CopyIcon size={16} class="carbon-icon active" />
                   </IconButton>
                 </div>
@@ -173,17 +158,11 @@
           <!-- <span class="flex-grow" /> -->
           {#if person.profile}
             <div class="w-2/4 mx-2 flex items-center">
-              <Avatar
-                src={person.profile.avatar_url}
-                name={person.profile.fullname}
-              />
+              <Avatar src={person.profile.avatar_url} name={person.profile.fullname} />
               <div class="ml-2 break-all">
                 <p class="dark:text-white text-lg">{person.profile.fullname}</p>
                 {#if !isStudent}
-                  <a
-                    href="mailto:{person.profile.email}"
-                    class="text-md text-blue-600"
-                  >
+                  <a href="mailto:{person.profile.email}" class="text-md text-blue-600">
                     {person.profile.email}
                   </a>
                 {/if}
@@ -191,9 +170,7 @@
             </div>
           {:else}
             <div class="break-all w-2/4 mx-2">
-              <p
-                class="bg-yellow-500 pending text-sm text-center rounded-xl text-white"
-              >
+              <p class="bg-yellow-500 pending text-sm text-center rounded-xl text-white">
                 Pending Invite
               </p>
               <a href="mailto:{person.email}" class="text-md text-blue-600">
@@ -215,7 +192,7 @@
                     $deleteMemberModal.open = true;
                   }}
                 >
-                  <TrashCanIcon size={24} class="carbon-icon" />
+                  <TrashCanIcon size={24} class="carbon-icon dark:text-white" />
                 </IconButton>
               {/if}
             </div>

src/routes/dashboard/+page.svelte

@@ -167,7 +167,7 @@
               {lessonData.lesson_title}
               {#if lessonData.is_unlocked}
                 <span class="ml-2 success">
-                  <CheckmarkFilledIcon size={20} class="carbon-icon" />
+                  <CheckmarkFilledIcon size={20} class="carbon-icon dark:text-white" />
                 </span>
               {:else}
                 <span class="text-md ml-2">🔒</span>

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

@@ -251,10 +251,10 @@
                 {lessonData.lesson_title}
                 {#if lessonData.is_unlocked}
                   <span class="ml-2 success">
-                    <LockedIcon class="carbon-icon" />
+                    <LockedIcon class="carbon-icon dark:text-white" />
                   </span>
                 {:else}
-                  <UnlockedIcon class="carbon-icon" />
+                  <UnlockedIcon class="carbon-icon dark:text-white" />
                 {/if}
               </a>
               <p class="dark:text-white text-grey text-sm flex items-center">

src/routes/org/[slug]/community/[slug]/+page.svelte

@@ -18,7 +18,7 @@
   import { supabase } from '$lib/utils/functions/supabase';
   import {
     askCommunityValidation,
-    commentInCommunityValidation,
+    commentInCommunityValidation
   } from '$lib/utils/functions/validator';
   import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
   import { snackbarStore } from '$lib/components/Snackbar/store';
@@ -39,11 +39,11 @@
   let isEditMode = false;
   let deleteComment = {
     shouldDelete: false,
-    commentId: null,
+    commentId: null
   };
   let editContent = {
     title: '',
-    body: '',
+    body: ''
   };
 
   function mapResToQuestion(data) {
@@ -54,7 +54,7 @@
       author: {
         id: data?.author?.profile?.id || '',
         name: data?.author?.profile?.fullname || '',
-        avatar: data?.author?.profile?.avatar_url || '',
+        avatar: data?.author?.profile?.avatar_url || ''
       },
       body: data.body,
       createdAt: dayjs(data.created_at).fromNow(true),
@@ -65,9 +65,9 @@
         avatar: c.author?.profile?.avatar_url || '',
         votes: c.votes,
         comment: c.body,
-        createdAt: dayjs(c.created_at).fromNow(true),
+        createdAt: dayjs(c.created_at).fromNow(true)
       })),
-      totalComments: 0,
+      totalComments: 0
     };
   }
 
@@ -124,7 +124,7 @@
         body: comment,
         question_id: question.id,
         author_id: $currentOrg.memberId,
-        votes: 0,
+        votes: 0
       })
       .select();
 
@@ -151,8 +151,8 @@
           avatar: $profile?.avatar_url || '',
           votes: 0,
           comment: _c.body,
-          createdAt: dayjs(_c.created_at).fromNow(true),
-        },
+          createdAt: dayjs(_c.created_at).fromNow(true)
+        }
       ];
 
       // Reset input
@@ -183,10 +183,7 @@
         return c;
       });
     }
-    const { error } = await supabase
-      .from(table)
-      .update({ votes })
-      .match({ id: matchId });
+    const { error } = await supabase.from(table).update({ votes }).match({ id: matchId });
     if (error) {
       console.error('Error: upvoteQuestion', error);
       $snackbarStore.open = true;
@@ -251,9 +248,7 @@
       .match({ id: deleteComment.commentId });
 
     if (!error) {
-      question.comments = question.comments.filter(
-        (c) => c.id !== deleteComment.commentId
-      );
+      question.comments = question.comments.filter((c) => c.id !== deleteComment.commentId);
 
       deleteComment.shouldDelete = false;
       deleteComment.commentId = null;
@@ -288,7 +283,7 @@
         class="text-gray-500 dark:text-white text-md flex items-center"
         href={`${$currentOrgPath}/community`}
       >
-        <ArrowLeftIcon size={24} class="carbon-icon" /> Go Back
+        <ArrowLeftIcon size={24} class="carbon-icon dark:text-white" /> Go Back
       </a>
       <div class="my-5 flex justify-between items-center">
         {#if isEditMode}
@@ -329,9 +324,7 @@
       </div>
       <div class="my-1 px-1 rounded-lg border border-1 border-gray">
         <header class="flex items-center justify-between leading-none p-2">
-          <div
-            class="flex items-center no-underline hover:underline text-black"
-          >
+          <div class="flex items-center no-underline hover:underline text-black">
             <Avatar
               src={question.author.avatar}
               name={question.author.name}
@@ -375,12 +368,7 @@
           <div class="w-full rounded-lg border border-1 border-gray">
             <header class="flex items-center justify-between leading-none p-2">
               <div class="flex items-center text-black">
-                <Avatar
-                  src={comment.avatar}
-                  name={comment.name}
-                  width="w-7"
-                  height="h-7"
-                />
+                <Avatar src={comment.avatar} name={comment.name} width="w-7" height="h-7" />
                 <p class="dark:text-white ml-2 text-sm">{comment.name}</p>
                 <p class="dark:text-white ml-2 text-sm text-gray-500">
                   {comment.createdAt}
@@ -399,7 +387,7 @@
                     deleteComment.commentId = comment.id;
                   }}
                 >
-                  <TrashCanIcon size={16} class="carbon-icon" />
+                  <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
                 </IconButton>
               {/if}
             </header>

src/routes/org/[slug]/community/ask/+page.svelte

@@ -13,7 +13,7 @@
   let errors = {};
   let fields = {
     title: '',
-    body: '',
+    body: ''
   };
 
   async function handleSave() {
@@ -31,7 +31,7 @@
         organization_id: $currentOrg.id,
         author_id: $currentOrg.memberId,
         votes: 0,
-        slug: generateSlug(fields.title),
+        slug: generateSlug(fields.title)
       })
       .select();
 
@@ -61,7 +61,7 @@
       class="text-gray-500 dark:text-white text-md flex items-center"
       href={`${$currentOrgPath}/community`}
     >
-      <ArrowLeftIcon size={24} class="carbon-icon" /> Go Back
+      <ArrowLeftIcon size={24} class="carbon-icon dark:text-white" /> Go Back
     </a>
     <div class="flex items-center justify-between">
       <h1 class="dark:text-white text-3xl font-bold">Ask the community</h1>

src/routes/org/[slug]/quiz/[slug]/+page.svelte

@@ -11,12 +11,7 @@
   import { currentOrgPath, deleteModal } from '$lib/utils/store/org';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import {
-    themeImages,
-    allOptions,
-    booleanOptions,
-    allThemes,
-  } from '$lib/utils/constants/quiz';
+  import { themeImages, allOptions, booleanOptions, allThemes } from '$lib/utils/constants/quiz';
   import { quizStore, quizesStore } from '$lib/utils/store/org';
   import DeleteModal from '$lib/components/Org/Quiz/DeleteModal.svelte';
   import Preview from '$lib/components/Org/Quiz/Play/Preview.svelte';
@@ -30,7 +25,7 @@
 
   // Questionnaire State
   let currentQuestion = $quizStore.questions[0] || {
-    options: [],
+    options: []
   };
 
   // Behavioural State
@@ -55,16 +50,14 @@
         id: new Date().getTime(),
         label: '',
         type: 'multichoice',
-        options: [],
-      },
+        options: []
+      }
     ];
     type = 'multichoice';
   }
   function addOption() {
     const cOptIds = currentQuestion.options.map((o) => o.id);
-    const nextOption = cloneDeep(allOptions).find(
-      (o) => !cOptIds.includes(o.id)
-    );
+    const nextOption = cloneDeep(allOptions).find((o) => !cOptIds.includes(o.id));
 
     if (!nextOption) return;
 
@@ -91,9 +84,7 @@
   function deleteQuestion() {
     // Only leave one question
     if ($quizStore.questions.length === 1) return;
-    $quizStore.questions = $quizStore.questions.filter(
-      (q) => q.id !== currentQuestion.id
-    );
+    $quizStore.questions = $quizStore.questions.filter((q) => q.id !== currentQuestion.id);
 
     currentQuestion = $quizStore.questions[0];
   }
@@ -115,7 +106,7 @@
         if (valLabelError) {
           options.push({
             id: o.id,
-            error: true,
+            error: true
           });
         }
 
@@ -128,7 +119,7 @@
         isLabelEmpty: labelError,
         hasOneAnswer,
         id: q.id,
-        options,
+        options
       });
     });
 
@@ -149,7 +140,7 @@
       .from('quiz')
       .update({
         ...$quizStore,
-        updated_at: new Date(),
+        updated_at: new Date()
       })
       .match({ id: quizId });
 
@@ -170,8 +161,7 @@
   function qHasError(qId, _errs) {
     return _errs.some((qe) => {
       return (
-        (qId ? qe.id === qId : true) &&
-        (qe.isLabelEmpty || !qe.hasOneAnswer || !!qe.options.length)
+        (qId ? qe.id === qId : true) && (qe.isLabelEmpty || !qe.hasOneAnswer || !!qe.options.length)
       );
     });
   }
@@ -212,7 +202,7 @@
         class="text-gray-500 dark:text-white text-md flex items-center"
         href={`${$currentOrgPath}/quiz`}
       >
-        <ArrowLeftIcon size={24} class="carbon-icon" /> Back to Quizzes
+        <ArrowLeftIcon size={24} class="carbon-icon dark:text-white" /> Back to Quizzes
       </a>
 
       <h3 class="my-3">Quiz</h3>
@@ -239,11 +229,7 @@
       </div>
 
       <div class="w-full flex justify-end">
-        <PrimaryButton
-          label="Add Question"
-          variant={VARIANTS.CONTAINED}
-          onClick={addQuestion}
-        />
+        <PrimaryButton label="Add Question" variant={VARIANTS.CONTAINED} onClick={addQuestion} />
       </div>
     </div>
   </aside>
@@ -261,9 +247,7 @@
 
         {#if isBoolean(currentError.hasOneAnswer) && !currentError.hasOneAnswer}
           <div class="mb-5">
-            <p class="text-red-500">
-              Please select at least one correct answer
-            </p>
+            <p class="text-red-500">Please select at least one correct answer</p>
           </div>
         {/if}