From 0b286619ae3a716fad5d98554c702a146bf78635 Mon Sep 17 00:00:00 2001
From: "aditya.chandel" <8075870+adityachandelgit@users.noreply.github.com>
Date: Tue, 2 Dec 2025 20:58:35 -0700
Subject: [PATCH] Highlight color

---
 .../book-browser/book-filter/book-filter.component.ts         | 4 +---
 .../layout/component/layout-menu/app.menuitem.component.scss  | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/booklore-ui/src/app/features/book/components/book-browser/book-filter/book-filter.component.ts b/booklore-ui/src/app/features/book/components/book-browser/book-filter/book-filter.component.ts
index 56c1042a..c6d03053 100644
--- a/booklore-ui/src/app/features/book/components/book-browser/book-filter/book-filter.component.ts
+++ b/booklore-ui/src/app/features/book/components/book-browser/book-filter/book-filter.component.ts
@@ -15,7 +15,6 @@ import {UserService} from '../../../../settings/user-management/user.service';
 import {MagicShelf} from '../../../../magic-shelf/service/magic-shelf.service';
 import {BookRuleEvaluatorService} from '../../../../magic-shelf/service/book-rule-evaluator.service';
 import {GroupRule} from '../../../../magic-shelf/component/magic-shelf-component';
-import {Tooltip} from 'primeng/tooltip';
 
 type Filter<T> = { value: T; bookCount: number };
 
@@ -152,8 +151,7 @@ function getReadStatusName(status?: ReadStatus | null): string {
     AsyncPipe,
     TitleCasePipe,
     FormsModule,
-    SelectButton,
-    Tooltip,
+    SelectButton
   ]
 })
 export class BookFilterComponent implements OnInit, OnDestroy {
diff --git a/booklore-ui/src/app/shared/layout/component/layout-menu/app.menuitem.component.scss b/booklore-ui/src/app/shared/layout/component/layout-menu/app.menuitem.component.scss
index 18b4e928..8190e54a 100644
--- a/booklore-ui/src/app/shared/layout/component/layout-menu/app.menuitem.component.scss
+++ b/booklore-ui/src/app/shared/layout/component/layout-menu/app.menuitem.component.scss
@@ -49,13 +49,13 @@
   cursor: pointer;
 
   &:hover {
-    background-color: var(--p-surface-700);
+    background-color: var(--p-surface-800);
     border-radius: 8px;
   }
 }
 
 :host(.active-menuitem) .menu-item-container {
-  background-color: var(--p-surface-800);
+  background-color: color-mix(in srgb, var(--p-primary-300), transparent 92%);
   border-radius: 8px;
 }