Figma: Events Page Violates The Figma Style Guide

[palisadoes]

Post a video of your work in the PR

This will require someone with significant prior PRs in the repo

Describe the bug

1. Events Page Violates The Figma Style Guide

To Reproduce
Steps to reproduce the behavior:

1. Style Related
   1. Login to the app
   2. Select an organization
   3. Select Events
   4. The figma guide is not followed fully
2. Functionality
   1. The blocked user functionality doesn't work (MAKE THIS A SEPARATE PR)

Expected behavior

1. The screens shown must conform to Figma
2. This must apply to the following were relevant:
   1. Users
   2. Admins
   3. SuperAdmins
3. Tests must be written to ensure this does not happen again
4. The CSS must be consolidated into this file using variables wherever possible
   1. src/style/app.module.css

Other

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. https://www.figma.com/design/dmKt00m9GVSeA1nebnkxql/Untitled?node-id=0-1&node-type=canvas&t=TPzfh1DE9IxjzsEe-0
3. Use a variable instead. There are appropriate blue/grey colors that have been used in other screens

Actual behavior

• See screenshots

Screenshots

If applicable, add screenshots to help explain your problem.

1. Screen
   
2. Screen
   

Additional details

1. Background color guide - Use these instead of those that may be different in sample pages below. Our Figma design is not consistent
   
2. Figma
   

Potential internship candidates

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

• Student Internship Programs talawa#359

[AceHunterr]

@palisadoes may I work on this issue? I have already worked with fixing some UI bugs for this page

[Cioppolo14]

Our policy is to assign no more than two issues to each contributor across all repositories. This way everyone gets a chance to participate in the projects. We sometimes give exceptions for more urgent cases and sometimes we lose track, but the policy stands. You have reached your limit, please wait until your existing issues are closed before requesting more issues. You could unassign yourself from one of the other issues too.

[hustlernik]

@palisadoes I want to take this up.

[hustlernik]

@palisadoes I have almost resolved style related issue. Do I need to write test, if yes, then what type of?

[palisadoes]

Yes, tests will be required for the PR. Follow the examples of other screens.

[Shahmaz0]

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

[hustlernik]

I am working on it @Shahmaz0

[hustlernik]

@palisadoes progress till now, sorry i have taken a lot of time to solve this, due to some personal reason, but will raise the PR today or at max by tomorrow.

Screen-Recording.mp4

[palisadoes]

We created an this issue to do basic changes to the CSS colors for consistency

• Update src/style/app.module.css to New Color Scheme #2880
• Updating to NEW COLOR SCHEME #2984

The resulting PR created a comprehensive design system for the entire app. This was unexpected. The approach was a long term goal that became immediately implementable. We had to act promptly.

We have just merged the PR. There will be a follow up PR to adjust some colors as the Figma design has lettering that is sometimes hard to read.

When this is done we'll need your assistance to merge the screens into the develop branch with this issue.

If your screens have not been affected, then you should use the new methodology to refactor them.

This is an extraordinary circumstance. I hope you will appreciate the decision.

[palisadoes]

Please proceed. The changes mentioned previously are mostly in components