Figma: Action Item Pages Violate The Figma Style Guide

[palisadoes]

Post a video of your work in the PR

Describe the bug

1. Action Item Pages 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 action items
   4. The figma guide is not followed fully

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. Main Screen
   
2. Adding items
   
3. After adding items
   

Additional details

There is no figma page for this. Take design cues from this page

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

Potential internship candidates

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

• Student Internship Programs talawa#359

[pranavnathe]

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

[Shahmaz0]

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