Merge branch 'CLASSROOMIO-T-11' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-11

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

@@ -12,34 +12,38 @@
   import { course } from '../../store';
   import { currentOrg } from '../../../../utils/store/org';
 
-  const professional = './professional.svg';
+  const studentNamePlaceholder = 'Name of student';
-  const plain = './plain.svg';
-  const student = 'Name of student';
 
-  const themes = [
+  const themes = ['professional', 'plain'];
-    { label: 'professional', src: professional },
-    { label: 'plain', src: plain },
-  ];
 
-  let Selectedtheme = themes[0];
   let isSaving = false;
 
   const saveCertificate = () => {
     // set isSaving to true
     // Validation - make sure description isn't empty
     /**
-     * Update course description and is_certificate_downloadable (like in src/components/Course/components/Settings/index.svelte)
+     * Update course description, is_certificate_downloadable and certificate_theme (like in src/components/Course/components/Settings/index.svelte)
      * 
      * await updateCourse($course.id, undefined, {
         description: $course.description,
-        is_certificate_downloadable: $course.is_certificate_downloadable
+        is_certificate_downloadable: $course.is_certificate_downloadable,
+        certificate_theme: $course.certificate_theme
       });
      * */
     // set isSaving to false
   };
 </script>
 
-<main class="md:-ml-4 md:-mr-4">
+<svelte:head>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen&family=Roboto:wght@300;400;700&display=swap"
+    rel="stylesheet"
+  />
+</svelte:head>
+
+<main class="md:-ml-4 md:-mr-4 px-2">
   <div
     class="flex-1 flex flex-col md:flex-row justify-between gap-3 w-full mb-3 h-4/5"
   >
@@ -48,20 +52,16 @@
         >Certificate settings</strong
       >
       <p class="text-xs font-normal my-4">Choose a theme</p>
