From e8de6b9457efab3094766d631712f0e5b7f492be Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 3 Aug 2024 14:20:20 +0100
Subject: [PATCH] chore: reduce question title size

---
 .../src/lib/components/Form/Checkbox.svelte   | 10 +++----
 .../components/HTMLRender/HTMLRender.svelte   |  7 ++++-
 .../lib/components/PrimaryButton/index.svelte |  2 +-
 .../Question/CheckboxQuestion/index.svelte    | 30 ++++++++-----------
 .../components/Question/QuestionTitle.svelte  |  9 ++++++
 .../Question/RadioQuestion/index.svelte       | 26 +++++++---------
 .../Question/TextareaQuestion/index.svelte    | 18 ++++-------
 7 files changed, 51 insertions(+), 51 deletions(-)
 create mode 100644 apps/dashboard/src/lib/components/Question/QuestionTitle.svelte

diff --git a/apps/dashboard/src/lib/components/Form/Checkbox.svelte b/apps/dashboard/src/lib/components/Form/Checkbox.svelte
index 71642ca1..7fe396c9 100644
--- a/apps/dashboard/src/lib/components/Form/Checkbox.svelte
+++ b/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 value;
-  export let checked;
-  export let name;
+  export let label = '';
+  export let value = '';
+  export let checked = false;
+  export let name = '';
   export let isEditable = false;
   export let disabled = false;
   export let className = '';
-  export let onChange;
+  export let onChange = () => {};
 </script>
 
 <label
diff --git a/apps/dashboard/src/lib/components/HTMLRender/HTMLRender.svelte b/apps/dashboard/src/lib/components/HTMLRender/HTMLRender.svelte
index 8142bbc7..f9202446 100644
--- a/apps/dashboard/src/lib/components/HTMLRender/HTMLRender.svelte
+++ b/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}
diff --git a/apps/dashboard/src/lib/components/PrimaryButton/index.svelte b/apps/dashboard/src/lib/components/PrimaryButton/index.svelte
index 3dcf43e4..2eabd24f 100644
--- a/apps/dashboard/src/lib/components/PrimaryButton/index.svelte
+++ b/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;
diff --git a/apps/dashboard/src/lib/components/Question/CheckboxQuestion/index.svelte b/apps/dashboard/src/lib/components/Question/CheckboxQuestion/index.svelte
index cc12bcad..4e32d68a 100644
--- a/apps/dashboard/src/lib/components/Question/CheckboxQuestion/index.svelte
+++ b/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 { COURSE_TYPE } from '$lib/utils/types';
+  import QuestionTitle from '../QuestionTitle.svelte';
 
   export let title = '';
   export let index = 1;
   export let code;
   export let name = '';
-  export let options = [];
-  export let onSubmit = () => {};
+  export let options: { value: string; label: string }[] = [];
+  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`}>
-          <h3>{index}</h3>
-          <h3>
-            {title}
-          </h3>
-        </span>
+        <QuestionTitle {index} {title} />
       </svelte:fragment>
     </HtmlRender>
     {#if !hideGrading}
diff --git a/apps/dashboard/src/lib/components/Question/QuestionTitle.svelte b/apps/dashboard/src/lib/components/Question/QuestionTitle.svelte
new file mode 100644
index 00000000..2c20bcfd
--- /dev/null
+++ b/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>
diff --git a/apps/dashboard/src/lib/components/Question/RadioQuestion/index.svelte b/apps/dashboard/src/lib/components/Question/RadioQuestion/index.svelte
index b68c01c8..2d488f6f 100644
--- a/apps/dashboard/src/lib/components/Question/RadioQuestion/index.svelte
+++ b/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 { course } from '$lib/components/Course/store';
+  import QuestionTitle from '../QuestionTitle.svelte';
 
   export let title = '';
   export let index = 1;
   export let code = '';
   export let name = '';
-  export let options = [];
-  export let onSubmit = () => {};
+  export let options: { value: string; label: string; is_correct: boolean }[] = [];
+  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}">
-          <h3>{index}</h3>
-          <h3>{title}</h3>
-        </span>
+        <QuestionTitle {index} {title} />
       </svelte:fragment>
     </HtmlRender>
     {#if !hideGrading}
diff --git a/apps/dashboard/src/lib/components/Question/TextareaQuestion/index.svelte b/apps/dashboard/src/lib/components/Question/TextareaQuestion/index.svelte
index f6745553..04931121 100644
--- a/apps/dashboard/src/lib/components/Question/TextareaQuestion/index.svelte
+++ b/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 { COURSE_TYPE } from '$lib/utils/types';
+  import QuestionTitle from '../QuestionTitle.svelte';
 
   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`}>
-          <h3>{index}</h3>
-          <h3>{title}</h3>
-        </span>
+        <QuestionTitle {index} {title} />
       </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}