From 198c88f4ace21cf7b6f92ae0374d26b704ab8752 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Fri, 4 Aug 2023 12:41:12 +0100
Subject: [PATCH] Improve dark mode of icons + inputs improvements

---
 .../Apps/components/QandA/index.svelte        | 29 +++++------
 src/lib/components/Apps/index.svelte          |  8 +--
 src/lib/components/Buttons/Close/index.svelte |  4 +-
 .../components/Buttons/Delete/index.svelte    |  2 +-
 src/lib/components/Buttons/Send/index.svelte  |  2 +-
 .../Lesson/Exercise/EditMode.svelte           | 49 ++++++-------------
 .../components/Lesson/Exercise/index.svelte   | 16 +++---
 .../Course/components/Navigation/index.svelte |  8 +--
 .../components/Editor/ReviewFormEditor.svelte | 18 ++-----
 .../components/Editor/ReviewsForm.svelte      | 30 ++++--------
 .../components/Editor/index.svelte            | 33 ++++++-------
 .../Courses/components/Card/index.svelte      | 24 +++------
 src/lib/components/Expandable/index.svelte    | 15 ++----
 src/lib/components/Form/Checkbox.svelte       | 18 ++++---
 src/lib/components/Form/RadioItem.svelte      | 17 ++++---
 src/lib/components/Form/TextArea.svelte       | 31 +++---------
 src/lib/components/Form/TextField.svelte      | 17 ++++---
 src/lib/components/LMS/SideBar.svelte         | 14 ++----
 src/lib/components/Navigation/index.svelte    | 15 ++----
 .../components/Org/Quiz/Play/Preview.svelte   |  4 +-
 .../components/Org/Quiz/QuizQuestion.svelte   |  9 ++--
 src/lib/components/Org/SideBar.svelte         | 33 +++++--------
 src/lib/components/Snackbar/index.svelte      |  8 +--
 src/routes/+page.svelte                       | 22 ++++-----
 src/routes/courses/[id]/lessons/+page.svelte  | 14 +++---
 src/routes/courses/[id]/people/+page.svelte   | 45 +++++------------
 src/routes/dashboard/+page.svelte             |  2 +-
 src/routes/org/[slug]/+page.svelte            |  4 +-
 .../org/[slug]/community/[slug]/+page.svelte  | 42 ++++++----------
 .../org/[slug]/community/ask/+page.svelte     |  6 +--
 .../org/[slug]/quiz/[slug]/+page.svelte       | 42 +++++-----------
 31 files changed, 211 insertions(+), 370 deletions(-)

diff --git a/src/lib/components/Apps/components/QandA/index.svelte b/src/lib/components/Apps/components/QandA/index.svelte
index 3b5abe3c..faffa510 100644
--- a/src/lib/components/Apps/components/QandA/index.svelte
+++ b/src/lib/components/Apps/components/QandA/index.svelte
@@ -16,7 +16,7 @@
       name: 'Evgeniy',
       question: "I'am looking at this and it looks great",
       vote: 1,
-      answered: false,
+      answered: false
     },
     {
       id: 2,
@@ -24,22 +24,22 @@
       question:
         'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
       vote: 4,
-      answered: false,
+      answered: false
     },
     {
       id: 3,
       name: 'Vitalii Marushko',
       question: 'Всем привет',
       vote: 20,
-      answered: false,
+      answered: false
     },
     {
       id: 4,
       name: 'Natasha',
       question: 'Привет Виталий',
       vote: 0,
-      answered: false,
-    },
+      answered: false
+    }
   ];
 
   function handleSend() {
@@ -54,15 +54,15 @@
         name: 'You',
         question,
         vote: 0,
-        answered: false,
-      },
+        answered: false
+      }
     ];
 
     question = null;
 
     setTimeout(() => {
       bodyRef.scrollTo({
-        top: bodyRef.scrollHeight,
+        top: bodyRef.scrollHeight
       });
     }, 100);
   }
@@ -104,22 +104,15 @@
           {@html marked(question.question)}
         </article>
       </div>
-      <button
-        class={`${question.answered && 'active'}`}
-        on:click={handleMarkAnswered(question.id)}
-      >
-        <CheckmarkOutline size={20} class="carbon-icon" />
+      <button class={`${question.answered && 'active'}`} on:click={handleMarkAnswered(question.id)}>
+        <CheckmarkOutline size={20} class="carbon-icon dark:text-white" />
       </button>
     </div>
   {/each}
 </div>
 
 <div class="footer">
-  <TextField
-    placeholder="Say something"
-    bind:value={question}
-    onKeyDown={handleKeyDown}
-  />
+  <TextField placeholder="Say something" bind:value={question} onKeyDown={handleKeyDown} />
 </div>
 
 <style lang="scss">
diff --git a/src/lib/components/Apps/index.svelte b/src/lib/components/Apps/index.svelte
index be704a46..0a8d464b 100644
--- a/src/lib/components/Apps/index.svelte
+++ b/src/lib/components/Apps/index.svelte
@@ -56,7 +56,7 @@
       onClick={handleAppClick}
       selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}
     >
-      <SendAlt size={24} class="carbon-icon" />
+      <SendAlt size={24} class="carbon-icon dark:text-white" />
     </IconButton>
 
     <IconButton
@@ -65,7 +65,7 @@
       onClick={handleAppClick}
       selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}
     >
-      <Forum size={24} class="carbon-icon" />
+      <Forum size={24} class="carbon-icon dark:text-white" />
     </IconButton>
 
     <IconButton
@@ -74,7 +74,7 @@
       onClick={handleAppClick}
       selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}
     >
