Refactor "Sort By" Dropdown Styling for Better UI Consistency

[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

[arkid15r]

Thanks for noticing that. I believe it's post Next.js migration.
Assigning it to you if you want to fix that.

[arkid15r]

It's way over the deadline, any updates?

[arkid15r]

I believe you requested too many tasks for your capacity

Do you think you'll be able to handle all of them and just need more time?

[M-ayank2005]

Hey @arkid15r,
I'd love to work on this issue. If it's available, could you please assign it to me?
Thanks

[arkid15r]

Hey @arkid15r, I'd love to work on this issue. If it's available, could you please assign it to me? Thanks

Yes, we have a bunch of available issues to resolve. Let's focus on them one at a time -- #1424