CLASSROOMIO-T-95: Upload finishing touches

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

@@ -3,6 +3,7 @@
   import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
   import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
+  import { NavClasses } from '$lib/utils/constants/reusableClass';
   import NavIcons from './NavIcons.svelte';
 
   export let handleClick = () => {};
@@ -12,8 +13,6 @@
   export let total = 0;
   // export let subMenuItems = [];
 
-  let activeClass = 'bg-gray-200 dark:bg-gray-800';
-
   function onClick() {
     handleClick();
   }
@@ -25,8 +24,8 @@
 
 <div class="">
   <button
-    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isGroupActive &&
-      activeClass} w-[95%]"
+    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isGroupActive &&
+      NavClasses.active} w-[95%]"
     tabindex="0"
     on:click={onClick}
   >

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

@@ -24,7 +24,7 @@
   import { course } from '$lib/components/Course/store';
   import { updateCourse } from '$lib/utils/services/courses';
   import { profile } from '$lib/utils/store/user';
-  import { currentOrgPath } from '$lib/utils/store/org';
+  import { NavClasses } from '$lib/utils/constants/reusableClass';
   import { isMobile } from '$lib/utils/store/useMobile';
 
   // export let lessonId;
@@ -32,7 +32,6 @@
   export let isStudent = null;
 
   let show = null;
-  let activeClass = 'bg-gray-200 dark:bg-gray-800';
   let isLessonActive = false;
 
   function handleMainGroupClick(href) {
@@ -151,7 +150,7 @@
 
 <div class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}">
   {#if show}
-    <div class="relative h-full dark:bg-gray-700">
+    <div class="relative h-full dark:bg-gray-800">
       <!-- <PageNav title="Back to courses" paddingClass="pl-2" titleSize="text-md">
         <slot:fragment slot="image">
           <Avatar src={$course.logo} />
@@ -202,12 +201,12 @@
                     <div
                       class="flex items-center py-3 px-4 rounded hover:bg-gray-200 dark:hover:bg-gray-800 w-full {(
                         path || $page.url.pathname
-                      ).includes(item.id) && activeClass}"
+                      ).includes(item.id) && NavClasses.active}"
                     >
                       <TextChip
                         value={getLectureNo(index + 1)}
                         className="bg-blue-200 text-blue-600 text-xs mr-2"
-                        size="xl"
+                        size="sm"
                         shape="rounded-full"
                       />
                       <span>{item.title}</span>

src/lib/components/Courses/components/Card/Loader.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="root w-72 border bg-gray-100 dark:bg-gray-700 mr-4 mb-4 rounded-md transition ease-in-out relative"
+  class="root w-72 border bg-gray-100 dark:bg-gray-800 mr-4 mb-4 rounded-md transition ease-in-out relative"
 >
   <SkeletonPlaceholder style="width: 100%; height: 10rem;" />
   <div class="p-3 pb-0">

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

@@ -47,7 +47,7 @@
 
 <a rel="prefetch" href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`} class=" text-black">
   <div
-    class="root w-80 border bg-gray-100 dark:bg-gray-700 sm:mr-4 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative"
+    class="root w-80 border bg-gray-100 dark:bg-gray-800 sm:mr-4 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative"
   >
     {#if !isOnLandingPage}
       <Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}>

src/lib/components/LMS/SideBar.svelte

@@ -11,8 +11,7 @@
   import Avatar from '$lib/components/Avatar/index.svelte';
   import { currentOrg } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
-
-  let activeClass = 'bg-gray-200 dark:bg-gray-800';
+  import { NavClasses } from '$lib/utils/constants/reusableClass';
 
   function isActive(pagePath, itemPath) {
     const pageLinkItems = pagePath.split('/');
@@ -77,7 +76,7 @@
               class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
                 $page.url.pathname,
                 `${item.link}`
-              ) && activeClass}"
+              ) && NavClasses.active}"
             >
               <svelte:component
                 this={item.icon}
@@ -101,10 +100,10 @@
       </a>
       <a href="/lms/settings" class="text-black">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isActive(
+          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
             $page.url.pathname,
             `/lms/settings`
-          ) && activeClass}"
+          ) && NavClasses.active}"
         >
           <Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" />
           <p class="dark:text-white ml-2">Settings</p>

src/lib/components/Navigation/app.svelte

@@ -46,7 +46,7 @@
           }}
           size="small"
         >
-          <CourseIcon fill="#fff" />
+          <CourseIcon color="#fff" />
         </IconButton>
       {/if}
       <a

src/lib/components/Org/Quiz/QuizCard.svelte

@@ -1,5 +1,6 @@
 <script>
   import pluralize from 'pluralize';
+  import { ImageLoader } from 'carbon-components-svelte';
   import OverflowMenuHorizontalIcon from 'carbon-icons-svelte/lib/OverflowMenuHorizontal.svelte';
   import dayjs from 'dayjs';
   import relativeTime from 'dayjs/plugin/relativeTime';
@@ -33,7 +34,7 @@
         label: 'Rename',
         onClick() {
           onRename(quiz);
-        },
+        }
       },
       // {
       //   label: 'Make a copy',
@@ -45,8 +46,8 @@
         label: 'Delete',
         onClick() {
           onDelete(quiz);
-        },
-      },
+        }
+      }
     ];
   }
 
@@ -55,12 +56,11 @@
 
 {#if quiz}
   <div
-    class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-700 mr-4 mb-5 relative flex p-3"
+    class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-800 mr-4 mb-5 relative flex p-3"
   >
-    <img
+    <ImageLoader
       src={themeImages[quiz.theme]?.card || themeImages.standard.card}
       alt="quiz-card"
-      class=""
       style="max-width: 300px;"
     />
 
@@ -70,11 +70,7 @@
           <a href="{$currentOrgPath}/quiz/{quiz.id}">{quiz.title}</a>
         </h4>
 
-        <Dropdown
-          options={getOptions()}
-          classNames="absolute top-4 right-4"
-          isIcon={true}
-        >
+        <Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}>
           <div class="p-1 rounded-full bg-gray-200 dark:bg-gray-600">
             <OverflowMenuHorizontalIcon size={20} class="carbon-icon active" />
           </div>

src/lib/components/Org/SideBar.svelte

@@ -13,8 +13,7 @@
   import Avatar from '$lib/components/Avatar/index.svelte';
   import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
-
-  let activeClass = 'bg-gray-200 dark:bg-gray-800';
+  import { NavClasses } from '$lib/utils/constants/reusableClass';
 
   const menuItems = [
     {
@@ -55,7 +54,9 @@
   }
 </script>
 
-<aside class="root bg-gray-100 dark:bg-gray-700 h-full">
+<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"
+>
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
       {#if $currentOrg.avatar_url && $currentOrg.name}
@@ -76,10 +77,10 @@
         {#each menuItems as menuItem}
           <a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
             <li
-              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isActive(
+              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
                 $page.url.pathname,
                 `${$currentOrgPath}${menuItem.path}`
-              ) && activeClass}"
+              ) && NavClasses.active}"
             >
               {#if menuItem.path === ''}
                 <HomeIcon color="#7A797D" />
@@ -115,10 +116,10 @@
       </a>
       <a href="{$currentOrgPath}/settings" class="text-black no-underline">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isActive(
+          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
             $page.url.pathname,
             `${$currentOrgPath}/settings`
-          ) && activeClass}"
+          ) && NavClasses.active}"
         >
           <Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" />
           <p class="dark:text-white ml-2">Settings</p>

src/lib/components/PageNav/index.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <div
-  class="header dark:bg-gray-700 bg-white flex items-center justify-between {!disableSticky &&
+  class="header dark:bg-gray-800 bg-white flex items-center justify-between {!disableSticky &&
     'sticky'} {paddingClass} {dynamicRootClass}"
   style={overidableStyle}
 >
@@ -29,7 +29,7 @@
       {#if !enterEditTitleMode}
         <button class="w-full" on:click={() => (enterEditTitleMode = true)}>
           <h4
-            class="editable-title hover:bg-gray-100 dark:bg-gray-700 px-3 rounded-md overflow-ellipsis"
+            class="editable-title hover:bg-gray-100 dark:bg-gray-800 px-3 rounded-md overflow-ellipsis"
           >
             {title}
           </h4>

src/lib/components/PrimaryButton/index.svelte

@@ -1,6 +1,7 @@
 <script>
-  import { Moon } from 'svelte-loading-spinners';
+  // import { Moon } from 'svelte-loading-spinners';
   import { VARIANTS, VARIANTS_CLASS } from './constants';
+  import { Loading } from 'carbon-components-svelte';
 
   export let label = '';
   export let className = '';
@@ -33,7 +34,8 @@
   disabled={isDisabled}
 >
   {#if isLoading}
-    <Moon size="20" color="#1d4ed8" unit="px" duration="1s" />
+    <Loading withOverlay={false} small />
+    <!-- <Moon size="20" color="#1d4ed8" unit="px" duration="1s" /> -->
   {:else if !!label}
     {label}
   {:else}

src/lib/utils/constants/reusableClass.js

@@ -0,0 +1,4 @@
+export const NavClasses = {
+  active: 'bg-gray-200 dark:bg-gray-700',
+  background: ''
+};

src/routes/courses/[id]/lessons/+page.svelte

@@ -135,12 +135,12 @@
       {#each $lessons as lesson (lesson.id)}
         <div
           bind:this={ref}
-          class="h-32 relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mb-4 flex items-center dark:bg-gray-700"
+          class="h-32 relative m-auto rounded-md border-2 border-gray-200 py-3 px-5 mb-4 flex items-center dark:bg-gray-800"
         >
           <div class="mr-5">
             <TextChip
               value={getLessonOrder(lesson.id)}
-              size="xl"
+              size="sm"
               shape="rounded-full"
               className="bg-blue-200 text-blue-600 text-xs"
             />

src/routes/courses/[id]/lessons/[...lessonParams]/+page.server.js

@@ -69,14 +69,13 @@ const uploadToMuse = (s3Data, fileName, lessonId, fileUrl) => {
           .eq('id', lessonId)
           .select();
         if (error) {
-          console.log('Error updating supabase configs');
+          console.log('Error updating lesson', error);
         }
-        console.log('update error', error);
-        console.log('update data', data, data[0].videos);
+        console.log('update data', data);
       }
     })
     .catch(function (error) {
-      console.log('Upload error', error);
+      console.log('Upload to Muse failed', error);
     });
 };
 

src/routes/courses/[id]/submissions/+page.svelte

@@ -248,7 +248,7 @@
       <div class="flex items-center w-full">
         {#each sections as { id, title, items }, idx (id)}
           <div
-            class="section rounded-md bg-gray-100 dark:bg-gray-700 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
+            class="section rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
             animate:flip={{ duration: flipDurationMs }}
           >
             <div class="flex items-center mb-2">