fix: refactor Sort By dropdown styling for better UI consistency

- Remove default blue outline from Select component
- Eliminate hover background highlighting in light mode
- Add balanced padding to improve visual spacing
- Maintain proper focus states for accessibility
- Support seamless light and dark mode themes
- Simplify background override approach per code review feedback

Fixes #1372

Author: mrkeshav-05

frontend/src/components/SortBy.tsx

@@ -15,25 +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-100 dark:bg-[#323232] border border-gray-300 dark:border-gray-600 shadow-sm hover:shadow-md transition-all duration-200">
+      <div className="inline-flex h-12 items-center rounded-lg border border-gray-300 bg-gray-100 px-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-medium text-sm text-gray-700 dark:text-gray-300 pl-[1.4rem] w-auto select-none',
+            label: 'font-medium text-sm text-gray-700 dark:text-gray-300 w-auto select-none pe-0',
             trigger:
-              'bg-transparent hover:bg-transparent dark:bg-transparent dark:hover:bg-transparent focus:bg-transparent data-[hover=true]:bg-transparent data-[focus=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-colors duration-200 !bg-transparent',
-            value:
-              'text-gray-800 dark:text-gray-200 font-medium',
-            selectorIcon: 
-              'text-gray-500 dark:text-gray-400 transition-transform duration-200',
-            popoverContent: 
+              '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'
+            listbox: 'p-0 focus:outline-none',
           }}
           selectedKeys={sortOptions
             .filter((item: { key: string; label: string }) => item.key === selectedSortOption)
@@ -46,8 +42,7 @@ const SortBy = ({
             <SelectItem
               key={option.key}
               classNames={{
-                base: 
-                  'text-sm text-gray-700 dark:text-gray-300 hover:bg-transparent dark:hover:bg-[#404040] 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]',
+                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}
@@ -67,7 +62,7 @@ const SortBy = ({
         >
           <button
             onClick={() => onOrderChange(selectedOrder === 'asc' ? 'desc' : 'asc')}
-            className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-gray-100 dark:bg-[#323232] border border-gray-300 dark:border-gray-600 p-0 shadow-sm hover:shadow-md hover:bg-gray-200 dark:hover:bg-[#404040] focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-500 focus:ring-offset-1 transition-all duration-200"
+            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