Figma: Organization Settings Page Violates The Figma Style Guide

[palisadoes]

Post a video of your work in the PR

Describe the bug

1. Membership Requests 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 settings
   4. The figma guide is not followed fully
2. Functionality
   1. The join organization 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 Top
   
2. Screen Bottom
   
3. Action Items: Refer to this issue for corrections

   1. Figma: Action Item Pages Violate The Figma Style Guide #3174

      

4. Agenda Item Categories
   

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 design
   
3. Use this as a guide. There is no equivalent in the Figma design
   

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?

[Shahmaz0]

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

[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

[AceHunterr]

figuring out a few things ... will be done soon

[AceHunterr]

I have made the changes in the #3268 .... I have verified the styling and the color scheme and eliminated any shades of green present with the respective blue - er hues according to Figma and the greyer hues according to the #2880 ... Do let me know if there are further changes to be made

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[palisadoes]

unassigned. inactivity

[AceHunterr]

I was actually having issues with new postgres setup... it is showing no organization found after importing data that's why it was taking me quite some time... can I be reassigned this issue?

[palisadoes]

Check the #talawa-projects. There has been a preliminary breakthrough

[AceHunterr]

Okay I'll check that again...

If I am not wrong I have to pull this branch and setup locally again right?
#3477

this is what I found on the channel

[palisadoes]

Yes. However it'll take some time to get to this screen, as there will be many broken screens to get to this issue.

[AceHunterr]

I am very sorry to inform that I have been trying to setup the Talawa-Api and the Admin but still facing issues with the new migration to the PostgresSQL and I have tried multiple approaches using WSL and Linux but due to some hardware incompetencies I am unable to run it and when it runs it is still showing me Error 404.

I would like you to unassign me this issue so that anyone else can start working on this although I have made some earlier commits into this issue before the migration when my Talawa projects were working perfectly fine... but couldn't carry on further... I'll keep trying some other ways for it but for the time being to make the project keep going I guess someone else should keep working on it.

I am very apologetic for the delays that might be caused due to me and I hope I get some way out to get my Api and Admin start working again ... again very sorry. I would still like to keep contributing to Talawa by finding some way.

[Cioppolo14]

Thanks for letting us know!