Figma: Events Dashboard / Detail Screens Violate The Figma Style Guide

[palisadoes]

Post a video of your work in the PR

Describe the bug

1. Events Dashboard / Detail Screens Violate 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. Click on event
   5. Go to event details
   6. 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. 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:
   1. src/style/app.module.css
      1. Convert all code files to use this file.
      2. Delete all CSS files in this code path and below mentioned in the title. The src/style/app.module.css file must be the only source of CSS
4. Use no CSS in:
   1. assets/css/app.css
5. Use 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
6. When refactoring modals, please refer to this PR that has created a standardized design patter for them.
   1. Updating to NEW COLOR SCHEME #2984
7. Remove all references to HTML color codes in the files you edit except in src/style/app.module.css
8. Buttons, and dropdowns must only have shadows when there is a mouse hover. Their color must not change
9. Search boxes must only have shadows when selected

Actual behavior

• See screenshots

Screenshots

If applicable, add screenshots to help explain your problem.

1. Screen 1
   
2. Screen 2
   
3. Registrants
   
4. Attendance
   
5. Agendas
   
6. Action Items
   
7. Volunteers
   1. Apply to:
      1. Individuals tab
      2. Groups tab
      3. Requests tab
         

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. Dashboard
   
3. Registrants
   
4. USE AS A GUIDE for:
   1. Attendance
   2. Agendas
   3. Actions
   4. Volunteers
      

Potential internship candidates

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

• Student Internship Programs talawa#359

[bruno-keiko]

I would like to work on this issue. Could you please assign it to me?

[palisadoes]

I would like to work on this issue. Could you please assign it to me?

We need someone to work on this who has had experience with the repo. There are many significant changes.

[rahulch07]

@palisadoes I am working on issue #2880 shouldn't these css issue(replacing green with appropriate blue/grey) should come under the issue i am already working on?

[rahulch07]

Thanks

[palisadoes]

@bruno-keiko

1. We opened many similar issues in the same batch that I encourage you to try. These are our issues without any assignees. Please ask to be assigned to any one of those.
   1. https://github.com/PalisadoesFoundation/talawa-admin/issues?q=is%3Aissue+is%3Aopen+no%3Aassignee
2. Also join our slack community. The link can be found here:
   1. https://github.com/PalisadoesFoundation

[palisadoes]

@rahulch07

This needs to be fixed in the User Portal too. There is shared code.

[Shahmaz0]

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

[rahulch07]

Hey @Shahmaz0 I am already working on it please find another issue.
List of unassigned issues: https://github.com/PalisadoesFoundation/talawa-admin/issues?q=is%3Aissue+is%3Aopen+no%3Aassignee

[palisadoes]

Unassigning so you can work on the follow up for this:

• Update src/style/app.module.css to New Color Scheme #2880

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

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.

[aadhil2k4]

@palisadoes Can I work on this issue?

[gurramkarthiknetha]

i would like to work on this .Could you please assign this issue to me @palisadoes @Cioppolo14

[Shahmaz0]

Hey, can you assign this to me, really want to work on this issue.

[palisadoes]

Please proceed. The changes mentioned previously are mostly in components

[aadhil2k4]

@palisadoes , I have attached the design changes that I have made.

Please review these and suggest changes.

Also Agendas and Statistics screens are not loading / empty.

[palisadoes]

1. Please make all the screens have a white background div as in this Figma page. Unfortunately, the designer omitted the div in the subsequent screens. The selection options in the Nav Bar need to be within the Div as shown, but in all cases. The Div should have a minimum height that expands as needed. Figma shows a size that almost fills the screen.
   
2. We recently created a standardized search bar, you'll need to use that. Your icons for search are not centered.
3. The search bars are not the same length, nor is their distance from the Nav a consistent in each screen.
4. Your tables don't use the same corner radius as other similar features in Figma
   
5. You don't need headings for the screens. The tabs show where the person is.
6. Only have shadows for mouse overs or selected items.
7. The line under the Navbar needs to go
8. The statistics page should just have the white Div
9. I'll open an issue to create the Agenda Categories

[palisadoes]

Pay attention to these requirements stated in the issue: