Problem statement

Description:

The dropdown filters on the practice problems page have inconsistent styling and do not match the website's overall theme. The current implementation uses default browser stylings or a minimal custom style that lacks alignment with the design system, creating a visually disjointed user experience.

Problem Details:

1. Dropdown elements use native OS styling instead of custom CSS
2. Visual design doesn't match the website's color scheme and typography
3. Inconsistent spacing and sizing compared to other UI components
4. Missing hover/focus states that follow the website's interaction patterns
5. No dark mode compatibility for the dropdown components

Affected Elements (from screenshot):

• "Difficulties" dropdown (Y icon)
• "Solved Status" dropdown (v icon)
• "Revision Status" dropdown (v icon)
• "Platform" dropdown (v icon)
• "AllCompanies" dropdown (v icon)

Steps to reproduce

Expected outcome

Expected Behavior:

All dropdown filters should:

• Use a consistent custom styling that matches the website's theme
• Follow the same color palette, typography, and spacing as other components
• Include proper hover, focus, and active states
• Be responsive and accessible (proper contrast, keyboard navigation)
• Support both light and dark mode themes
• Maintain visual consistency across different browsers

Screenshots / recordings (if applicable)

@saumyayadav25 , Can you assign this issue to me & add label such as gssoc'25 & level 3

Checklist

• I searched existing issues and did not find a duplicate
• I am willing to submit a PR to fix this