From 6812895488555f2068991e3de3059976ce5eccc2 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 30 Sep 2023 10:53:38 +0100
Subject: [PATCH] CLASSROOMIO-T-180: Add better darkmode sidebar background

---
 src/lib/components/LMS/SideBar.svelte |   2 +-
 src/lib/components/Org/SideBar.svelte |   2 +-
 src/routes/lms/exercises/+page.svelte | 125 +++++++-------------------
 3 files changed, 34 insertions(+), 95 deletions(-)

diff --git a/src/lib/components/LMS/SideBar.svelte b/src/lib/components/LMS/SideBar.svelte
index bb71b26d..625f2c1d 100644
--- a/src/lib/components/LMS/SideBar.svelte
+++ b/src/lib/components/LMS/SideBar.svelte
@@ -54,7 +54,7 @@
     $menu.hidden
       ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
       : 'translate-x-0 absolute md:relative z-40'
-  } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)]`}
+  } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-neutral-900 h-[calc(100vh-48px)]`}
 >
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
diff --git a/src/lib/components/Org/SideBar.svelte b/src/lib/components/Org/SideBar.svelte
index e944d781..c9aca6c8 100644
--- a/src/lib/components/Org/SideBar.svelte
+++ b/src/lib/components/Org/SideBar.svelte
@@ -63,7 +63,7 @@
     $menu.hidden
       ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
       : 'translate-x-0 absolute md:relative z-40'
-  } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
+  } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-neutral-900 h-[calc(100vh-48px)] 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">
diff --git a/src/routes/lms/exercises/+page.svelte b/src/routes/lms/exercises/+page.svelte
index 9b59be45..3d69762f 100644
--- a/src/routes/lms/exercises/+page.svelte
+++ b/src/routes/lms/exercises/+page.svelte
@@ -1,11 +1,7 @@
 <script>
-  import { flip } from 'svelte/animate';
-  import { dndzone } from 'svelte-dnd-action';
   import { page } from '$app/stores';
   import Chip from '$lib/components/Chip/index.svelte';
 
-  const flipDurationMs = 300;
-
   let sections = [
     {
       id: 1,
@@ -86,32 +82,6 @@
       className: 'text-[#0F9D58] bg-[#E2FEEA]'
     }
   ];
-
-  function handleItemFinalize(columnIdx, newItems) {
-    let itemToWithNewStatus;
-
-    const { id } = sections[columnIdx];
-
-    // Set column in the UI
-    sections[columnIdx].items = newItems.map((item) => {
-      if (item.statusId !== id) {
-        itemToWithNewStatus = item;
-        item.statusId = id;
-      }
-
-      return item;
-    });
-  }
-
-  function handleDndConsiderCards(columnIdx) {
-    return function (e) {
-      sections[columnIdx].items = e.detail.items;
-    };
-  }
-
-  function handleDndFinalizeCards(columnIdx) {
-    return (e) => handleItemFinalize(columnIdx, e.detail.items);
-  }
 </script>
 
 <section class="w-full max-w-6xl mx-auto">
@@ -122,77 +92,46 @@
 
     <div>
       <div class="flex items-center w-full">
-        {#each sections as { id, title, items, className }, idx (id)}
+        {#each sections as { title, items, className }}
           <div
-            class="min-w-[355px] max-w-[355px] h-[516px] rounded-md bg-gray-100 dark:bg-black border border-gray-50 p-3 mr-3 overflow-hidden"
-            animate:flip={{ duration: flipDurationMs }}
+            class="min-w-[355px] max-w-[355px] h-[516px] rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-700 p-3 mr-3 overflow-hidden"
           >
             <div class="flex items-center mb-2 gap-2">
               <p class="dark:text-white ml-2 font-bold">{title}</p>
               <Chip value={items.length} {className} />
             </div>
-            <div
-              class="content pr-2 overflow-y-auto mb-3"
-              use:dndzone={{
-                items,
-                flipDurationMs,
-                dropTargetStyle: { outline: 'blue' }
-              }}
-              on:consider={handleDndConsiderCards(idx)}
-              on:finalize={handleDndFinalizeCards(idx)}
-            >
-              {#if items.length === 0}
-                <div
-                  class="h-[100px]"
-                  use:dndzone={{
-                    items: [], // Empty array for placeholder
-                    flipDurationMs,
-                    dropTargetStyle: { outline: 'blue' }
-                  }}
-                  on:consider={handleDndConsiderCards(idx)}
-                  on:finalize={handleDndFinalizeCards(idx)}
-                >
-                  <!-- Placeholder content -->
-                  <p class="text-gray-500 dark:text-gray-400 text-left p-2">
-                    drop your {title} exercises here
+            <div class="content pr-2 overflow-y-auto mb-3">
+              {#each items as item (item.id)}
+                <div class=" w-full my-2 mx-0 rounded-md bg-white dark:bg-neutral-800 py-3 px-3">
+                  <a
+                    class="flex w-full items-center cursor-pointer text-black mb-2"
+                    href={`${$page.url.pathname}?submissionId=${item.id}`}
+                  >
+                    <p class="dark:text-white ml-2 text-sm">
+                      {item.student.username}
+                    </p>
+                  </a>
+                  <a
+                    class="text-primary-700 dark:text-white text-md font-bold"
+                    href="{$page.url.pathname}?submissionId={item.id}"
+                  >
+                    {item.exercise.title}
+                  </a>
+                  <a
+                    class="flex items-center no-underline hover:underline text-black my-2"
+                    href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
+                      .id}/exercises/{item.exercise.id}"
+                  >
+                    <p class="dark:text-white text-grey text-sm">
+                      #{item.lesson.title}
+                      {`${item.tutor ? 'created by' + item.tutor.name : ''}`}
+                    </p>
+                  </a>
+                  <p class="dark:text-white text-gray-500 text-xs">
+                    {item.submittedAt}
                   </p>
                 </div>
-              {:else}
-                {#each items as item (item.id)}
-                  <div
-                    class=" w-full my-2 mx-0 rounded-md bg-white dark:bg-gray-600 py-3 px-3"
-                    animate:flip={{ duration: flipDurationMs }}
-                  >
-                    <a
-                      class="flex w-full items-center cursor-pointer text-black mb-2"
-                      href={`${$page.url.pathname}?submissionId=${item.id}`}
-                    >
-                      <p class="dark:text-white ml-2 text-sm">
-                        {item.student.username}
-                      </p>
-                    </a>
-                    <a
-                      class="text-primary-700 dark:text-white text-md font-bold"
-                      href="{$page.url.pathname}?submissionId={item.id}"
-                    >
-                      {item.exercise.title}
-                    </a>
-                    <a
-                      class="flex items-center no-underline hover:underline text-black my-2"
-                      href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
-                        .id}/exercises/{item.exercise.id}"
-                    >
-                      <p class="dark:text-white text-grey text-sm">
-                        #{item.lesson.title}
-                        {`${item.tutor ? 'created by' + item.tutor.name : ''}`}
-                      </p>
-                    </a>
-                    <p class="dark:text-white text-gray-500 text-xs">
-                      {item.submittedAt}
-                    </p>
-                  </div>
-                {/each}
-              {/if}
+              {/each}
             </div>
           </div>
         {/each}