NoMongo: Fix Stylesheet in Anticipation of Dark Mode

[palisadoes]

A simple "search and replace" is not enough. Please read carefully

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

1. We will eventually implement a Light / Dark Mode option in the Web UI
2. To make this easier we need to review the single CSS style sheet to remove references to colors and replace them with the role of the color in components or screens. For example:
   1. Instead of --red-delete-bg use --delete-button-bg
   2. Instead of --red-delete-text use --delete-button-text
   3. Instead of --blue-primary use a name that describes the role of the color like --margin-color-for-xxxxxxxx where xxxxxxx is the component
3. This will mean that you'll have to go through all the use cases for each color and add additional variables with the same or different colors according to the role. For example:
   1. References to --brown-color occur 25 times in different roles in different screens and components.
   2. References to --light-dark-green occur 3 times in similar situations. The role in different screens and components should be used instead.
   3. References to --black-color occur 36 times in similar situations. The role in different screens and components should be used instead.
4. In the end there must be no references to colors, only to roles. Therefore when we add a new app-dark.module.css file for Dark Mode the process will be much easier.
5. The CSS file can be found here
   1. https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/style/app.module.css.

Additional context

Potential internship candidates

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

• Student Internship Programs talawa#359

[AQIB-NAWAB]

Hy @palisadoes, can i work on this issue ?

[palisadoes]

Also remove any references that are unused

[rahulch07]

Please coordinate in the #talawa-projects slack channel, and allow others to collaborate in the resulting PR.

I will collaborate with @hustlernik to devise a strategy for working more efficiently. Once finalized, we’ll share it so others can follow as well.

[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.

[palisadoes]

@hustlernik @rahulch07 Have you been able to work on this? I just had to close a duplicate issue related to this

[rahulch07]

@palisadoes
Yes currently working on migrating OrganizationPeople.tsx along with this I will also refactor the CSS of this component.

Steps:

1. Create a new CSS file app-fixed.module.css(this file will only have css properties that follow proper variable naming)
2. copy component related css only to this file and use this in css file instead of app.module.css in that component

Likewise this can be followed with all the components and others can also do this on the components they are working.
once CSS is completely refactored this file can be renamed ass app.module.css

would this work?

[palisadoes]

Yes. Thanks

[hustlernik]

@palisadoes I am working to refactor the CSS for screens whose mongo to postgres migration is completed.

[palisadoes]

Thanks.

1. There are going to be many changes. Don't wait to complete all in one PR.
2. Please submit successive PRs with small batches of files.
3. This will help guide others to follow the new paradigm faster.