CLASSROOMIO-T-11:Updated the file name in the certificate issuin page

src/components/Course/components/Ceritficate/Design.svelte

@@ -7,9 +7,9 @@
   import UploadImage from './Upload.svelte';
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
   import TextArea from '../../../Form/TextArea.svelte';
-  import Introductorycert from './certificates/Introductorycert.svelte';
-  import Maincert from './certificates/Maincert.svelte';
-  import { certInfo } from './store';
+  import { certificateInfo } from './store';
+  import IntroductoryCertificate from './certificates/IntroductoryCertificate.svelte';
+  import MainCertificate from './certificates/MainCertificate.svelte';
 
   const theme1 = './theme1.png';
   const theme2 = './theme2.png';
@@ -59,8 +59,8 @@
             rows={6}
             placeholder="a little description about the course"
             bgColor="bg-gray-100"
-            bind:value={$certInfo.Desc}
-            onChange={$certInfo.Desc}
+            bind:value={$certificateInfo.Desc}
+            onChange={$certificateInfo.Desc}
           />
         </span>
 
@@ -80,9 +80,9 @@
     >
       <div class="flex justify-center items-center h-5/6 w-5/6">
         {#if Selectedtheme.label == 'theme1'}
-          <Introductorycert />
+          <IntroductoryCertificate />
         {:else}
-          <Maincert />
+          <MainCertificate />
         {/if}
         <!-- <img src="./certImg.png" alt="cert" class="object-cover" /> -->
         <!-- <img src={Selectedtheme.src} alt="cert" class="img object-cover" /> -->

src/components/Course/components/Ceritficate/IssueCertificateModal.svelte

@@ -4,20 +4,20 @@
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
   import TextArea from '../../../Form/TextArea.svelte';
   import TextField from '../../../Form/TextField.svelte';
-  import { issueCertModal, resetForm } from './store';
+  import { issueCertificateModal, resetForm } from './store';
 
   const onToggle = (e) => {
     console.log(e);
   };
 
-  const issueCert = () => {
+  const issueCertificate = () => {
     resetForm();
   };
 </script>
 
 <Modal
   onClose={resetForm}
-  bind:open={$issueCertModal.open}
+  bind:open={$issueCertificateModal.open}
   width="w-3/5"
   maxWidth=""
   modalHeading="Send Certificate"
@@ -41,7 +41,7 @@
     <p class="text-xs font-normal text-gray-500 my-4">
       or send a personalised/ custom certificate below:
     </p>
-    <form on:submit|preventDefault={issueCert}>
+    <form on:submit|preventDefault={issueCertificate}>
       <div class="flex flex-col md:flex-row gap-2 w-full">
         <TextField
           label="Email address of the student"
@@ -49,7 +49,7 @@
           labelClassName="text-xs font-normal"
           inputClassName="text-sm placeholder:text-sm placeholder:font-medium "
           placeholder="email,comma seperated"
-          bind:value={$issueCertModal.email}
+          bind:value={$issueCertificateModal.email}
         />
         <TextField
           label="Schedule date"
@@ -57,14 +57,14 @@
           labelClassName="text-xs font-normal"
           inputClassName="text-sm placeholder:text-sm placeholder:font-medium "
           placeholder="12/06/2023"
-          bind:value={$issueCertModal.date}
+          bind:value={$issueCertificateModal.date}
         />
       </div>
 
       <TextArea
         label="Add a personalized message"
         labelClassName="text-xs font-normal"
-        bind:value={$issueCertModal.message}
+        bind:value={$issueCertificateModal.message}
         rows="2"
         maxRows="3"
         placeholder="your message here"

src/components/Course/components/Ceritficate/Reports.svelte

@@ -46,14 +46,14 @@
             class="flex-3 flex flex-row items-center justify-start w-full text-blue-600 text-sm font-medium"
           >
             <Checkbox bind:checked />
-            <p class="text-blue-600 text-start w-full text-sm font-medium">
+            <p class="text-blue-900 text-start w-full text-sm font-medium">
               Name of student
             </p>
           </div>
         </StructuredListCell>
         <StructuredListCell head>
           <div
-            class="flex-2 items-center w-full text-blue-600 text-sm font-medium"
+            class="flex-2 items-center w-full text-blue-900 text-sm font-medium"
           >
             <p class="align-middle text-sm font-medium pt-1">Date issued</p>
             <p class="opacity-0">personalized</p>

src/components/Course/components/Ceritficate/certificates/IntroductoryCertificate.svelte

@@ -1,7 +1,7 @@
 <script>
   import TextField from '../../../../Form/TextField.svelte';
   import TextArea from '../../../../Form/TextArea.svelte';
-  import { certInfo } from '../store';
+  import { certificateInfo } from '../store';
 
   let borderwidth = 'border-l-8';
   let bordercolor = 'border-blue-800';
@@ -19,7 +19,7 @@
       <div class="border-b border-gray-500 mb-4">
         <p class="text-xs text-black font-medium">This is to certify that</p>
         <TextField
-          bind:value={$certInfo.Name}
+          bind:value={$certificateInfo.Name}
           inputClassName="text-center placeholder:text-black"
           placeholder="Name of student"
           bgColor="bg-transparent"
@@ -30,7 +30,7 @@
           has successfully completed introductory courses in
         </p>
         <TextArea
-          bind:value={$certInfo.Title}
+          bind:value={$certificateInfo.Title}
           inputClassName=""
           placeholder="Name of course"
           bgColor="clamp bg-transparent font-semibold text-blue-800 text-center placeholder:text-black placeholder:text-base placeholder:font-semibold uppercase resize-none border-none"
@@ -38,7 +38,7 @@
           maxRows="2"
         />
       </div>
-      <p class="desc mb-2">{$certInfo.Desc}</p>
+      <p class="desc mb-2 text-justify">{$certificateInfo.Desc}</p>
       <div>
         <img src={logo} alt="logo" class="my-2" />
       </div>

src/components/Course/components/Ceritficate/certificates/MainCertificate.svelte

@@ -1,7 +1,7 @@
 <script>
   import TextField from '../../../../Form/TextField.svelte';
   import TextArea from '../../../../Form/TextArea.svelte';
-  import { certInfo } from '../store';
+  import { certificateInfo } from '../store';
 
   let borderwidth = 'border-4';
   let bordercolor = 'border-pink-700';
@@ -23,7 +23,7 @@
     <div class="border-b border-gray-500 mb-4">
       <p class="text-xs text-black font-medium">This is to certify that</p>
       <TextField
-        bind:value={$certInfo.Name}
+        bind:value={$certificateInfo.Name}
         inputClassName="text-center placeholder:text-black"
         placeholder="Name of student"
         bgColor="bg-transparent"
@@ -34,7 +34,7 @@
         has successfully completed a courses in
       </p>
       <TextArea
-        bind:value={$certInfo.Title}
+        bind:value={$certificateInfo.Title}
         inputClassName=""
         placeholder="Name of course"
         bgColor="clamp bg-transparent text-base font-semibold text-pink-700 text-center placeholder:text-black placeholder:text-base placeholder:font-semibold uppercase resize-none"
@@ -42,7 +42,7 @@
         maxRows="2"
       />
     </div>
-    <p class="desc text-center">{$certInfo.Desc}</p>
+    <p class="desc text-center">{$certificateInfo.Desc}</p>
   </div>
 </div>
 

src/components/Course/components/Ceritficate/store.js

@@ -4,7 +4,7 @@ import { writable } from 'svelte/store';
 //   open: false,
 // });
 
-export const issueCertModal = writable({
+export const issueCertificateModal = writable({
   open: false,
   automatic: false,
   email: '',
@@ -12,14 +12,14 @@ export const issueCertModal = writable({
   message: '',
 });
 
-export const certInfo = writable({
+export const certificateInfo = writable({
   Name: 'Name of student',
   Title: 'Desiging functional components',
   Desc: '(Introduction to Digital Devices, The Internet Mobile Applications, Introduction to Social Media, Using social media for business, Digital Content Creation and Distribution,  Using mobile money in business, Digital financial management,Digital Empowerment,Digital Safety)',
 });
 
 export const resetForm = () =>
-  issueCertModal.update(() => ({
+  issueCertificateModal.update(() => ({
     open: false,
     automatic: false,
     email: '',