Improve dark mode of icons + inputs improvements

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>

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}

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>