-      <AlignBoxTopLeft size={24} class="carbon-icon" />
+      <AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
     </IconButton>
 
     <IconButton
@@ -83,7 +83,7 @@
       onClick={handleAppClick}
       selected={APPS_CONSTANTS.APPS.POLL === selectedApp}
     >
-      <ChartPie size={24} class="carbon-icon" />
+      <ChartPie size={24} class="carbon-icon dark:text-white" />
     </IconButton>
   </div>
 
diff --git a/src/lib/components/Buttons/Close/index.svelte b/src/lib/components/Buttons/Close/index.svelte
index 27d45fad..204e6c63 100644
--- a/src/lib/components/Buttons/Close/index.svelte
+++ b/src/lib/components/Buttons/Close/index.svelte
@@ -10,8 +10,8 @@
 
 <IconButton {onClick} {color} {contained} {size}>
   {#if size === 'large'}
-    <CloseIcon size={24} class="carbon-icon" title="Delete" />
+    <CloseIcon size={24} class="carbon-icon dark:text-white" title="Delete" />
   {:else}
-    <CloseIcon size={24} class="carbon-icon" title="Delete" />
+    <CloseIcon size={24} class="carbon-icon dark:text-white" title="Delete" />
   {/if}
 </IconButton>
diff --git a/src/lib/components/Buttons/Delete/index.svelte b/src/lib/components/Buttons/Delete/index.svelte
index df2d9315..527937af 100644
--- a/src/lib/components/Buttons/Delete/index.svelte
+++ b/src/lib/components/Buttons/Delete/index.svelte
@@ -6,5 +6,5 @@
 </script>
 
 <IconButton {onClick}>
-  <Close size={24} class="carbon-icon" title="Close" />
+  <Close size={24} class="carbon-icon dark:text-white" title="Close" />
 </IconButton>
diff --git a/src/lib/components/Buttons/Send/index.svelte b/src/lib/components/Buttons/Send/index.svelte
index 7834f521..de17bade 100644
--- a/src/lib/components/Buttons/Send/index.svelte
+++ b/src/lib/components/Buttons/Send/index.svelte
@@ -6,5 +6,5 @@
 </script>
 
 <IconButton {onClick}>
-  <SendFilled size={24} class="carbon-icon" />
+  <SendFilled size={24} class="carbon-icon dark:text-white" />
 </IconButton>
diff --git a/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte b/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
index bee1bb45..807c1626 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
@@ -8,7 +8,7 @@
     handleRemoveQuestion,
     handleCode,
     handleAnswerSelect,
-    addDynamicValue,
+    addDynamicValue
   } from '../store/exercise';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import AddFilledIcon from 'carbon-icons-svelte/lib/AddFilled.svelte';
@@ -30,10 +30,7 @@
   import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
   import DeleteConfirmationModal from './DeleteConfirmation.svelte';
   import OrderModal from './OrderModal.svelte';
-  import {
-    QUESTION_TYPE,
-    QUESTION_TYPES,
-  } from '$lib/components/Question/constants';
+  import { QUESTION_TYPE, QUESTION_TYPES } from '$lib/components/Question/constants';
   import { filterOutDeleted } from './functions';
   import { deleteExercise } from '$lib/utils/services/courses';
   import { lesson } from '../store/lessons';
@@ -98,9 +95,7 @@
 
     lesson.update((_lesson) => ({
       ..._lesson,
-      exercises: _lesson.exercises.filter(
-        (exercise) => exercise.id !== exerciseId
-      ),
+      exercises: _lesson.exercises.filter((exercise) => exercise.id !== exerciseId)
     }));
 
     shouldDelete = false;
@@ -193,10 +188,7 @@
       <!-- {#key question.id} -->
       <QuestionContainer
         onClose={onInitDeleteClicked(question.id)}
-        scrollToQuestion={shouldScrollToLast(
-          question.id,
-          $questionnaire.questions
-        )}
+        scrollToQuestion={shouldScrollToLast(question.id, $questionnaire.questions)}
         bind:points={question.points}
         hasError={!!errors[question.id]}
         onPointsChange={() => {
@@ -219,7 +211,7 @@
           options={extraActions}
           handleOptionClick={handleOptionClick(question.id)}
         >
-          <AddFilledIcon class="carbon-icon" />
+          <AddFilledIcon class="carbon-icon dark:text-white" />
           <p class="dark:text-white ml-2 text-gray-600">Add</p>
         </Dropdown> -->
 
@@ -234,16 +226,9 @@
 
         {#if typeof question.code === 'string'}
           <div class="flex justify-between items-center my-3 w-3/5">
-            <TextArea
-              bind:value={question.code}
-              rows="2"
-              placeholder="Write your code"
-            />
-            <IconButton
-              value="write-code"
-              onClick={() => handleCode(question.id, false)}
-            >
-              <TrashCanIcon size={24} class="carbon-icon" />
+            <TextArea bind:value={question.code} rows="2" placeholder="Write your code" />
+            <IconButton value="write-code" onClick={() => handleCode(question.id, false)}>
+              <TrashCanIcon size={24} class="carbon-icon dark:text-white" />
             </IconButton>
           </div>
         {/if}
@@ -262,7 +247,7 @@
                     value={option.id}
                     onClick={handleRemoveOption(question.id, option.id)}
                   >
-                    <TrashCanIcon size={24} class="carbon-icon" />
+                    <TrashCanIcon size={24} class="carbon-icon dark:text-white" />
                   </IconButton>
                   <IconButton
                     value={option.id}
@@ -270,9 +255,9 @@
                     buttonClassName={option.is_correct && 'success'}
                   >
                     {#if option.is_correct}
-                      <CheckmarkFilledIcon size={24} class="carbon-icon" />
+                      <CheckmarkFilledIcon size={24} class="carbon-icon dark:text-white" />
                     {:else}
-                      <CheckmarkOutlineIcon size={24} class="carbon-icon" />
+                      <CheckmarkOutlineIcon size={24} class="carbon-icon dark:text-white" />
                     {/if}
                   </IconButton>
                 </div>
@@ -293,7 +278,7 @@
                     value={option.id}
                     onClick={handleRemoveOption(question.id, option.id)}
                   >
-                    <TrashCanIcon size={24} class="carbon-icon" />
+                    <TrashCanIcon size={24} class="carbon-icon dark:text-white" />
                   </IconButton>
                   <IconButton
                     value={option.id}
@@ -301,9 +286,9 @@
                     buttonClassName={option.is_correct && 'success'}
                   >
                     {#if option.is_correct}
-                      <CheckmarkFilledIcon size={24} class="carbon-icon" />
+                      <CheckmarkFilledIcon size={24} class="carbon-icon dark:text-white" />
                     {:else}
-                      <CheckmarkOutlineIcon size={24} class="carbon-icon" />
+                      <CheckmarkOutlineIcon size={24} class="carbon-icon dark:text-white" />
                     {/if}
                   </IconButton>
                 </div>
@@ -316,9 +301,7 @@
           {/if}
 
           {#if getQuestionErrorMsg(errors, question, 'option')}
-            <ErrorMessage
-              message={getQuestionErrorMsg(errors, question, 'option')}
-            />
+            <ErrorMessage message={getQuestionErrorMsg(errors, question, 'option')} />
           {/if}
         </div>
 
@@ -330,7 +313,7 @@
               variant={VARIANTS.OUTLINED}
               onClick={handleAddOption(question.id)}
             >
-              <AddFilledIcon size={24} class="carbon-icon" />
+              <AddFilledIcon size={24} class="carbon-icon dark:text-white" />
               <p class="dark:text-white ml-2">Add option</p>
             </PrimaryButton>
           </div>
diff --git a/src/lib/components/Course/components/Lesson/Exercise/index.svelte b/src/lib/components/Course/components/Lesson/Exercise/index.svelte
index f4fc6ddc..4e6c5fa5 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/index.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/index.svelte
@@ -10,7 +10,7 @@
     questionnaire,
     validateQuestionnaire,
     reset,
-    questionnaireOrder,
+    questionnaireOrder
   } from '../store/exercise';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
@@ -47,7 +47,7 @@
         ...q,
         is_title_dirty: false,
         is_description_dirty: false,
-        questions: updatedQuestions,
+        questions: updatedQuestions
       }));
     } else {
       mode = MODES.edit;
@@ -95,9 +95,9 @@
           contained={true}
         >
           {#if preview}
-            <ViewFilledIcon size={32} class="carbon-icon" />
+            <ViewFilledIcon size={32} class="carbon-icon dark:text-white" />
           {:else}
-            <ViewIcon size={32} class="carbon-icon" />
+            <ViewIcon size={32} class="carbon-icon dark:text-white" />
           {/if}
         </IconButton>
       {/if}
@@ -109,26 +109,26 @@
           onClick={handleAddQuestion}
           toolTipProps={{ title: 'Add question', direction: 'bottom' }}
         >
-          <AddAltIcon size={32} class="carbon-icon" />
+          <AddAltIcon size={32} class="carbon-icon dark:text-white" />
         </IconButton>
         <IconButton
           onClick={() => ($questionnaireOrder.open = true)}
           toolTipProps={{ title: 'Order questionnaire', direction: 'bottom' }}
         >
-          <TableIcon size={32} class="carbon-icon" />
+          <TableIcon size={32} class="carbon-icon dark:text-white" />
         </IconButton>
         <IconButton
           onClick={() => (editDescription = true)}
           toolTipProps={{ title: 'Edit description', direction: 'bottom' }}
         >
-          <SettingsIcon size={32} class="carbon-icon" />
+          <SettingsIcon size={32} class="carbon-icon dark:text-white" />
         </IconButton>
 
         <!-- <IconButton
           onClick={handleDeleteExercise}
           toolTipProps={{ title: 'Delete questionnaire', direction: 'bottom' }}
         >
-          <Delete32 class="carbon-icon" />
+          <Delete32 class="carbon-icon dark:text-white" />
         </IconButton> -->
       </div>
     {/if}
diff --git a/src/lib/components/Course/components/Navigation/index.svelte b/src/lib/components/Course/components/Navigation/index.svelte
index 33a25a1f..87300f58 100644
--- a/src/lib/components/Course/components/Navigation/index.svelte
+++ b/src/lib/components/Course/components/Navigation/index.svelte
@@ -155,7 +155,7 @@
         <slot:fragment slot="widget">
           <RoleBasedSecurity allowedRoles={[1, 2]}>
             <IconButton onClick={() => ($settingsDialog.open = !$settingsDialog.open)}>
-              <SettingsIcon size={20} class="carbon-icon" />
+              <SettingsIcon size={20} class="carbon-icon dark:text-white" />
             </IconButton>
           </RoleBasedSecurity>
         </slot:fragment>
@@ -198,11 +198,11 @@
                       <span>{item.title}</span>
                       {#if !item.is_unlocked}
                         <span class="text-md ml-2">
-                          <LockedIcon class="carbon-icon" />
+                          <LockedIcon class="carbon-icon dark:text-white" />
                         </span>
                       {:else if item.is_complete}
                         <span class="ml-2">
-                          <CheckmarkFilled class="carbon-icon" />
+                          <CheckmarkFilled class="carbon-icon dark:text-white" />
                         </span>
                       {/if}
                     </div>
@@ -220,7 +220,7 @@
           onClick={() => goto(`${$currentOrgPath}/courses`)}
           buttonClassName="mx-3"
         >
-          <HomeIcon size={32} class="carbon-icon" />
+          <HomeIcon size={32} class="carbon-icon dark:text-white" />
         </IconButton>
         <a class="block mx-3" href={`/profile/${$profile.id}`}>
           <Avatar src={$profile.avatar_url} name={$profile.username} />
diff --git a/src/lib/components/CourseLandingPage/components/Editor/ReviewFormEditor.svelte b/src/lib/components/CourseLandingPage/components/Editor/ReviewFormEditor.svelte
index 0463c51f..30e3d2d5 100644
--- a/src/lib/components/CourseLandingPage/components/Editor/ReviewFormEditor.svelte
+++ b/src/lib/components/CourseLandingPage/components/Editor/ReviewFormEditor.svelte
@@ -80,21 +80,11 @@
   </div>
 
   <div class="mt-8 flex justify-between items-center w-full">
-    <IconButton
-      contained={true}
-      value="delete"
-      onClick={deleteReviewData}
-      size="large"
-    >
-      <TrashCanIcon size={24} class="carbon-icon" />
+    <IconButton contained={true} value="delete" onClick={deleteReviewData} size="large">
+      <TrashCanIcon size={24} class="carbon-icon dark:text-white" />
     </IconButton>
-    <IconButton
-      contained={true}
-      value="save"
-      onClick={() => onExpand(review.id)}
-      size="large"
-    >
-      <SaveIcon size={24} class="carbon-icon" />
+    <IconButton contained={true} value="save" onClick={() => onExpand(review.id)} size="large">
+      <SaveIcon size={24} class="carbon-icon dark:text-white" />
     </IconButton>
   </div>
 </div>
diff --git a/src/lib/components/CourseLandingPage/components/Editor/ReviewsForm.svelte b/src/lib/components/CourseLandingPage/components/Editor/ReviewsForm.svelte
index 740b363b..61a3d5a6 100644
--- a/src/lib/components/CourseLandingPage/components/Editor/ReviewsForm.svelte
+++ b/src/lib/components/CourseLandingPage/components/Editor/ReviewsForm.svelte
@@ -34,7 +34,7 @@
       avatar_url: '',
       rating: 1,
       created_at: new Date().getTime(),
-      description: '',
+      description: ''
     };
     reviews = [...reviews, _review];
     reviewToExpand = _review.id;
@@ -45,26 +45,26 @@
     const reviewSchema = z.object({
       name: z.string().min(5, {
         message: 'Name is too short, min of 5 character',
-        invalid_type_error: 'Must not be empty',
+        invalid_type_error: 'Must not be empty'
       }),
       avatar_url: z.string().min(6, {
         message: 'Upload an image',
-        invalid_type_error: 'Must not be empty',
+        invalid_type_error: 'Must not be empty'
       }),
       rating: z
         .number()
         .min(1, {
           message: 'Rating must be from 1-5',
-          invalid_type_error: 'Must not be empty',
+          invalid_type_error: 'Must not be empty'
         })
         .max(5, {
           message: 'Rating must be from 1-5',
-          invalid_type_error: 'Must not be empty',
+          invalid_type_error: 'Must not be empty'
         }),
       description: z.string().min(10, {
         message: 'Description is too short, min of 5 character',
-        invalid_type_error: 'Must not be empty',
-      }),
+        invalid_type_error: 'Must not be empty'
+      })
     });
 
     const { error } = reviewSchema.safeParse(review);
@@ -104,11 +104,7 @@
         {#if review.id !== reviewToExpand}
           <!-- the headers -->
           <div class="flex w-full justify-between items-center">
-            <Avatar
-              src={review.avatar_url}
-              name={review.name}
-              className="mt-1"
-            />
+            <Avatar src={review.avatar_url} name={review.name} className="mt-1" />
             <p class="text-sm">{review.name}</p>
 
             <IconButton
@@ -116,19 +112,13 @@
               onClick={() => onExpand(review.id)}
               size={$isMobile ? 'large' : 'small'}
             >
-              <ChevronDownIcon size={16} class="carbon-icon" />
+              <ChevronDownIcon size={16} class="carbon-icon dark:text-white" />
             </IconButton>
           </div>
         {/if}
         <!-- the body -->
         {#if review.id === reviewToExpand}
-          <ReviewFormEditor
-            bind:reviews
-            bind:review
-            {errors}
-            courseId={course.id}
-            {onExpand}
-          />
+          <ReviewFormEditor bind:reviews bind:review {errors} courseId={course.id} {onExpand} />
         {/if}
       </div>
     {/each}
diff --git a/src/lib/components/CourseLandingPage/components/Editor/index.svelte b/src/lib/components/CourseLandingPage/components/Editor/index.svelte
index a901ef3d..4d10a5e8 100644
--- a/src/lib/components/CourseLandingPage/components/Editor/index.svelte
+++ b/src/lib/components/CourseLandingPage/components/Editor/index.svelte
@@ -28,32 +28,32 @@
   const sections = [
     {
       key: 1,
-      title: 'Header',
+      title: 'Header'
     },
     {
       key: 2,
-      title: 'Requirement',
+      title: 'Requirement'
     },
     {
       key: 3,
-      title: 'Description',
+      title: 'Description'
     },
     {
       key: 4,
-      title: 'Goals',
+      title: 'Goals'
     },
     {
       key: 5,
-      title: 'Reviews',
+      title: 'Reviews'
     },
     {
       key: 6,
-      title: 'Instructor',
+      title: 'Instructor'
     },
     {
       key: 7,
-      title: 'Pricing',
-    },
+      title: 'Pricing'
+    }
   ];
   let selectedSection = null;
 
@@ -75,7 +75,7 @@
         if (sectionEl) {
           sectionEl.scrollIntoView({
             behavior: 'smooth',
-            block: 'start',
+            block: 'start'
           });
         }
       }
@@ -91,7 +91,7 @@
       attendance: undefined,
       group: undefined,
       lessons: undefined,
-      slug: course.slug,
+      slug: course.slug
     });
     loading = false;
 
