Improve dark mode of icons + inputs improvements

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}