Refactor CSS files in src/screens/UserPortal

[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

Additional information:

1. The foundational work for this was completed in this PR:
   • Chore/css changes #2466
2. 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
3. The desired single CSS file is: - src/style/app.module.css
4. Use variable names that describe the function of the color and not the color itself.
   1. For example --search-button-bg is much better than --light-blue
   2. NoMongo: Fix Stylesheet in Anticipation of Dark Mode #3296

Use no CSS in assets/css/app.css

The challenge:

The goal is to convert the CSS file in this subdirectory and all the components related to this screen to use this new design pattern. This means that:

1. All CSS files in this subdirectory and all the CSS files in related components must be merged into the global CSS file using pre-existing CSS.
2. All CSS files in this subdirectory and all the CSS files in related components must be deleted after the merge.
3. The remaining relevant files in this subdirectory must only reference the global CSS file.
4. All the CSS files in the related components of this subdirectory must adhere to the same guidelines.
5. Use variables for your CSS wherever possible. There may be predefined colors that you can use.

Important Information Regarding The Green Color

1. We are migrating away from the green theme as part of our support for color blind users.
2. Take cues from other similar elements in this file and the PR mentioned in the issue.
   1. Chore/css changes #2466
   2. https://www.figma.com/design/dmKt00m9GVSeA1nebnkxql/Untitled?node-id=0-1&node-type=canvas&t=TPzfh1DE9IxjzsEe-0
3. There are appropriate blue/grey colors that have been used in other screens

Reference

1. fixed:2527 Refactored CSS files in src/screens/UserPortal #3161
2. fixed:2527 Refactored CSS files in src/screens/UserPortal #3012

[Rudresh1604]

I’d like to work on the CSS migration issue. I’m confident I can handle it effectively. Could you assign it to me?

[palisadoes]

I’d like to work on the CSS migration issue. I’m confident I can handle it effectively. Could you assign it to me?

Pay special attention to this in the issue's description

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[Shahmaz0]

I want to work on this issue, please assign it to me.