chore: reduce question title size

apps/dashboard/src/lib/components/Form/Checkbox.svelte

@@ -1,14 +1,14 @@
 <script>
   import TextField from '$lib/components/Form/TextField.svelte';
 
-  export let label;
+  export let label = '';
-  export let value;
+  export let value = '';
-  export let checked;
+  export let checked = false;
-  export let name;
+  export let name = '';
   export let isEditable = false;
   export let disabled = false;
   export let className = '';
-  export let onChange;
+  export let onChange = () => {};
 </script>
 
 <label

apps/dashboard/src/lib/components/HTMLRender/HTMLRender.svelte

@@ -2,9 +2,14 @@
   export let content = '';
   export let className = '';
   export let id = '';
+  export let disableMaxWidth = false;
 </script>
 
-<article {id} class="preview prose prose-sm sm:prose {className} dark:text-white">
+<article
+  style:max-width={disableMaxWidth ? 'unset' : undefined}
+  {id}
+  class="preview prose prose-sm sm:prose {className} dark:text-white"
+>
   {#if $$slots.content}
     <slot name="content" />
   {:else}

apps/dashboard/src/lib/components/PrimaryButton/index.svelte

@@ -5,7 +5,7 @@
 
   export let label = '';
   export let className = '';
-  export let onClick = () => {};
+  export let onClick = (e?: Event) => {};
   export let name = '';
   export let type: 'button' | 'submit' | 'reset' | null | undefined = 'button';
   export let variant = VARIANTS.CONTAINED;

apps/dashboard/src/lib/components/Question/CheckboxQuestion/index.svelte

@@ -7,22 +7,24 @@
   import Grade from '$lib/components/Question/Grade.svelte';
   import { t } from '$lib/utils/functions/translations';
   import ReasonBox from '../ReasonBox.svelte';
-  import { course } from '$lib/components/Course/store';
+  import QuestionTitle from '../QuestionTitle.svelte';
-  import { COURSE_TYPE } from '$lib/utils/types';
 
   export let title = '';
   export let index = 1;
   export let code;
   export let name = '';
-  export let options = [];
+  export let options: { value: string; label: string }[] = [];
-  export let onSubmit = () => {};
+  export let onSubmit = (a: string, b: string[]) => {};
   export let onPrevious = () => {};
-  export let defaultValue = [];
+  export let defaultValue: string[] = [];
   export let disablePreviousButton = false;
   export let isLast = false;
   export let disabled = false;
   export let isPreview = false;
-  export let nextButtonProps = {};
+  export let nextButtonProps = {
+    isDisabled: false,
+    isActive: false
+  };
   export let grade: number | undefined;
   export let gradeMax = 0;
   export let disableGrading = false;
@@ -34,7 +36,7 @@
   let gradeWithAI = false;
 
   function getVal(form, name) {
-    let values = [];
+    let values: string[] = [];
     const checkboxEl = form.elements[name];
 
     for (let i = 0, len = checkboxEl.length; i < len; i++) {
@@ -77,21 +79,15 @@
     gradeWithAI = false;
     grade = 0;
   }
-  $: {
+
-    gradeWithAI = isGradeWithAI;
+  $: gradeWithAI = isGradeWithAI;
-  }
 </script>
 
 <form on:submit|preventDefault={handleFormSubmit}>
   <div class="flex items-center justify-between">
-    <HtmlRender className="mt-4">
+    <HtmlRender className="mt-4 {typeof grade === 'number' && 'w-4/5'}" disableMaxWidth>
       <svelte:fragment slot="content">
-        <span class={`${typeof grade === 'number' ? 'w-3/4' : ''} flex gap-1`}>
+        <QuestionTitle {index} {title} />
-          <h3>{index}</h3>
-          <h3>
-            {title}
-          </h3>
-        </span>
       </svelte:fragment>
     </HtmlRender>
     {#if !hideGrading}

apps/dashboard/src/lib/components/Question/QuestionTitle.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let index: number;
+  export let title: string;
+</script>
+
+<span class="flex gap-2">
+  <p class="text-md font-medium">{index}</p>
+  <p class="text-md font-medium">{title}</p>
+</span>

apps/dashboard/src/lib/components/Question/RadioQuestion/index.svelte

@@ -7,26 +7,27 @@
   import Grade from '$lib/components/Question/Grade.svelte';
   import { t } from '$lib/utils/functions/translations';
   import ReasonBox from '../ReasonBox.svelte';
-  import { COURSE_TYPE } from '$lib/utils/types';
+  import QuestionTitle from '../QuestionTitle.svelte';
-  import { course } from '$lib/components/Course/store';
 
   export let title = '';
   export let index = 1;
   export let code = '';
   export let name = '';
-  export let options = [];
+  export let options: { value: string; label: string; is_correct: boolean }[] = [];
-  export let onSubmit = () => {};
+  export let onSubmit = (a: string, b: string[]) => {};
   export let onPrevious = () => {};
   export let defaultValue = '';
   export let disablePreviousButton = false;
   export let disabled = false;
   export let isPreview = false;
-  export let nextButtonProps = {};
+  export let nextButtonProps = {
+    isDisabled: false,
+    isActive: false
+  };
   export let isLast = false;
   export let grade: number;
   export let gradeMax = 0;
   export let disableGrading = false;
-  export let labelClassName = '';
   export let disableOptContainerMargin = false;
   export let isGradeWithAI = false;
   export let reason;
@@ -35,7 +36,7 @@
 
   let gradeWithAI = false;
 
-  function getRadioVal(form, name) {
+  function getRadioVal(form, name): string {
     let val;
     const radios = form.elements[name];
 
@@ -80,19 +81,14 @@
     grade = 0;
   }
 
-  $: {
+  $: gradeWithAI = isGradeWithAI;
-    gradeWithAI = isGradeWithAI;
-  }
 </script>
 
 <form on:submit|preventDefault={handleFormSubmit}>
   <div class="flex items-center justify-between">
-    <HtmlRender className="mt-4">
+    <HtmlRender className="mt-4 {typeof grade === 'number' && 'w-4/5'}" disableMaxWidth>
       <svelte:fragment slot="content">
-        <span class="dark:text-white flex items-center gap-1 {labelClassName}">
+        <QuestionTitle {index} {title} />
-          <h3>{index}</h3>
-          <h3>{title}</h3>
-        </span>
       </svelte:fragment>
     </HtmlRender>
     {#if !hideGrading}

apps/dashboard/src/lib/components/Question/TextareaQuestion/index.svelte

@@ -7,14 +7,13 @@
   import Grade from '$lib/components/Question/Grade.svelte';
   import { t } from '$lib/utils/functions/translations';
   import ReasonBox from '../ReasonBox.svelte';
-  import { course } from '$lib/components/Course/store';
+  import QuestionTitle from '../QuestionTitle.svelte';
-  import { COURSE_TYPE } from '$lib/utils/types';
 
   export let title = '';
   export let index = 1;
   export let code = '';
   export let name = '';
-  export let onSubmit = () => {};
+  export let onSubmit = (a: string, b: string) => {};
   export let onPrevious = () => {};
   export let defaultValue = '';
   export let disablePreviousButton = false;
@@ -51,19 +50,14 @@
     grade = 0;
   }
 
-  $: {
+  $: gradeWithAI = isGradeWithAI;
-    gradeWithAI = isGradeWithAI;
-  }
 </script>
 
 <form on:submit|preventDefault={handleFormSubmit}>
   <div class="flex items-center justify-between mb-2">
-    <HtmlRender className="mt-4">
+    <HtmlRender className="mt-4 {typeof grade === 'number' && 'w-4/5'}" disableMaxWidth>
       <svelte:fragment slot="content">
-        <span class={`${typeof grade === 'number' ? 'w-3/4' : ''} flex gap-1`}>
+        <QuestionTitle {index} {title} />
-          <h3>{index}</h3>
-          <h3>{title}</h3>
-        </span>
       </svelte:fragment>
     </HtmlRender>
     {#if !hideGrading}
@@ -88,7 +82,7 @@
     {:else}
       <TextArea
         bind:value={defaultValue}
-        rows="5"
+        rows={5}
         placeholder={$t('course.navItem.lessons.exercises.all_exercises.write_your_answer_here')}
       />
     {/if}