Skip to content

fix: improve Sort By dropdown styling consistency #2363

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 8, 2025
Merged

fix: improve Sort By dropdown styling consistency #2363

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions frontend/src/components/SortBy.tsx
View file
Open in desktop
Copy link
Collaborator

@kasya kasya Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make sure the padding on right and left side match? Right now it's way bigger on the left:

Image Image

Copy link
Contributor Author

@mrkeshav-05 mrkeshav-05 Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed the padding issue - added balanced px-3 to the container

Screenshot 2025-10-06 at 3 44 19 PM image

Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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}
Expand All @@ -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>
Expand Down