Figma: The Event Dashboard Screen Violates the Figma Style Guide

[palisadoes]

Post a video of your work in the PR

Describe the bug

1. Event dashboard screen does not conform to our Figma style guide

To Reproduce
Steps to reproduce the behavior:

1. Login to the app
2. Select an organization
3. Go to the events page
4. Select an event
5. Go to the event dashboard

The solution must work for

1. Users
2. Admins
3. SuperAdmins

Tests:

1. Tests must be written to ensure this does not happen again

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 screen shots

Screenshots

1. Example
   
2. Example
   
3. Example
   

Additional details

• N/A

Potential internship candidates

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

• Student Internship Programs talawa#359

[Bittukr7479]

Hiii @palisadoes I want to work on this issue, please assign me.

[sushen123]

Hello @palisadoes, i haven’t been assigned any issues yet. could you please assign me this one?

[abbi4code]

May i work on this issue Sir, i have worked talawa-admin ui-ux by refactoring css before also ? @palisadoes

[prakharsingh-74]

@Cioppolo14 and @palisadoes No PR has been till raised now, so i would like to work on this issue

[palisadoes]

Unassigning. Inactivity

[Bittukr7479]

Sorry @palisadoes, the delay was due to the backend API not working. I was waiting for it to be resolved before proceeding. Please consider reassigning me to this issue, and I'll ensure progress is made as soon as possible.

[abbi4code]

@Bittukr7479 So, have you made any progress so far?

[Bittukr7479]

@abbi4code The API hasn't been working, so I haven't been able to make progress. Do you have any insights on how to proceed despite this issue?

[Bittukr7479]

I successfully completed this issue when API working, #3342 and #3313

[abbi4code]

@Bittukr7479 Are you facing issues while logging into Talawa API? You can follow the installation guide here: https://github.com/PalisadoesFoundation/talawa-api/blob/develop-postgres/docs/docs/docs/getting-started/installation.md). Tag me on slack if you need further assistance!

[Bittukr7479]

Thanks, @abbi4code, I already tried this, all are successfully done, but I did not get to this page.

[palisadoes]

Reassigning back to @Bittukr7479 given the circumstances

[Bittukr7479]

Reassigning back to @Bittukr7479 given the circumstances

Thanks, @palisadoes sir. I will solve this issue as soon as possible.