Skip to content

Refactor "Sort By" Dropdown Styling for Better UI Consistency #1372

@rishyym0927

Description

@rishyym0927

Description:
Currently, when the "Sort By" dropdown is clicked, the selected option (e.g., Relevance) receives a blue-colored outline which feels inconsistent with the overall UI design. Additionally, the dropdown box styling does not align well with the rest of the interface and looks visually unappealing.

Expected Behavior:

  • The dropdown should have a cleaner, more integrated look with the existing UI.
  • Focus/active states should be styled to match the design system (e.g., neutral borders or subtle shadows instead of default blue outlines).

Suggested Changes:

  • Remove or customize the blue outline using focus:outline-none and apply custom focus styles if needed.
  • Redesign the dropdown container with padding, border, and background styles that fit better with the current theme (dark/light mode support if applicable).
  • Ensure accessibility is maintained after style changes.

Screenshots (if applicable):

Recording.2025-04-14.200702.mp4

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions