Using Global CSS root variables for better consistency

[AceHunterr]

Is your feature request related to a problem? Please describe.
The hardcoded values in the tsx files for the styles such as those present in the 'sx' prop can be replaced with global css root variables.

Describe the solution you'd like
Simply import the styles from the global CSS and therefore use the global root variables.

For example :

For this style

We have the output:

But by simply replacing the hardcoded backgroundcolor value with global variable root variable we can ensure much higher consistency for the CSS:

We get the same result:

Approach to be followed (optional)

1. Visit all the .tsx files in the src directory.
2. Ensure they have styles imported from global css something like this: import styles from '../../style/app.module.css';
3. Replace all the possible hard coded values with global css root variables.
4. Run the server before making the changes and after the changes making sure CSS do not gets disrupted for any component.

Potential internship candidates

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

• Student Internship Programs talawa#359

[github-actions]

Congratulations on making your first Issue! 🎊 If you haven't already, check out our Contributing Guidelines and Issue Reporting Guidelines to ensure that you are following our guidelines for contributing and making issues.

[AceHunterr]

May I work on this issue?

[monk0707]

@palisadoes Can I work on this issue?