-      <RadioButtonGroup bind:selected={Selectedtheme} class="mb-10">
+      <RadioButtonGroup bind:selected={$course.certificate_theme} class="mb-10">
-        {#each themes as value}
+        {#each themes as theme}
           <div class="flex mr-3">
-            <RadioButton {value} size="sm" />
+            <RadioButton value={theme} size="sm" />
-            <img src={value.src} alt="themes" />
+            <img src={`./${theme}.svg`} alt="themes" />
           </div>
         {/each}
       </RadioButtonGroup>
       <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: 512px x
-          512px.
-        </p>
         <div>
           <p class="text-base mt-1">
             To update your brand image, go to <strong class="font-semibold"
@@ -70,7 +70,7 @@
           </p>
           <PrimaryButton
             label="Go to Settings"
-            className="rounded-md mt-1"
+            className="rounded-md mt-3"
             onClick={() => goto(`org/${$currentOrg.siteName}/settings`)}
           />
         </div>
@@ -90,19 +90,19 @@
           class="my-4"
           size="sm"
         >
-          <span slot="labelA" style="color: #161616">Student access</span>
+          <span slot="labelA" style="color: #161616">Locked</span>
-          <span slot="labelB" style="color: green">Student access</span>
+          <span slot="labelB" style="color: green">Unlocked</span>
         </Toggle>
       </div>
     </section>
     <section
-      class="certbg flex justify-center items-center rounded-md w-full md:w-3/5"
+      class="certificate-bg flex justify-center items-center rounded-md w-full md:w-3/5"
     >
-      <div class="certContainer flex justify-center items-center h-5/6">
+      <div class="certificate-container flex justify-center items-center h-5/6">
-        {#if Selectedtheme.label == 'professional'}
+        {#if $course.certificate_theme === 'professional'}
-          <Professional studentName={student} />
+          <Professional studentName={studentNamePlaceholder} />
         {:else}
-          <Plain studentName={student} />
+          <Plain studentName={studentNamePlaceholder} />
         {/if}
       </div>
     </section>
@@ -121,11 +121,11 @@
   p {
     color: #262626;
   }
-  .certContainer {
+  .certificate-container {
     width: 95%;
     max-width: 95%;
   }
-  .certbg {
+  .certificate-bg {
     background-color: #f5f8fe;
   }
 </style>

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

@@ -9,25 +9,25 @@
 </script>
 
 <div
-  class="flex flex-col items-center justify-center {borderwidth} {bordercolor}"
+  class="flex flex-col items-center justify-center {borderwidth} {bordercolor} py-3"
 >
   <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"
+      class=" w-10 h-10 rounded-md"
     />
     <p class="font-semibold capitalize">{$currentOrg.name}</p>
   </div>
   <div class="w-full px-5 py-3">
     <p
-      class="text-sm text-center font-normal my-2 uppercase tracking-wider text-gray-500 w-full"
+      class="text-sm text-center font-normal my-2 uppercase tracking-widest text-gray-500 w-full"
     >
       Certificate of completion
     </p>
     <div class="border-b border-gray-500 mb-4">
       <p class="text-xs text-black font-medium">This is to certify that</p>
-      <p class="text-center">{studentName}</p>
+      <p class="student-name text-center text-5xl">{studentName}</p>
     </div>
     <div class="mb-2">
       <p class="text-xs text-black font-medium">
@@ -46,6 +46,9 @@
 </div>
 
 <style>
+  .student-name {
+    font-family: 'Qwitcher Grypen', cursive;
+  }
   .desc {
     font-size: 10px;
   }

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

@@ -18,7 +18,7 @@
       </p>
       <div class="border-b border-gray-500 mb-4">
         <p class="text-xs text-black font-medium">This is to certify that</p>
-        <p class="text-center">{studentName}</p>
+        <p class="student-name text-center text-5xl">{studentName}</p>
       </div>
       <div class="mb-2">
         <p class="text-xs text-black font-medium">
@@ -26,18 +26,18 @@
         </p>
         <div>
           <p
-            class="clamp bg-transparent text-base font-semibold text-blue-800 text-center uppercase"
+            class="clamp bg-transparent text-base font-semibold text-blue-800 text-center uppercase my-2"
           >
             {$course.title}
           </p>
         </div>
       </div>
-      <p class="desc mb-2 text-justify">{$course.description}</p>
+      <p class="desc mb-4 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"
+          class="w-10 h-10 rounded-md"
         />
         <p class="font-semibold capitalize">{$currentOrg.name}</p>
       </div>
@@ -46,6 +46,9 @@
 </div>
 
 <style>
+  .student-name {
+    font-family: 'Qwitcher Grypen', cursive;
+  }
   .desc {
     font-size: 10px;
   }

src/components/Course/store.ts

@@ -11,6 +11,7 @@ export const course: Writable<Course> = writable({
   cost: 0,
   currency: '',
   is_certificate_downloadable: false,
+  certificate_theme: 'professional',
   metadata: {
     requirements: '',
     description: '',
@@ -129,5 +130,9 @@ export async function setCourse(data: Course, setLesson = true) {
       },
     };
   }
+
+  if (!data.certificate_theme) {
+    data.certificate_theme = 'professional';
+  }
   course.set(data);
 }

src/components/PageBody/index.svelte

@@ -1,7 +1,7 @@
 <script>
   // import
   //   border border-gray-300 rounded-md p-3 bg-blue-200 bg-opacity-25
-  export let width = 'max-w-3xl w-full lg:w-11/12';
+  export let width = 'max-w-4xl w-full lg:w-11/12';
   export let padding = 'pb-5 px-4';
   export let className = '';
 </script>

src/routes/courses/[id]/certificates.svelte

@@ -18,8 +18,8 @@
   import Design from '../../../components/Course/components/Ceritficate/Design.svelte';
   // import Reports from '../../../components/Course/components/Ceritficate/Reports.svelte';
   // import { issueCertificateModal } from '../../../components/Course/components/Ceritficate/store';
-  import { Tabs, Tab } from 'carbon-components-svelte';
+  // import { Tabs, Tab } from 'carbon-components-svelte';
-  import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
+  // import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
 
   export let courseId: string = '';
   let isStudent = false;
@@ -47,20 +47,21 @@
     </slot:fragment>
   </PageNav>
 
-  <PageBody className="w-full mx-0" padding="px-0">
+  <PageBody className="w-full mx-0" padding="px-3">
-    <Tabs autoWidth class="border-b border-gray-200">
+    <Design />
+    <!-- <Tabs autoWidth class="border-b border-gray-200">
       <Tab label="Design" />
-      <!-- <Tab label="Reports" /> -->
+      <Tab label="Reports" />
       <svelte:fragment slot="content">
         <TabContent>
           <Design />
         </TabContent>
 
-        <!-- Temp disable Reports tab for V2 -->
+        Temp disable Reports tab for V2
-        <!-- <TabContent>
+        <TabContent>
           <Reports />
-        </TabContent> -->
+        </TabContent>
       </svelte:fragment>
-    </Tabs>
+    </Tabs> -->
   </PageBody>
 </CourseContainer>

src/utils/types/index.ts

@@ -97,6 +97,7 @@ export interface Course {
   group?: Group;
   organization?: Organization;
   is_certificate_downloadable?: boolean;
+  certificate_theme?: string;
 }
 
 export interface Groupmember {