Foundational work

src/lib/components/AuthUI/index.svelte

@@ -32,19 +32,20 @@
   }
 </script>
 
-<div class="w-full min-h-screen flex items-center justify-center mt-4">
+<div class="w-full min-h-screen flex items-center justify-center">
   <div class="container border border-gray bg-white dark:bg-gray-800">
     <div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
       {#if !showOnlyContent || showLogo}
-        <div class="flex flex-col items-center w-full justify-center pt-2">
+        <div class="flex items-center justify-center w-full pt-2">
           <Avatar
             src={$currentOrg.avatar_url ? $currentOrg.avatar_url : '/logo-192.png'}
             name={$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
             shape="rounded-md"
             width="w-10"
             height="h-10"
+            className="mr-2"
           />
-          <h4 class="dark:text-white text-xl mt-1">
+          <h4 class="dark:text-white text-xl">
             {$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
           </h4>
         </div>

src/lib/components/Course/components/Navigation/index.svelte

@@ -11,7 +11,6 @@
   import ChevronLeftIcon from 'carbon-icons-svelte/lib/ChevronLeft.svelte';
   import ChevronRightIcon from 'carbon-icons-svelte/lib/ChevronRight.svelte';
   import NavExpandable from './NavExpandable.svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   // import Avatar from '$lib/components/Avatar/index.svelte';
   import { getNavItemRoute, getLessonsRoute, getLectureNo } from '$lib/components/Course/function';
@@ -23,7 +22,6 @@
   import { lessons } from '../Lesson/store/lessons';
   import { course } from '$lib/components/Course/store';
   import { updateCourse } from '$lib/utils/services/courses';
-  import { profile } from '$lib/utils/store/user';
   import { NavClasses } from '$lib/utils/constants/reusableClass';
   import { isMobile } from '$lib/utils/store/useMobile';
 

src/lib/components/Email/EmailTemplate.svelte

@@ -0,0 +1,46 @@
+<script>
+  import Avatar from '$lib/components/Avatar/index.svelte';
+</script>
+
+<main>
+  <div class="w-full min-h-screen flex items-center justify-center">
+    <div class="container border border-gray bg-white">
+      <div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
+        <div class="flex items-center justify-center w-full pt-2">
+          <Avatar
+            src={'/logo-192.png'}
+            name={'ClassroomIO'}
+            shape="rounded-md"
+            width="w-10"
+            height="h-10"
+            className="mr-2"
+          />
+          <h4 class="text-xl">ClassroomIO</h4>
+        </div>
+        <div class="flex items-center flex-col w-10/12">
+          <h3>Welcome to ClassroomIO.</h3>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="w-full p-6 border-t border-grey text-center">
+        Already have an account? <a class="hover:underline text-blue-700" href="/login">Log In</a>
+      </div>
+    </div>
+  </div>
+</main>
+
+<style>
+  .container {
+    width: 450px;
+  }
+  main {
+    background: linear-gradient(
+      138deg,
+      rgb(32, 201, 255) 36.7%,
+      rgb(0, 8, 187) 84.4%,
+      rgb(255, 255, 255) 119.7%
+    );
+    box-sizing: border-box;
+  }
+</style>

src/routes/+layout.svelte

@@ -322,7 +322,7 @@
 
 <style>
   main {
-    background-color: #fafbfc;
+    background: radial-gradient(circle at 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%);
     box-sizing: border-box;
   }
 
@@ -342,10 +342,15 @@
     --main-primary-color: rgba(29, 78, 216, 1);
     --border-color: #eaecef;
     --app-background-color: #fafbfc;
+    --app-background: radial-gradient(
+      circle at 10% 20%,
+      rgb(239, 246, 249) 0%,
+      rgb(206, 239, 253) 90%
+    );
   }
 
-  :global(.app-background-color) {
-    background-color: var(--app-background-color);
+  :global(.app-background) {
+    background: var(--app-background);
   }
 
   :global(.bx--data-table-container) {