CLASSROOMIO-T-11: More spacing and font

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

@@ -6,6 +6,7 @@
   } from 'carbon-components-svelte';
   import { goto } from '@sapper/app';
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
+  import { VARIANTS } from '../../../PrimaryButton/constants';
   import TextArea from '../../../Form/TextArea.svelte';
   import Professional from './certificates/Professional.svelte';
   import Plain from './certificates/Plain.svelte';
@@ -39,7 +40,16 @@
   };
 </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"
   >
@@ -58,10 +68,6 @@
       </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"
@@ -71,6 +77,7 @@
           <PrimaryButton
             label="Go to Settings"
             className="rounded-md mt-1"
+            variant={VARIANTS.TEXT}
             onClick={() => goto(`org/${$currentOrg.siteName}/settings`)}
           />
         </div>

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/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>