Dashboard improvements + LMS community

src/lib/components/AuthUI/index.svelte

@@ -2,6 +2,8 @@
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import GoogleIconColored from '../Icons/GoogleIconColored.svelte';
+  import Avatar from '$lib/components/Avatar/index.svelte';
+  import { currentOrg } from '$lib/utils/store/org';
 
   export let supabase;
   export let handleSubmit;
@@ -34,9 +36,17 @@
   <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 items-center w-full justify-center pt-4">
-          <img src="/logo-192.png" alt="ClassroomIO logo" height="50" width="50" data-atf="1" />
-          <h4 class="dark:text-white text-xl">ClassroomIO</h4>
+        <div class="flex flex-col items-center w-full justify-center 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"
+          />
+          <h4 class="dark:text-white text-xl mt-1">
+            {$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
+          </h4>
         </div>
       {/if}
       <form

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -31,7 +31,6 @@
   import { course } from '$lib/components/Course/store';
   import * as CONSTANTS from './constants';
   import { fetchLesson } from '$lib/utils/services/courses';
-  import type { LessonPage } from '$lib/utils/types';
 
   export let mode = MODES.view;
   export let prevMode = '';

src/lib/components/Courses/components/NewCourseModal/index.svelte

@@ -81,7 +81,7 @@
 </script>
 
 <svelte:head>
-  <title>Courses - ClassroomIO</title>
+  <title>Create a new course</title>
 </svelte:head>
 
 <Modal

src/lib/components/LMS/SideBar.svelte

@@ -47,7 +47,7 @@
   ];
 </script>
 
-<aside class=" root bg-gray-100 dark:bg-gray-700 h-full">
+<aside class="w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-full">
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
       {#if $currentOrg.avatar_url}
@@ -109,9 +109,3 @@
     </ul>
   </div>
 </aside>
-
-<style>
-  .root {
-    width: 250px;
-  }
-</style>

src/lib/components/Org/Community/index.svelte

@@ -10,6 +10,8 @@
   import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
   import { supabase } from '$lib/utils/functions/supabase';
 
+  export let isLMS = false;
+
   let discussions = [];
 
   dayjs.extend(relativeTime);
@@ -38,7 +40,7 @@
 
     if (error) {
       console.error('Error loading community', error);
-      return goto(`${currentOrgPath}`);
+      return goto(isLMS ? '/lms' : $currentOrgPath);
     }
 
     discussions =
@@ -48,7 +50,7 @@
         author: discussion?.author?.profile?.fullname,
         comments: discussion.comments?.[0]?.count || 0,
         votes: discussion.votes,
-        createdAt: dayjs(discussion.created_at).fromNow(true),
+        createdAt: dayjs(discussion.created_at).fromNow(true)
       })) || [];
   }
 
@@ -65,7 +67,7 @@
         <h4>
           <a
             class="text-black dark:text-white"
-            href="{$currentOrgPath}/community/{discussion.slug}"
+            href="{isLMS ? '/lms' : $currentOrgPath}/community/{discussion.slug}"
           >
             {discussion.title}
           </a>
@@ -84,9 +86,7 @@
     <Box>
       <CoursesEmptyIcon />
       <h3 class="dark:text-white text-2xl my-5">No Questions asked</h3>
-      <p class="dark:text-white w-1/3 text-center">
-        Ask a question to the community
-      </p>
+      <p class="dark:text-white w-1/3 text-center">Ask a question to the community</p>
     </Box>
   {/each}
 </div>

src/lib/components/Org/LandingPage/index.svelte

@@ -133,7 +133,9 @@
 </script>
 
 <svelte:head>
-  {$currentOrg.name}
+  <title>
+    {$currentOrg.name}'s Landing Page
+  </title>
 </svelte:head>
 
 <main>
@@ -148,7 +150,7 @@
           class="md:w-11/12 lg:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row z-20 relative"
         >
           <!-- Course Description -->
-          <div class="md:w-2/5 w-11/12 py-10 flex flex-col items-start">
+          <div class="md:w-2/5 w-11/12 py-10 flex flex-col items-start mr-3">
             <p class=" text-blue-600 text-2xl font-semibold">Coding Dojo</p>
             <h1 class="text-4xl md:text-5xl lg:text-6xl my-4 font-bold">
               Web Developement Courses for <br /><span class="text-blue-600">Everyone</span>
@@ -164,7 +166,7 @@
               onClick={() => goto('#contact')}
             />
           </div>
-          <div class="w-4/6 md:w-2/3 md:max-w-[650px] flex">
+          <div class="w-4/6 md:w-1/2 md:max-w-[650px] flex">
             <video class="w-full rounded-xl" controls loop autoplay>
               <source src={video} type="video/mp4" />
               <!-- <source src="/path/to/video.webm" type="video/webm" /> -->

src/lib/components/Org/SideBar.svelte

@@ -55,7 +55,7 @@
 </script>
 
 <aside
-  class="root bg-gray-100 dark:bg-gray-800 h-full border border-l-0 border-t-0 border-b-0 border-r-1"
+  class="w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-full border border-l-0 border-t-0 border-b-0 border-r-1"
 >
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
@@ -128,9 +128,3 @@
     </ul>
   </div>
 </aside>
-
-<style>
-  .root {
-    width: 250px;
-  }
-</style>