Update the UI for Professor and Module Filters in Courses

[vk0812]

Problem
The current user interface for the filters related to professors and modules on the course resources page lacks a visually appealing design. The filters are represented as simple white textboxes without any design elements. This issue aims to update the UI for these filters, introducing a minimalist and aesthetically pleasing design that aligns with the overall theme of ResoBin.

Objective
The goal of this issue is to enhance the user experience on the course resources page by providing a clean and minimalist design for the professor and module filters. The updated design should seamlessly integrate with the existing theme of ResoBin.

Proposed Solution

1. Design Concept

   • Propose a minimalist design concept for the professor and module filters that complements the overall theme of ResoBin.
   • Consider elements such as color scheme, typography, and layout to create a cohesive and visually pleasing design.

2. Code Implementation

   • Once the design concept is approved, proceed with the code implementation to update the UI for the professor and module filters.
   • Ensure that the code is modular, easy to maintain, and aligns with the coding standards of the project.

Expected Outcome

• A visually appealing design concept for the professor and module filters that enhances the overall aesthetics of the course resources page.
• Code implementation that seamlessly integrates the updated UI into the existing ResoBin theme.

Note to Developers
Start by proposing a minimalist design concept that respects the existing ResoBin theme and improves the visual appeal of the professor and module filters. Once the design is approved, proceed with the code implementation, ensuring that the updates are in line with project standards. Collaboration with the community is encouraged for feedback and support throughout this enhancement process.

[abhaychandra123]

Can the expectation be elaborated ? What changes in UI are expected?

[AWorldOfMysteries]

Another aspect of it seems to be an issue.

Issue:
The width of the Select container filters changes after selecting an option. This leads to inconvenience to the user while selecting from the filters again.
Specifically after the user selects the "All" option, he/she is unable to read options due to the very small width of the dropdown container.

Expected Behaviour: The width should remain unchanged after selection of an option.

Pls. ensure the validity of this issue and provide feedback if I might be overlooking any pertinent details.

[vk0812]

Yes agreed this is an issue, you can solve this too along with the UI issue and raise a combined PR @AWorldOfMysteries

[AWorldOfMysteries]

@vk0812
Below is the proposed design for the professor and module filters. Please provide feedback.

[AWorldOfMysteries]

I have made it theme consistent and have fixed the changing width issue as well.

The one thing I am still not able to figure out is the dropdown styling. I don't know for what reason the styles are not getting applied: