CLASSROOMIO-T-78: Certificate dark mode bug

fix extra formatting issues

CLASSROOMIO-T-78: Fix formatting of pro file

CLASSROOMIO-T-78: Replace tab

CLASSROOMIO-T-78: Certificate dark mode bug


Co-authored-by: Rotimi Best <[email protected]>


Merge-request: CLASSROOMIO-MR-31
Merged-by: Best Admin <[email protected]>

.prettierrc

@@ -0,0 +1,16 @@
+{
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "overrides": [
+    {
+      "files": [
+        "*.svelte"
+      ],
+      "options": {
+        "svelteBracketNewLine": true
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -5,6 +5,6 @@
   "editor.formatOnPaste": false,
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
-},
-"editor.formatOnSave": true,
+  },
+  "editor.formatOnSave": true
 }

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

@@ -1,9 +1,5 @@
 <script>
-  import {
-    RadioButtonGroup,
-    RadioButton,
-    Toggle,
-  } from 'carbon-components-svelte';
+  import { RadioButtonGroup, RadioButton, Toggle } from 'carbon-components-svelte';
   import { goto } from '$app/navigation';
   import { updateCourse } from '$lib/utils/services/courses';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -12,13 +8,15 @@
   import Plain from './certificates/Plain.svelte';
   import { course } from '$lib/components/Course/store';
   import { currentOrg } from '$lib/utils/store/org';
+  import { appStore } from '$lib/utils/store/app';
 
   const studentNamePlaceholder = 'Name of student';
   const themes = ['professional', 'plain'];
 
   let isSaving = false;
-  let Saved = false;
-  let errors = {};
+  let errors = {
+    description: ''
+  };
 
   const saveCertificate = async () => {
     isSaving = true;
@@ -28,18 +26,17 @@
       return;
     }
     await updateCourse($course.id, undefined, {
-      description: $course.description,
-      is_certificate_downloadable: $course.is_certificate_downloadable,
-      certificate_theme: $course.certificate_theme,
+      description: $course.description || '',
+      is_certificate_downloadable: $course.is_certificate_downloadable || false,
+      certificate_theme: $course.certificate_theme || ''
     });
-    Saved = true;
     isSaving = false;
   };
 </script>
 
 <svelte:head>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true" />
   <link
     href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen&family=Roboto:wght@300;400;700&display=swap"
     rel="stylesheet"
@@ -47,29 +44,27 @@
 </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"
-  >
+  <div class="flex-1 flex flex-col md:flex-row justify-between gap-3 w-full mb-3 h-4/5">
     <section class="w-full md:w-2/5 h-full">
-      <strong class="my-2 text-base font-semibold text-black"
+      <strong class="my-2 text-base font-semibold text-black dark:text-gray-100"
         >Certificate settings</strong
       >
-      <p class="text-xs font-normal my-4">Choose a theme</p>
+      <p class="text-xs font-normal my-4 dark:text-gray-100">Choose a theme</p>
       <RadioButtonGroup bind:selected={$course.certificate_theme} class="mb-10">
         {#each themes as theme}
           <div class="flex mr-3">
-            <RadioButton value={theme} size="sm" />
+            <RadioButton value={theme} />
             <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-xs font-normal text-black my-2 dark:text-gray-100">Brand Logo</p>
         <div>
-          <p class="text-base mt-1">
+          <p class="text-base mt-1 dark:text-gray-100">
             To update your brand image, go to <strong class="font-semibold"
               >Settings &gt; Organisation settings</strong
-            > and upload you brand logo
+            > and upload your brand logo
           </p>
           <PrimaryButton
             label="Go to Settings"
@@ -78,10 +73,10 @@
           />
         </div>
         <span class="my-4">
-          <p class="text-xs font-normal mt-4 mb-2">Course Description</p>
+          <p class="dark:text-gray-100 text-xs font-normal mt-4 mb-2">Course Description</p>
           <TextArea
             maxRows={6}
-            rows={6}
+            rows="6"
             placeholder="a little description about the course"
             bgColor="bg-gray-100"
             bind:value={$course.description}
@@ -94,13 +89,15 @@
           class="my-4"
           size="sm"
         >
-          <span slot="labelA" style="color: #161616">Locked</span>
+          <span slot="labelA" style={$appStore.isDark ? 'color: white' : 'color: #161616'}
+            >Locked</span
+          >
           <span slot="labelB" style="color: green">Unlocked</span>
         </Toggle>
       </div>
     </section>
     <section
-      class="certificate-bg flex justify-center items-center rounded-md w-full md:w-3/5"
+      class="bg-gray-100 dark:bg-gray-700 flex justify-center items-center rounded-md w-full md:w-3/5"
     >
       <div class="certificate-container flex justify-center items-center h-5/6">
         {#if $course.certificate_theme === 'professional'}
@@ -113,7 +110,7 @@
   </div>
   <div class="h-1/5">
     <PrimaryButton
-      label={Saved == true ? 'Saved' : 'Save Changes'}
+      label="Save Changes"
       className="rounded-md"
       onClick={saveCertificate}
       isLoading={isSaving}
@@ -129,7 +126,4 @@
     width: 95%;
     max-width: 95%;
   }
-  .certificate-bg {
-    background-color: #f5f8fe;
-  }
 </style>

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

@@ -9,7 +9,7 @@
 </script>
 
 <div
-  class="flex flex-col items-center justify-center {borderwidth} {bordercolor} py-3"
+  class="certificate-bg flex flex-col items-center justify-center {borderwidth} {bordercolor} py-3"
 >
   <div class="flex items-center gap-1 my-2">
     <img
@@ -17,31 +17,25 @@
       alt="logo"
       class=" w-10 h-10 rounded-md"
     />
-    <p class="font-semibold capitalize">{$currentOrg.name}</p>
+    <p class="font-semibold capitalize dark:text-black">{$currentOrg.name}</p>
   </div>
   <div class="w-full px-5 py-3">
-    <p
-      class="text-sm text-center font-normal my-2 uppercase tracking-widest text-gray-500 w-full"
-    >
+    <p 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="student-name text-center text-5xl">{studentName}</p>
+      <p class="student-name text-center text-5xl dark:text-black">{studentName}</p>
     </div>
     <div class="mb-2">
-      <p class="text-xs text-black font-medium">
-        has successfully completed the course
-      </p>
+      <p class="text-xs text-black font-medium">has successfully completed the course</p>
       <div>
-        <p
-          class="clamp bg-transparent text-base font-semibold text-pink-700 text-center uppercase"
-        >
+        <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">{$course.description}</p>
+    <p class="desc text-center dark:text-black">{$course.description}</p>
   </div>
 </div>
 
@@ -55,4 +49,7 @@
   .clamp {
     font-size: clamp(14px, 3vw, 16px);
   }
+  .certificate-bg {
+    background-color: #f5f8fe;
+  }
 </style>

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

@@ -8,9 +8,7 @@
   let logo = './logo-512.png';
 </script>
 
-<div
-  class="flex items-center justify-center border border-dashed border-blue-400"
->
+<div class="certificate-bg flex items-center justify-center border border-dashed border-blue-400">
   <div class="{borderwidth} {bordercolor}">
     <div class="w-full px-5 py-3">
       <p class="text-sm font-normal my-2 uppercase text-gray-500">
@@ -18,7 +16,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="student-name text-center text-5xl">{studentName}</p>
+        <p class="student-name text-center text-5xl dark:text-black">{studentName}</p>
       </div>
       <div class="mb-2">
         <p class="text-xs text-black font-medium">
@@ -32,14 +30,14 @@
           </p>
         </div>
       </div>
-      <p class="desc mb-4 text-justify">{$course.description}</p>
+      <p class="desc mb-4 text-justify dark:text-black">{$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-10 h-10 rounded-md"
         />
-        <p class="font-semibold capitalize">{$currentOrg.name}</p>
+        <p class="font-semibold capitalize dark:text-black">{$currentOrg.name}</p>
       </div>
     </div>
   </div>
@@ -55,4 +53,7 @@
   .clamp {
     font-size: clamp(14px, 3vw, 16px);
   }
+  .certificate-bg {
+    background-color: #f5f8fe;
+  }
 </style>

src/lib/utils/types/index.ts

@@ -81,10 +81,10 @@ export interface Waitinglist {
 }
 
 export interface Course {
-  title: any; // type unknown;
-  description: any; // type unknown;
+  title?: any; // type unknown;
+  description: string; // type unknown;
   overview?: any; // type unknown;
-  id: string /* primary key */;
+  id?: string /* primary key */;
   created_at?: string;
   updated_at?: string;
   group_id?: string /* foreign key to group.id */;