@@ -109,7 +109,7 @@
   async function handlePublish() {
     loading = true;
     await updateCourse(courseId, undefined, {
-      is_published: true,
+      is_published: true
     });
     loading = false;
   }
@@ -129,14 +129,9 @@
           onClick={handleSave}
           isLoading={loading}
         />
-        <PrimaryButton
-          label="Publish"
-          type="button"
-          onClick={handlePublish}
-          isDisabled={loading}
-        />
+        <PrimaryButton label="Publish" type="button" onClick={handlePublish} isDisabled={loading} />
         <IconButton onClick={handlePreview} disabled={loading || !course.slug}>
-          <ArrowUpRightIcon size={24} class="carbon-icon" title="Preview" />
+          <ArrowUpRightIcon size={24} class="carbon-icon dark:text-white" title="Preview" />
         </IconButton>
       </div>
     </div>
@@ -156,7 +151,7 @@
     <!-- Title -->
     <div class="flex items-center {borderBottomGrey} w-full">
       <IconButton onClick={handleClose}>
-        <ArrowLeftIcon size={24} class="carbon-icon" title="Go back" />
+        <ArrowLeftIcon size={24} class="carbon-icon dark:text-white" title="Go back" />
       </IconButton>
       <h3 class="dark:text-white">{selectedSection.title}</h3>
     </div>
