From baed8f00959de87ff1d2db320953e0df41543629 Mon Sep 17 00:00:00 2001
From: Ajit Mehrotra <ajitmehrotra2009@gmail.com>
Date: Tue, 9 Dec 2025 13:43:33 -0500
Subject: [PATCH] fix(notifications): override notification bell hover to
 maintain consistency with legacy webGUI

---
 web/app.config.ts                            | 8 ++++++++
 web/src/components/Notifications/Sidebar.vue | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/app.config.ts b/web/app.config.ts
index 789ffe1c7..4b223de73 100644
--- a/web/app.config.ts
+++ b/web/app.config.ts
@@ -1,3 +1,11 @@
+// Objective: avoid hard-coded custom colors wherever possible, letting our theme system manage
+// styling consistently. During the migration from the legacy WebGUI, some components still depend
+// on specific colors to maintain visual continuity. This config file centralizes all temporary
+// overrides required for that transition.
+//
+// Pending migration cleanup:
+// - Notifications/Sidebar.vue → notification bell has temporary custom hover color to match legacy styles.
+
 export default {
   ui: {
     colors: {
diff --git a/web/src/components/Notifications/Sidebar.vue b/web/src/components/Notifications/Sidebar.vue
index 57693f790..542881e53 100644
--- a/web/src/components/Notifications/Sidebar.vue
+++ b/web/src/components/Notifications/Sidebar.vue
@@ -160,7 +160,7 @@ const tabs = computed(() => [
     <UButton
       variant="ghost"
       color="neutral"
-      class="text-inverted hover:text-current"
+      class="text-inverted hover:bg-[color-mix(in_oklab,hsl(var(--accent))_20%,transparent)]"
       @click="
         () => {
           isOpen = true;