fix: implement consistent dropdown styling across practice page

[adarsh0011]

Related Issue(s)

• Fixes [Bug]: Inconsistent Dropdown Styling and Theme Mismatch on Practice Page #275

Summary

The dropdown filters on the practice problems page had 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. (Now Solved)

Changes

• Enhanced dropdown styling to match website theme and design system
• Added custom CSS for select elements with proper hover/focus states
• Implemented dark mode compatibility for all dropdown components
• Unified styling across Difficulties, Solved Status, Revision Status, Platform, and Companies dropdowns
• Added smooth transitions and improved visual consistency
• Fixed browser compatibility issues with custom dropdown styling
• Applied consistent spacing, typography, and color scheme

Screenshots (if applicable)

Before

After

Checklist

• I linked a related issue using Fixes #<issue_number>
• I tested locally and verified the changes work as expected
• I updated docs or comments where needed

Note: Please ensure that appropriate labels (like gssoc25 and level labels) are assigned to the merged PR.
Sometimes it may be missed by PA or mentors, so kindly double-check — otherwise, points won’t be counted.

[vercel]

@adarsh0011 is attempting to deploy a commit to the saumyayadav213-gmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

[adarsh0011]

@saumyayadav25, Please review the PR and add labels gssoc25 and level to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
dsamatetemplate	Ready	Preview	Comment	Sep 22, 2025 0:10am

[saumyayadav25]

Can you add before vs after screenshots of changes made in other files like interview experience and company wise list?

[adarsh0011]

Can you add before vs after screenshots of changes made in other files like interview experience and company wise list?

I don't get it what you are referring to...The issue i raised this PR for i have already attached before vs after screenshots.
And also issue i solved here is for /sheet page only

[saumyayadav25]

these are the changed files

[adarsh0011]

these are the changed files

1. globals.css - Enhanced Dropdown Styling System
   Why this file was changed:

• This is the global stylesheet that affects the entire application
• Needed to establish consistent dropdown styling rules that would apply across all components
• Required to ensure both light and dark mode compatibility

2. CompanyQuestionsList.tsx - Practice Page Dropdowns
   Why this file was changed:

• This component contains the main dropdown filters mentioned in the bug report (Difficulties, Status, Topics, Frequencies)
• These dropdowns were using basic styling that didn't match the website's theme

3. page.tsx - Form Dropdowns
   Why this file was changed:

• Contains dropdown selects for "Difficulty" and "Outcome" that were also affected by the styling inconsistency
• Needed to maintain consistency across different pages of the application

4. RichTextEditor.tsx - Editor Dropdowns
   Why this file was changed:

• Contains a text format dropdown (heading selector) that needed to match the new styling standard
• Part of the rich text editing interface that should feel integrated with the overall design

You can see files diff & before VS after code changes here:

[saumyayadav25]

merge conflicts