From 0bed8b875b122d9e92ff894f193e0146909cf83c Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Mon, 26 May 2025 12:27:42 +1000
Subject: [PATCH] feat: visual improvements to search

---
 .../globalSearch/src/components/SearchBar.svelte     |  8 ++++----
 .../src/components/items/AssessmentItem.svelte       |  6 +++---
 .../src/components/items/ForumItem.svelte            |  6 +++---
 .../src/components/items/SubjectItem.svelte          | 12 ++++++------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/plugins/built-in/globalSearch/src/components/SearchBar.svelte b/src/plugins/built-in/globalSearch/src/components/SearchBar.svelte
index 0498c629..beee9464 100644
--- a/src/plugins/built-in/globalSearch/src/components/SearchBar.svelte
+++ b/src/plugins/built-in/globalSearch/src/components/SearchBar.svelte
@@ -322,11 +322,11 @@
                 {#if result.type === 'command'}
                   {@const staticItem = item as StaticCommandItem}
                   <button
-                    class="w-full flex items-center px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100
-                    {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+                    class="w-full flex items-center px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
+                    {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
                     onclick={() => executeItemAction(staticItem)}
                   >
-                    <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{staticItem.icon}</div>
+                    <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center bg-gradient-to-br from-[#FA5D5D] to-[#DC2F30] rounded-md text-white">{staticItem.icon}</div>
                     <span class="ml-4 text-lg truncate">
                       <HighlightedText text={staticItem.text} term={searchTerm} matches={result.matches} />
                     </span>
@@ -348,7 +348,7 @@
                   {:else}
                     <button
                       class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group 
-                      {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+                      {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px]' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
                       onclick={() => executeItemAction(dynamicItem)}
                     >
                       <div class="flex items-center w-full">
diff --git a/src/plugins/built-in/globalSearch/src/components/items/AssessmentItem.svelte b/src/plugins/built-in/globalSearch/src/components/items/AssessmentItem.svelte
index 55b88777..60896594 100644
--- a/src/plugins/built-in/globalSearch/src/components/items/AssessmentItem.svelte
+++ b/src/plugins/built-in/globalSearch/src/components/items/AssessmentItem.svelte
@@ -13,12 +13,12 @@
 </script>
 
 <button
-  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100
-  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
+  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
   onclick={onclick}
   >
   <div class="flex items-center w-full">
-    <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{item.metadata?.icon || '\uebee'}</div>
+    <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center bg-gradient-to-br from-[#59F675] to-[#1BC636] rounded-md text-white">{item.metadata?.icon || '\uebee'}</div>
     <span class="ml-4 text-lg truncate">
       <HighlightedText text={item.text} term={searchTerm} matches={matches} />
     </span>
diff --git a/src/plugins/built-in/globalSearch/src/components/items/ForumItem.svelte b/src/plugins/built-in/globalSearch/src/components/items/ForumItem.svelte
index 9a70a35a..2a593c50 100644
--- a/src/plugins/built-in/globalSearch/src/components/items/ForumItem.svelte
+++ b/src/plugins/built-in/globalSearch/src/components/items/ForumItem.svelte
@@ -13,12 +13,12 @@
 </script>
 
 <button
-  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100
-  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
+  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
   onclick={onclick}
   >
   <div class="flex items-center w-full">
-    <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">{item.metadata?.icon || '\uebe7'}</div>
+    <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center text-white bg-gradient-to-br from-[#59aaf6] to-[#1b62c6] rounded-md">{item.metadata?.icon || '\uebe7'}</div>
     <span class="ml-4 text-lg truncate">
       <HighlightedText text={item.text} term={searchTerm} matches={matches} />
     </span>
diff --git a/src/plugins/built-in/globalSearch/src/components/items/SubjectItem.svelte b/src/plugins/built-in/globalSearch/src/components/items/SubjectItem.svelte
index 4637c68c..3f13fb74 100755
--- a/src/plugins/built-in/globalSearch/src/components/items/SubjectItem.svelte
+++ b/src/plugins/built-in/globalSearch/src/components/items/SubjectItem.svelte
@@ -13,18 +13,18 @@ import type { IndexItem } from '../../indexing/types';
 </script>
 
 <button
-  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100
-  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
+  class="w-full flex flex-col px-2 py-1.5 rounded-lg select-none cursor-pointer group transition-colors duration-100 ring-0 dark:ring-zinc-600/50
+  {isSelected ? 'bg-zinc-900/5 dark:bg-white/10 text-zinc-900 dark:text-white dark:ring-[1px] dark:shadow' : 'hover:bg-zinc-500/5 dark:hover:bg-white/5 text-zinc-800 dark:text-zinc-200'}"
   onclick={onclick}
 >
-  <div class="flex items-center w-full {item.metadata.isActive ? 'opacity-100' : 'opacity-70'}">
-    <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center {isSelected ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400'}">
+  <div class="flex items-center w-full">
+    <div class="flex-none w-8 h-8 text-xl font-IconFamily flex items-center justify-center text-white {item.metadata?.type === 'assessments' ? 'bg-gradient-to-br from-[#fa915d] to-[#dc6c2f] rounded-md' : 'bg-gradient-to-br from-[#4FBBFE] to-[#2090F3] rounded-md'} {item.metadata.isActive ? 'opacity-100' : 'opacity-80'}">
       {item.metadata?.type === 'assessments' ? '\ueac3' : '\ueb4d'}
     </div>
-    <span class="ml-4 text-lg truncate">
+    <span class="ml-4 text-lg truncate {item.metadata.isActive ? 'opacity-100' : 'opacity-70'}">
       <HighlightedText text={item.text} term={searchTerm} matches={matches} />
     </span>
-    <span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400">
+    <span class="flex-none ml-auto text-xs text-zinc-500 dark:text-zinc-400 {item.metadata.isActive ? 'opacity-100' : 'opacity-70'}">
       {item.metadata?.subjectCode}
     </span>
   </div>