CLASROOMIO-T-11:Removed the upload component,made the certificate logo and name to be gotten from the organisation settings,and also used svg for the images

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

@@ -4,15 +4,17 @@
     RadioButton,
     Toggle,
   } from 'carbon-components-svelte';
-  import UploadImage from './Upload.svelte';
+  import { goto } from '@sapper/app';
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
   import TextArea from '../../../Form/TextArea.svelte';
-  import { certificateInfo } from './store';
   import Professional from './certificates/Professional.svelte';
   import Plain from './certificates/Plain.svelte';
+  import { course } from '../../store';
+  import { currentOrg } from '../../../../utils/store/org';
 
-  const professional = './theme1.png';
-  const plain = './theme2.png';
+  const professional = './professional.svg';
+  const plain = './plain.svg';
+  const student = 'Name of student';
 
   const themes = [
     { label: 'professional', src: professional },
@@ -20,6 +22,7 @@
   ];
 
   let Selectedtheme = themes[0];
+
   const saveCertificate = () => {};
   const onToggle = (e) => {
     console.log(e);
@@ -46,12 +49,21 @@
       <div>
         <p class="text-xs font-normal text-black my-2">Brand Logo</p>
         <p class="text-base font-normal mt-2 mb-4">
-          We recommend using a PNG file with transparency. Maximum size: 1200 x
-          600px.
+          We recommend using a PNG file with transparency. Maximum size: 512px x
+          512px.
         </p>
-
-        <UploadImage />
-
+        <div>
+          <p class="text-base mt-1">
+            To update your brand image, go to <strong class="font-semibold"
+              >Settings &gt; Organisation settings</strong
+            > and upload you brand logo
+          </p>
+          <PrimaryButton
+            label="Go to Settings"
+            className="rounded-md mt-1"
+            onClick={() => goto(`org/${$currentOrg.siteName}/settings`)}
+          />
+        </div>
         <span class="my-4">
           <p class="text-xs font-normal mt-4 mb-2">Course Description</p>
           <TextArea
@@ -59,34 +71,30 @@
             rows={6}
             placeholder="a little description about the course"
             bgColor="bg-gray-100"
-            bind:value={$certificateInfo.Desc}
-            onChange={$certificateInfo.Desc}
+            bind:value={$course.description}
+            onChange={$course.description}
           />
         </span>
-
         <Toggle
           labelText="Add date of completion"
           on:toggle={(e) => onToggle(e)}
           class="my-2"
           size="sm"
         >
-          <span slot="labelA" style="color: #161616">Automatic</span>
-          <span slot="labelB" style="color: green">Automatic</span>
+          <span slot="labelA" style="color: #161616">Date</span>
+          <span slot="labelB" style="color: green">Date</span>
         </Toggle>
       </div>
     </section>
     <section
       class="certbg flex justify-center items-center rounded-md w-full md:w-3/5"
     >
-      <div class="flex justify-center items-center h-5/6 w-5/6">
+      <div class="certContainer flex justify-center items-center h-5/6">
         {#if Selectedtheme.label == 'professional'}
-          <Professional />
+          <Professional studentName={student} />
         {:else}
-          <Plain />
+          <Plain studentName={student} />
         {/if}
-        <!-- <img src="./certImg.png" alt="cert" class="object-cover" /> -->
-        <!-- <img src={Selectedtheme.src} alt="cert" class="img object-cover" /> -->
-        <!-- {Selectedtheme.label} -->
       </div>
     </section>
   </div>
@@ -103,6 +111,10 @@
   p {
     color: #262626;
   }
+  .certContainer {
+    width: 95%;
+    max-width: 95%;
+  }
   .certbg {
     background-color: #f5f8fe;
   }

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

@@ -39,9 +39,9 @@
 
 <section class="mt-14 border-t border-gray-300">
   <StructuredList>
-    <StructuredListHead class="bg-blue-50 py-1">
-      <StructuredListRow head>
-        <StructuredListCell head>
+    <StructuredListHead class="bg-blue-50 py-0">
+      <StructuredListRow head class="py-0">
+        <StructuredListCell head class="py-0">
           <div
             class="flex-3 flex flex-row items-center justify-start w-full text-blue-600 text-sm font-medium"
           >
@@ -51,7 +51,7 @@
             </p>
           </div>
         </StructuredListCell>
-        <StructuredListCell head>
+        <StructuredListCell head class="py-0">
           <div
             class="flex-2 items-center w-full text-blue-900 text-sm font-medium"
           >

src/components/Course/components/Ceritficate/Upload.svelte

@@ -1,43 +0,0 @@
-<script>
-  import Camera from 'carbon-icons-svelte/lib/Camera20';
-
-  export let avatar = null;
-  export let src = null;
-
-  let fileinput;
-
-  const onFileSelected = (e) => {
-    const image = e.target.files[0];
-    let reader = new FileReader();
-    reader.readAsDataURL(image);
-    reader.onload = (e) => {
-      avatar = image;
-      src = e.target.result;
-    };
-  };
-</script>
-
-<section class="width-fit flex flex-col items-center">
-  <p
-    class="width-fit text-blue-700 flex items-center cursor-pointer text-sm"
-    on:click={() => {
-      fileinput.click();
-    }}
-  >
-    <Camera /> <span class="ml-2">Upload Image</span>
-  </p>
-
-  <input
-    style="display:none"
-    type="file"
-    accept=".jpg, .jpeg, .png"
-    on:change={(e) => onFileSelected(e)}
-    bind:this={fileinput}
-  />
-</section>
-
-<style>
-  .width-fit {
-    width: fit-content;
-  }
-</style>

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

@@ -1,18 +1,24 @@
 <script>
   import TextField from '../../../../Form/TextField.svelte';
-  import TextArea from '../../../../Form/TextArea.svelte';
-  import { certificateInfo } from '../store';
+  import { course } from '../../../store';
+  import { currentOrg } from '../../../../../utils/store/org';
 
+  export let studentName;
   let borderwidth = 'border-4';
   let bordercolor = 'border-pink-700';
-  let logo = './certLogo.png';
+  let logo = './logo-512.png';
 </script>
 
 <div
   class="flex flex-col items-center justify-center {borderwidth} {bordercolor}"
 >
-  <div>
-    <img src={logo} alt="logo" />
+  <div class="flex items-center gap-1 my-2">
+    <img
+      src={$currentOrg.avatar_url ? $currentOrg.avatar_url : logo}
+      alt="logo"
+      class=" w-14 h-14 rounded-md"
+    />
+    <p class="font-semibold capitalize">{$currentOrg.name}</p>
   </div>
   <div class="w-full px-5 py-3">
     <p
@@ -23,7 +29,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={$certificateInfo.Name}
+        bind:value={studentName}
         inputClassName="text-center placeholder:text-black"
         placeholder="Name of student"
         bgColor="bg-transparent"
@@ -33,16 +39,15 @@
       <p class="text-xs text-black font-medium">
         has successfully completed a courses in
       </p>
-      <TextArea
-        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"
-        rows="1"
-        maxRows="2"
-      />
+      <div>
+        <p
+          class="clamp bg-transparent text-base font-semibold text-pink-700 text-center uppercase"
+        >
+          {$course.title}
+        </p>
+      </div>
     </div>
-    <p class="desc text-center">{$certificateInfo.Desc}</p>
+    <p class="desc text-center">{$course.description}</p>
   </div>
 </div>
 

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

@@ -1,11 +1,12 @@
 <script>
   import TextField from '../../../../Form/TextField.svelte';
-  import TextArea from '../../../../Form/TextArea.svelte';
-  import { certificateInfo } from '../store';
+  import { course } from '../../../store';
+  import { currentOrg } from '../../../../../utils/store/org';
 
+  export let studentName;
   let borderwidth = 'border-l-8';
   let bordercolor = 'border-blue-800';
-  let logo = './certLogo.png';
+  let logo = './logo-512.png';
 </script>
 
 <div
@@ -19,7 +20,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={$certificateInfo.Name}
+          bind:value={studentName}
           inputClassName="text-center placeholder:text-black"
           placeholder="Name of student"
           bgColor="bg-transparent"
@@ -29,18 +30,22 @@
         <p class="text-xs text-black font-medium">
           has successfully completed introductory courses in
         </p>
-        <TextArea
-          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"
-          rows="1"
-          maxRows="2"
-        />
+        <div>
+          <p
+            class="clamp bg-transparent text-base font-semibold text-blue-800 text-center uppercase"
+          >
+            {$course.title}
+          </p>
+        </div>
       </div>
-      <p class="desc mb-2 text-justify">{$certificateInfo.Desc}</p>
-      <div>
-        <img src={logo} alt="logo" class="my-2" />
+      <p class="desc mb-2 text-justify">{$course.description}</p>
+      <div class="flex items-center gap-1 my-2">
+        <img
+          src={$currentOrg.avatar_url ? $currentOrg.avatar_url : logo}
+          alt="logo"
+          class="w-14 h-14 rounded-md"
+        />
+        <p class="font-semibold capitalize">{$currentOrg.name}</p>
       </div>
     </div>
   </div>

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

@@ -1,9 +1,5 @@
 import { writable } from 'svelte/store';
 
-// export const deleteMemberModal = writable({
-//   open: false,
-// });
-
 export const issueCertificateModal = writable({
   open: false,
   automatic: false,
@@ -12,12 +8,6 @@ export const issueCertificateModal = writable({
   message: '',
 });
 
-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 = () =>
   issueCertificateModal.update(() => ({
     open: false,