From bdf09575efb25462b7312eafaabc0641a3faac9b Mon Sep 17 00:00:00 2001
From: "mrkeshav.05" <keshavpundhir69@gmail.com>
Date: Mon, 6 Oct 2025 02:18:37 +0530
Subject: [PATCH] fix: improve Sort By dropdown styling consistency

- Remove blue outline and inconsistent hover backgrounds
- Add proper focus/active states styles to match the design system
- Improve light/dark mode theme integration
- Fix trigger background blending issues

Fixes #1372
---
 frontend/src/components/SortBy.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/SortBy.tsx b/frontend/src/components/SortBy.tsx
index 46f7102f0d..e2615cac44 100644
--- a/frontend/src/components/SortBy.tsx
+++ b/frontend/src/components/SortBy.tsx
@@ -15,17 +15,21 @@ const SortBy = ({
   return (
     <div className="flex items-center gap-2">
       {/* Sort Attribute Dropdown */}
-      <div className="inline-flex h-12 items-center rounded-lg bg-gray-200 dark:bg-[#323232]">
+      <div className="inline-flex h-12 items-center rounded-lg border border-gray-300 bg-gray-100 pl-3 shadow-sm transition-all duration-200 hover:shadow-md dark:border-gray-600 dark:bg-[#323232]">
         <Select
           className=""
           labelPlacement="outside-left"
           size="md"
           label="Sort By :"
           classNames={{
-            label:
-              'font-small text-sm text-gray-600 hover:cursor-pointer dark:text-gray-300 pl-[1.4rem] w-auto',
-            trigger: 'bg-gray-200 dark:bg-[#323232] pl-0 text-nowrap w-32',
-            popoverContent: 'text-md min-w-36 dark:bg-[#323232] rounded-none p-0',
+            label: 'font-medium text-sm text-gray-700 dark:text-gray-300 w-auto select-none pe-0',
+            trigger:
+              'bg-transparent data-[hover=true]:bg-transparent focus:outline-none focus:ring-0 border-none shadow-none text-nowrap w-32 min-h-8 h-8 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-0',
+            value: 'text-gray-800 dark:text-gray-200 font-medium',
+            selectorIcon: 'text-gray-500 dark:text-gray-400 transition-transform duration-200',
+            popoverContent:
+              'bg-white dark:bg-[#2a2a2a] border border-gray-200 dark:border-gray-600 rounded-md shadow-lg min-w-36 p-1 focus:outline-none',
+            listbox: 'p-0 focus:outline-none',
           }}
           selectedKeys={sortOptions
             .filter((item: { key: string; label: string }) => item.key === selectedSortOption)
@@ -38,7 +42,7 @@ const SortBy = ({
             <SelectItem
               key={option.key}
               classNames={{
-                base: 'text-sm hover:bg-[#D1DBE6] dark:hover:bg-[#454545] rounded-none px-3 py-0.5',
+                base: 'text-sm text-gray-700 dark:text-gray-300 hover:bg-transparent dark:hover:bg-transparent focus:bg-gray-100 dark:focus:bg-[#404040] focus:outline-none rounded-sm px-3 py-2 cursor-pointer transition-colors duration-150 data-[selected=true]:bg-blue-50 dark:data-[selected=true]:bg-blue-900/20 data-[selected=true]:text-blue-600 dark:data-[selected=true]:text-blue-400 data-[focus=true]:bg-gray-100 dark:data-[focus=true]:bg-[#404040]',
               }}
             >
               {option.label}
@@ -58,17 +62,17 @@ const SortBy = ({
         >
           <button
             onClick={() => onOrderChange(selectedOrder === 'asc' ? 'desc' : 'asc')}
-            className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-gray-200 p-0 shadow-xs hover:bg-gray-300 dark:bg-[#323232] dark:text-gray-300 dark:hover:bg-[#454545]"
+            className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-gray-100 p-0 shadow-sm transition-all duration-200 hover:bg-gray-200 hover:shadow-md focus:ring-2 focus:ring-gray-300 focus:ring-offset-1 focus:outline-none dark:border-gray-600 dark:bg-[#323232] dark:hover:bg-[#404040] dark:focus:ring-gray-500"
           >
             {selectedOrder === 'asc' ? (
               <FontAwesomeIcon
                 icon={faArrowUpWideShort}
-                className="h-4 w-4 text-gray-600 dark:text-gray-200"
+                className="h-4 w-4 text-gray-600 dark:text-gray-300"
               />
             ) : (
               <FontAwesomeIcon
                 icon={faArrowDownWideShort}
-                className="h-4 w-4 text-gray-600 dark:text-gray-200"
+                className="h-4 w-4 text-gray-600 dark:text-gray-300"
               />
             )}
           </button>