Improve dark mode of icons + inputs improvements

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}

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>

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>