Figma: Refactor Search Bar CSS

[palisadoes]

Introduction

To improve the UI/UX of Talawa-Admin we have been working on:

1. making the application more suitable to color blind users
2. streamlining all CSS into a single global file

Post a video of your work in the PR

1. This is important for reviewers to understand the solution
2. Pay attention to the Additional Information below.

Is your feature request related to a problem? Please describe.

1. There is no consistent approach to Search bars and associated drop downs across the application
2. There needs to be a standard using usable code and CSS

Additional Information

1. When in doubt about colors, take cues from other similar elements in this file and the PR mentioned in the issue.
   1. https://www.figma.com/design/dmKt00m9GVSeA1nebnkxql/Untitled?node-id=0-1&node-type=canvas&t=TPzfh1DE9IxjzsEe-0
2. The desired single CSS file for your changes is:
   1. src/style/app.module.css
3. Use no CSS in:
   1. assets/css/app.css
4. Use CSS variable names that describe the function of the color and not the color itself. This will help with future attempts to having Dark Mode.
   1. For example --search-button-bg is much better than --light-blue
   2. NoMongo: Fix Stylesheet in Anticipation of Dark Mode #3296
5. Buttons, and dropdowns must only have shadows when there is a mouse hover. Their color must not change
6. Search boxes must only have shadows when selected

Additional context

Potential internship candidates

Please read this if you are planning to apply for a Palisadoes Foundation internship

• Student Internship Programs talawa#359

[eizadhamdan]

@palisadoes please assign this issue to me

[MayankJha014]

@palisadoes Assign this to me