diff --git a/src/lib/components/Courses/components/Card/index.svelte b/src/lib/components/Courses/components/Card/index.svelte
index c12771fb..cd3e7cc2 100644
--- a/src/lib/components/Courses/components/Card/index.svelte
+++ b/src/lib/components/Courses/components/Card/index.svelte
@@ -33,8 +33,8 @@
             $copyCourseModal.open = true;
             $copyCourseModal.title = `Copy of ${title}`;
           })();
-        },
-      },
+        }
+      }
       // {
       //   label: 'Delete',
       //   onClick() {
@@ -45,22 +45,14 @@
   }
 </script>
 
-<a
-  rel="prefetch"
-  href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`}
-  class=" text-black"
->
+<a rel="prefetch" href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`} class=" text-black">
   <div
     class="root w-80 border bg-gray-100 dark:bg-gray-700 sm:mr-4 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative"
   >
     {#if !isOnLandingPage}
-      <Dropdown
-        options={getOptions()}
-        classNames="absolute top-4 right-4"
-        isIcon={true}
-      >
+      <Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}>
         <div class="p-1 rounded-full bg-white dark:bg-gray-600">
-          <OverflowMenuHorizontalIcon size={20} class="carbon-icon" />
+          <OverflowMenuHorizontalIcon size={20} class="carbon-icon dark:text-white" />
         </div>
       </Dropdown>
     {/if}
@@ -85,11 +77,7 @@
         {#if isOnLandingPage}
           <ArrowRight size={24} class="carbon-class" />
         {:else}
-          <div
-            class="rounded dark:text-white bg-{isPublished
-              ? 'green'
-              : 'red'}-200 py-1 px-2"
-          >
+          <div class="rounded dark:text-white bg-{isPublished ? 'green' : 'red'}-200 py-1 px-2">
             {#if isPublished}
               Published
             {:else}
diff --git a/src/lib/components/Expandable/index.svelte b/src/lib/components/Expandable/index.svelte
index c35ca983..cefcee0e 100644
--- a/src/lib/components/Expandable/index.svelte
+++ b/src/lib/components/Expandable/index.svelte
@@ -22,8 +22,7 @@
 
 <div {id} class="w-full bg-white dark:bg-gray-800 {rootClass}">
   <div
-    class="w-full relative flex items-center justify-between {!disableContainerPadding &&
-      'p-5'}"
+    class="w-full relative flex items-center justify-between {!disableContainerPadding && 'p-5'}"
     role="button"
     tabindex="0"
     on:click={handleClick}
