CLASSROOMIO-T-108: Revamp landing page & sidebar improvement

src/lib/components/LMS/SideBar.svelte

@@ -2,8 +2,7 @@
   import { page } from '$app/stores';
   import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
   import LicenseDraft from 'carbon-icons-svelte/lib/LicenseDraft.svelte';
-  import TextChip from '$lib/components/Chip/Text.svelte';
-  import OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
+  import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
   import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
   import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
   import CommunityIcon from '$lib/components/Icons/CommunityIcon.svelte';
@@ -59,19 +58,21 @@
 >
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
-      {#if $currentOrg.avatar_url}
+      <div class="w-full flex flex-col items-center">
         <Avatar
-          src={$currentOrg.avatar_url}
-          name={$currentOrg.name}
-          shape="rounded-md"
-          width="w-7"
-          height="h-7"
+          src={$profile.avatar_url}
+          name={$profile.fullname}
+          shape="rounded-full"
+          width="w-20"
+          height="h-20"
         />
-      {:else}
-        <TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
-      {/if}
 
-      <OrgSelector canAddOrg={false} />
+        <div class="mt-5">
+          <p class="dark:text-white text-lg font-bold whitespace-nowrap truncate">
+            {$profile.fullname}
+          </p>
+        </div>
+      </div>
 
       <ul class="my-5">
         {#each sideLinks as item (item.name)}
@@ -106,7 +107,7 @@
             `/lms/settings`
           ) && NavClasses.active}"
         >
-          <Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" />
+          <Settings size={20} class="carbon-icon dark:text-white" />
           <p class="dark:text-white ml-2">Settings</p>
         </li>
       </a>

src/lib/components/LMS/components/Learning.svelte

@@ -3,7 +3,7 @@
   import { goto } from '$app/navigation';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
-  import { courseInProgress } from '$lib/components/Courses/store';
+  import { coursesInProgress } from '$lib/components/Courses/store';
 
   const gotoCourse = (id: string | undefined) => {
     if (!id) return;
@@ -11,14 +11,14 @@
   };
 </script>
 
-<section class="h-full mt-10 mb-20 xl:mt-2">
+<section class="h-full">
   <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Currently Learning</p>
   <div
-    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full h-fit xl:h-[516px] p-3"
+    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full lg:h-[40vh] p-3"
   >
-    {#if $courseInProgress.length > 0}
-      <div class="w-full h-full xl:h-[516px] flex flex-col justify-start">
-        {#each $courseInProgress as course}
+    {#if $coursesInProgress.length > 0}
+      <div class="w-full h-full flex flex-col justify-start overflow-y-auto">
+        {#each $coursesInProgress as course}
           <div class="p-5">
             <span class="flex flex-col md:flex-row gap-3 items-start pb-5">
               <img

src/lib/components/LMS/components/Schedule.svelte

@@ -29,7 +29,7 @@
   <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Your Schedule</p>
 
   <div
-    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 rounded w-full h-fit xl:h-[516px] p-3"
+    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 rounded w-full h-fit lg:h-[40vh] p-3 overflow-y-auto"
   >
     <div class="w-full h-fit hidden xl:flex items-center justify-center">
       <InlineCalendar bind:store {theme} />