CLASSROOMIO-T-95: Upload finishing touches

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>