Figma User Portal: Organization Left Drawer Violates The Figma Style Guide

[palisadoes]

Post a video of your work in the PR

Describe the bug

1. User Portal: Organization Left Drawer Violates The Figma Style Guide

To Reproduce
Steps to reproduce the behavior:

1. Style Related
   1. Login to the app as a User
   2. Select an organization
   3. The figma guide is not followed fully

Expected behavior

1. The screens shown must conform to Figma
2. This must apply to the following where 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

Screenshots
If applicable, add screenshots to help explain your problem.

Additional details
Add any other context or screenshots about the feature request here.

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

Potential internship candidates

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

• Student Internship Programs talawa#359

[aryanrule]

sir can you please assign me this

[Abdul-Moiz31]

Hello @palisadoes Can you assign this issue to me ?

[Cioppolo14]

If the issue has already been assigned, please don't ask to be assigned. We want everyone to get a chance.

[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

[palisadoes]

@aryanrule Are you still working on this?

[hustlernik]

@palisadoes assign me if no one is working.

[hustlernik]

not having much space for sidebar footer (user profile and sign out), should I put scroll?

[palisadoes]

1. Yes with the tiniest reasonable width.
2. Use Gmail as a guide. The scroll bar only appears when hovering
3. Also, I'm wondering whether it would be better to use a white background versus grey. It would:
   1. Make the light blue background of the right panel be more noticeable.
   2. Make the text easier to read
   3. Make the highlighted options more visible.

Please try the white background. The Figma isn't always ideal

[hustlernik]

@palisadoes I'm trying and will let you know.

[hustlernik]

I guess white background looks better.

[palisadoes]

Let's do white

[palisadoes]

1. In Gmail the scroll bar only appears when you hover over the left nav
2. We'll need to do this. The left nav profile will need to have the same functions as the dropdown here.
   

[palisadoes]

1. When would you be able to raise a PR?
2. This is a key design element
3. Ideally it should be merged before this PR. Which may happen in the next 24 hours.

• Login workflow resolution for develop-postgres API #3400

[hustlernik]

@palisadoes I have done this, almost. Will raise after writing some test and refactoring, in 2hrs approx.

[hustlernik]

[hustlernik]

@palisadoes I have created two new component.

1. Profile Card
2. Sign Out

On hover scroll bar appears.

[hustlernik]

this error coming while commit

[hustlernik]

@palisadoes pre commit hook failing

[palisadoes]

There may be local storage statements in your code that don't use the localstorage libray

[palisadoes]

1. Please open a PR
2. Attach a video in the PR too

[hustlernik]

@palisadoes Getting this issue

[palisadoes]

1. Are you running this on windows, MacOS/linux or WSL?
2. I have no errors in linux
3. Use the git commit --no-verify -am to skip the local tests. We need to get this merged in the next few hours. A major PR is about be merged and this will break.

[hustlernik]

windows, okay I am onto it.

[palisadoes]

Please create an issue to fix npx tsx ./scripts/githooks/check-localstorage-usage.ts running on Windows. We can't have this again

[palisadoes]

@hustlernik We had to revert your PR. There was a breaking change

• Revert "[FIX] Figma User Portal: Organization Left Drawer Violates The Figma Style Guide" #3428

[hustlernik]

@palisadoes Should I again raise the PR after fixing lint?

[palisadoes]

Reopening. Please update this

1. There are several outstanding issues
   
2. Gmail uses grey for hovering over a left drawer item, and blue for selected items. We should use that.
   
3. More
   
4. Remove the hiding of the drawer. It'll create support issues. We removed it from talawa-docs for this reason