Improve dark mode of icons + inputs improvements

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>

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}

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} />