@@ -31,20 +30,16 @@
     <p class="dark:text-white font-bold flex items-center {titleClass}">
       {title}
       {#if supportsLink}
-        <a
-          class="ml-2"
-          href="{$page.url.pathname}#{id}"
-          on:click={(e) => e.stopPropagation()}
-        >
-          <LinkIcon size={24} class="carbon-icon" />
+        <a class="ml-2" href="{$page.url.pathname}#{id}" on:click={(e) => e.stopPropagation()}>
+          <LinkIcon size={24} class="carbon-icon dark:text-white" />
         </a>
       {/if}
     </p>
 
     {#if isExpanded}
-      <ChevronUpIcon size={24} class="carbon-icon" />
+      <ChevronUpIcon size={24} class="carbon-icon dark:text-white" />
     {:else}
-      <ChevronDownIcon size={24} class="carbon-icon" />
+      <ChevronDownIcon size={24} class="carbon-icon dark:text-white" />
     {/if}
   </div>
   {#if isExpanded}
diff --git a/src/lib/components/Form/Checkbox.svelte b/src/lib/components/Form/Checkbox.svelte
index 917765a2..71642ca1 100644
--- a/src/lib/components/Form/Checkbox.svelte
+++ b/src/lib/components/Form/Checkbox.svelte
@@ -1,4 +1,6 @@
 <script>
+  import TextField from '$lib/components/Form/TextField.svelte';
+
   export let label;
   export let value;
   export let checked;
@@ -23,13 +25,15 @@
     bind:checked
   />
   {#if isEditable}
-    <input
-      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 dark:bg-gray-700 border-t-0 border-l-0 border-r-0 border-b-1"
-      type="text"
-      placeholder="Your option"
-      bind:value={label}
-      on:change={onChange}
-    />
+    <div class="w-2/4">
+      <TextField
+        bind:value={label}
+        placeholder="Your option"
+        className="ml-1"
+        type="text"
+        {onChange}
+      />
+    </div>
   {:else}
     <span class="dark:text-white ml-2">{label}</span>
   {/if}
diff --git a/src/lib/components/Form/RadioItem.svelte b/src/lib/components/Form/RadioItem.svelte
index 2ccb8d1e..3f1ac456 100644
--- a/src/lib/components/Form/RadioItem.svelte
+++ b/src/lib/components/Form/RadioItem.svelte
@@ -1,4 +1,5 @@
 <script>
+  import TextField from '$lib/components/Form/TextField.svelte';
   export let label = '';
   export let value = '';
   export let checked = false;
@@ -23,13 +24,15 @@
     disabled={disabled || isEditable}
   />
   {#if isEditable}
-    <input
-      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 dark:bg-gray-700 border-t-0 border-l-0 border-r-0 border-b-1"
-      type="text"
-      placeholder="Your option"
-      bind:value={label}
-      on:change={onChange}
-    />
+    <div class="w-2/4">
+      <TextField
+        bind:value={label}
+        placeholder="Your option"
+        className="ml-1"
+        type="text"
+        {onChange}
+      />
+    </div>
   {:else}
     <span class="dark:text-white ml-2">{label}</span>
   {/if}
diff --git a/src/lib/components/Form/TextArea.svelte b/src/lib/components/Form/TextArea.svelte
index 953cec4d..63a8552a 100644
--- a/src/lib/components/Form/TextArea.svelte
+++ b/src/lib/components/Form/TextArea.svelte
@@ -6,7 +6,7 @@
   export let maxRows = 3;
   export let className = '';
   export let labelClassName = '';
-  export let bgColor = 'bg-gray-200 dark:bg-gray-500';
+  export let bgColor = 'bg-gray-50 focus:bg-blue-50 dark:bg-white';
   export let helperMessage = '';
   export let errorMessage = '';
   export let isRequired = false;
@@ -18,7 +18,7 @@
 
 <label class="block w-full relative {className}">
   {#if label}
-    <p for="text-field" class="dark:text-white {labelClassName}">
+    <p for="text-field" class="dark:text-white text-left {labelClassName}">
       {label}
 
       {#if isRequired}
@@ -38,10 +38,8 @@
     {placeholder}
     bind:value
     required={isRequired}
-    class="form-textarea mt-1 block w-full
-    {bgColor} border-t-0 border-l-0 border-r-0 border-b-1 {!!errorMessage
-      ? 'border-red-500'
-      : 'border-gray-300'}"
+    class="form-textarea border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-blue-600 mt-1 block w-full
+    {bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
     on:change={onChange}
   />
   {#if !!errorMessage}
@@ -57,24 +55,7 @@
 </label>
 
 <style>
-  /* pre,
-  textarea {
-    font-family: inherit;
-    padding: 0.5em;
-    box-sizing: border-box;
-    border: 1px solid #eee;
-    line-height: 1.2;
-    overflow: hidden;
-  } */
-
-  /* textarea {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    resize: none;
+  .form-textarea {
+    box-shadow: none !important;
   }
-  textarea.has-label {
-    top: 30px;
-  } */
 </style>
diff --git a/src/lib/components/Form/TextField.svelte b/src/lib/components/Form/TextField.svelte
index e0361932..8a3cec06 100644
--- a/src/lib/components/Form/TextField.svelte
+++ b/src/lib/components/Form/TextField.svelte
@@ -11,7 +11,7 @@
   export let className = '';
   export let inputClassName = '';
   export let labelClassName = '';
-  export let bgColor = 'bg-gray-200';
+  export let bgColor = 'bg-gray-50 focus:bg-blue-50 dark:bg-white';
   export let type = 'text';
   export let isPassword = false;
   export let autoFocus = false;
@@ -27,6 +27,7 @@
 
   let ref;
   let fieldNode;
+  let focusClass = '';
 
   function typeAction(node) {
     node.type = type;
@@ -56,21 +57,18 @@
 
 <label class="block relative {className}">
   {#if label}
-    <label
-      for="text-field"
-      class="dark:text-white m-0 font-light {labelClassName}"
-    >
+    <p for="text-field" class="text-sm dark:text-white text-left m-0 font-light {labelClassName}">
       {label}
 
       {#if isRequired}
         <span class="text-red-700">*</span>
       {/if}
-    </label>
+    </p>
   {/if}
   <input
     use:typeAction
-    class="form-input {inputClassName} dark:text-black p-3 mt-1 block w-full border-none {bgColor} {errorMessage
-      ? 'border-red-500'
+    class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-blue-600 {inputClassName} {focusClass} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
+      ? 'border-red-600'
       : ''}"
     on:keydown={onKeyDown}
     on:change={onInputChange}
@@ -102,6 +100,9 @@
 </label>
 
 <style>
+  .form-input {
+    box-shadow: none !important;
+  }
   .password-eye {
     position: absolute;
     top: 23px;
diff --git a/src/lib/components/LMS/SideBar.svelte b/src/lib/components/LMS/SideBar.svelte
index f02f6b01..1a129e59 100644
--- a/src/lib/components/LMS/SideBar.svelte
+++ b/src/lib/components/LMS/SideBar.svelte
@@ -37,10 +37,7 @@
           height="h-7"
         />
       {:else}
-        <TextChip
-          value={$currentOrg.shortName}
-          className="bg-blue-200 font-bold"
-        />
+        <TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
       {/if}
 
       <OrgSelector />
@@ -87,7 +84,7 @@
         <li
           class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500"
         >
-          <HelpIcon size={20} class="carbon-icon" />
+          <HelpIcon size={20} class="carbon-icon dark:text-white" />
           <p class="dark:text-white ml-2">Help</p>
         </li>
       </a>
@@ -98,12 +95,7 @@
             `/lms/settings`
           ) && activeClass}"
         >
-          <Avatar
-            src={$profile.avatar_url}
-            name={$profile.username}
-            width="w-7"
-            height="h-7"
-          />
+          <Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" />
           <p class="dark:text-white ml-2">Settings</p>
         </li>
       </a>
diff --git a/src/lib/components/Navigation/index.svelte b/src/lib/components/Navigation/index.svelte
index 1c872797..3e5ff239 100644
--- a/src/lib/components/Navigation/index.svelte
+++ b/src/lib/components/Navigation/index.svelte
@@ -13,9 +13,7 @@
 
   let navClass = '';
 
-  const redirect = isCoursePage($page.url.pathname)
-    ? `?redirect=${$page.url.pathname}`
-    : '';
+  const redirect = isCoursePage($page.url.pathname) ? `?redirect=${$page.url.pathname}` : '';
 
   $: navClass = '';
 </script>
@@ -25,12 +23,7 @@
 >
   <ul class="flex w-full items-center">
     <div class="logo">
-      <a
-        href="/"
-        title={`Go to ${orgName || 'ClassroomIO'} Home`}
-        id="logo"
-        data-hveid="8"
-      >
+      <a href="/" title={`Go to ${orgName || 'ClassroomIO'} Home`} id="logo" data-hveid="8">
         <img
           src={logo || '/logo-192.png'}
           alt={`${orgName || 'ClassroomIO'} logo`}
@@ -107,8 +100,8 @@
           data-file-width="25"
           data-file-height="25"
         />
-        <span><SendAlt32 class="carbon-icon" /> Канал</span>
-        <SendAlt32 class="carbon-icon" />
+        <span><SendAlt32 class="carbon-icon dark:text-white" /> Канал</span>
+        <SendAlt32 class="carbon-icon dark:text-white" />
         <span>Канал</span>
       </a>
     </li> -->
diff --git a/src/lib/components/Org/Quiz/Play/Preview.svelte b/src/lib/components/Org/Quiz/Play/Preview.svelte
index ced07447..2fccd548 100644
--- a/src/lib/components/Org/Quiz/Play/Preview.svelte
+++ b/src/lib/components/Org/Quiz/Play/Preview.svelte
@@ -80,11 +80,11 @@
 
             <div class="flex justify-center items-center">
               <IconButton onClick={handlePrev} size="small">
-                <ChevronLeftIcon size={16} class="carbon-icon" />
+                <ChevronLeftIcon size={16} class="carbon-icon dark:text-white" />
               </IconButton>
               <p class="mx-3">{curQId + 1} / {totalQ}</p>
               <IconButton onClick={handleNext} size="small">
-                <ChevronRightIcon size={16} class="carbon-icon" />
+                <ChevronRightIcon size={16} class="carbon-icon dark:text-white" />
               </IconButton>
             </div>
           {/if}
diff --git a/src/lib/components/Org/Quiz/QuizQuestion.svelte b/src/lib/components/Org/Quiz/QuizQuestion.svelte
index 4b794781..4dc24d48 100644
--- a/src/lib/components/Org/Quiz/QuizQuestion.svelte
+++ b/src/lib/components/Org/Quiz/QuizQuestion.svelte
@@ -6,7 +6,7 @@
   import IconButton from '$lib/components/IconButton/index.svelte';
 
   export let currentQuestion = {
-    label: '',
+    label: ''
   };
   export let currentError = {};
   export let optionHasError = () => false;
@@ -41,8 +41,7 @@
           bgColor="bg-white"
           className="mt-3"
           isDisabled={currentQuestion.type === 'boolean'}
-          errorMessage={optionHasError(option.id, currentError.options) &&
-            'Please enter a label'}
+          errorMessage={optionHasError(option.id, currentError.options) && 'Please enter a label'}
         />
         <div class="flex justify-end absolute top-2 right-2">
           <IconButton
@@ -51,9 +50,9 @@
             buttonClassName={option.isCorrect && 'success'}
           >
             {#if option.isCorrect}
-              <CheckmarkFilledIcon size={24} class="carbon-icon" />
+              <CheckmarkFilledIcon size={24} class="carbon-icon dark:text-white" />
             {:else}
-              <CheckmarkOutlineIcon size={24} class="carbon-icon" />
+              <CheckmarkOutlineIcon size={24} class="carbon-icon dark:text-white" />
             {/if}
           </IconButton>
         </div>
diff --git a/src/lib/components/Org/SideBar.svelte b/src/lib/components/Org/SideBar.svelte
index e2d1c991..ba9d082f 100644
--- a/src/lib/components/Org/SideBar.svelte
+++ b/src/lib/components/Org/SideBar.svelte
@@ -19,19 +19,19 @@
   const menuItems = [
     {
       path: '',
-      label: 'Home',
+      label: 'Home'
     },
     {
       path: '/quiz',
-      label: 'Quizzes',
+      label: 'Quizzes'
     },
     {
       path: '/courses',
-      label: 'Courses',
+      label: 'Courses'
     },
     {
       path: '/community',
-      label: 'Community',
+      label: 'Community'
     },
     // {
     //   path: '/site',
@@ -39,8 +39,8 @@
     // },
     {
       path: '/audience',
-      label: 'Audience',
-    },
+      label: 'Audience'
+    }
   ];
 
   function isActive(pagePath, itemPath) {
@@ -67,20 +67,14 @@
           height="h-7"
         />
       {:else if $currentOrg.shortName}
-        <TextChip
-          value={$currentOrg.shortName}
-          className="bg-blue-200 font-bold"
-        />
+        <TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
       {/if}
 
       <OrgSelector />
 
       <ul class="my-5">
         {#each menuItems as menuItem}
-          <a
-            href="{$currentOrgPath}{menuItem.path}"
-            class="text-black no-underline"
-          >
+          <a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
             <li
               class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
                 $page.url.pathname,
@@ -94,7 +88,7 @@
               {:else if menuItem.path === '/site'}
                 <SiteSettingsIcon />
               {:else if menuItem.path === '/community'}
-                <ForumIcon size={20} class="carbon-icon" />
+                <ForumIcon size={20} class="carbon-icon dark:text-white" />
               {:else if menuItem.path === '/quiz'}
                 <QuizIcon />
               {:else if menuItem.path === '/audience'}
@@ -112,7 +106,7 @@
         <li
           class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500"
         >
-          <HelpIcon size={20} class="carbon-icon" />
+          <HelpIcon size={20} class="carbon-icon dark:text-white" />
           <p class="dark:text-white ml-2">Help</p>
         </li>
       </a>
@@ -123,12 +117,7 @@
             `${$currentOrgPath}/settings`
           ) && activeClass}"
         >
-          <Avatar
-            src={$profile.avatar_url}
-            name={$profile.username}
-            width="w-7"
-            height="h-7"
-          />
+          <Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" />
           <p class="dark:text-white ml-2">Settings</p>
         </li>
       </a>
diff --git a/src/lib/components/Snackbar/index.svelte b/src/lib/components/Snackbar/index.svelte
index 7d2c2deb..f367de44 100644
--- a/src/lib/components/Snackbar/index.svelte
+++ b/src/lib/components/Snackbar/index.svelte
@@ -18,7 +18,7 @@
 
     snackbarStore.update((_s) => ({
       ..._s,
-      ...snackbarStoreInitialState,
+      ...snackbarStoreInitialState
     }));
     clearTimeout(timeoutId);
     timeoutId = null;
@@ -50,11 +50,11 @@
     >
       <div class="flex items-center">
         {#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
-          <CheckmarkOutline24 size={24} class="carbon-icon" />
+          <CheckmarkOutline24 size={24} class="carbon-icon dark:text-white" />
         {:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
-          <WarningIcon size={24} class="carbon-icon" />
+          <WarningIcon size={24} class="carbon-icon dark:text-white" />
         {:else}
-          <InformationIcon size={24} class="carbon-icon" />
+          <InformationIcon size={24} class="carbon-icon dark:text-white" />
         {/if}
         <p class="dark:text-white ml-2 text-lg">{$snackbarStore.message}</p>
       </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 44a5bc99..e63463ac 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/src/routes/courses/[id]/lessons/+page.svelte b/src/routes/courses/[id]/lessons/+page.svelte
index 556404cc..f958e345 100644
--- a/src/routes/courses/[id]/lessons/+page.svelte
+++ b/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>
diff --git a/src/routes/courses/[id]/people/+page.svelte b/src/routes/courses/[id]/people/+page.svelte
index 70179d4a..3081260d 100644
--- a/src/routes/courses/[id]/people/+page.svelte
+++ b/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>
diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
index a86d55fc..6af22280 100644
--- a/src/routes/dashboard/+page.svelte
+++ b/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>
diff --git a/src/routes/org/[slug]/+page.svelte b/src/routes/org/[slug]/+page.svelte
index c659637c..a4d52668 100644
--- a/src/routes/org/[slug]/+page.svelte
+++ b/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">
diff --git a/src/routes/org/[slug]/community/[slug]/+page.svelte b/src/routes/org/[slug]/community/[slug]/+page.svelte
index 83a18e65..69bfe774 100644
--- a/src/routes/org/[slug]/community/[slug]/+page.svelte
+++ b/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>
diff --git a/src/routes/org/[slug]/community/ask/+page.svelte b/src/routes/org/[slug]/community/ask/+page.svelte
index 2ca682c3..9da5e23c 100644
--- a/src/routes/org/[slug]/community/ask/+page.svelte
+++ b/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>
diff --git a/src/routes/org/[slug]/quiz/[slug]/+page.svelte b/src/routes/org/[slug]/quiz/[slug]/+page.svelte
index a95e57d0..70b37096 100644
--- a/src/routes/org/[slug]/quiz/[slug]/+page.svelte
+++ b/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}