NoMongo: Figma User Portal: Organization Screen Violates The Figma Style Guide

[palisadoes]

Post a video of your work in the PR

Describe the bug

1. Organization Screen Violates The Figma Style Guide

To Reproduce
Steps to reproduce the behavior:

1. Style Related
   1. Login to the app as a User
   2. 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
   

Potential internship candidates

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

• Student Internship Programs talawa#359

[NishantSinghhhhh]

@palisadoes , Is this the same issue That I was assigned yesterday?

[swastikCommits]

Can I work on this issue?

[khushipatil1523]

can i work on this issue

[arpit-chakraborty]

can i work on this @palisadoes

[Abdul-Moiz31]

Hey ! can you assign me this issue ?
Woud love to work on this @palisadoes

[khushipatil1523]

@Cioppolo14 @palisadoes
I noticed that the issue was unassigned after being assigned, and I just wanted to let you know that I’m very eager to work on and solve it as fast as possible. I’d be grateful for the opportunity to contribute and help with this. can you please reassigned to me

[Abdul-Moiz31]

Hey @palisadoes ! Please can you assign me this issue , i'd be grateful for this opportunity and Woud love to work on this ?

[Cioppolo14]

@khushipatil1523 You have been assigned. Thanks for checking in.

[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

[khushipatil1523]

Please proceed. The changes mentioned previously are mostly in components

@palisadoes I’m actively working on it and plan to submit the PR by tomorrow or the day after. Thank you for your understanding.

[khushipatil1523]

@palisadoes Apologies for the delay. I was unable to log in , because of which im not able to test the changes. However, I have now completed all the required work, ensuring it meets the constraints and aligns with the Figma portal design.

I have put in a lot of effort on this, and I would really appreciate it if you could reassign the issue to me. I will make sure to raise the PR today because all work was done.

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

Unassigning. Inactivity

[khushipatil1523]

@palisadoes I have made significant progress on this issue. However, due to login issues and the lack of sample data, the organization cards are not displaying on the user dashboard. I have also attached a screenshot for reference.
As a result, I have been unable to fully test my changes and complete the task on time. I had previously messaged you regarding this issue. Could you please reassign this task to me? I am just waiting for the sample data issue to be resolved so that I can test my updates.
I would appreciate the opportunity to complete this work.

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

@khushipatil1523

1. Logins work and sample data can be imported.
2. https://docs-api.talawa.io/docs/installation#importing-sample-data-1

Are you still working on this?

[khushipatil1523]

@palisadoes I will surely raise the PR today.

[khushipatil1523]

@khushipatil1523

1. Logins work and sample data can be imported.
2. https://docs-api.talawa.io/docs/installation#importing-sample-data-1

Are you still working on this?

Hello Sir,

I tried logging in using all user email IDs from the sample data, but I am unable to see any organization on the user portal. It only shows "No organization found." I think this feature is broken, as the user portal is unable to fetch the organization in the develop-postgres branch.

[palisadoes]

You can load sample data here and test.

• https://docs-api.talawa.io/docs/installation#sample-data

Try that and let me know.

[khushipatil1523]

You can load sample data here and test.

• https://docs-api.talawa.io/docs/installation#sample-data

Try that and let me know.

No sir,
its not working i think we need Update query and mutations according to the recently migrated develop-postgres branch of talawa-api for user portal also

[palisadoes]

Are there open issues for this?

[khushipatil1523]

Are there open issues for this?

yes sir ,here is open issue link #3565

[palisadoes]

Are there open issues for this?

yes sir ,here is open issue link #3565

It's merged. You can start

[khushipatil1523]

Are there open issues for this?

yes sir ,here is open issue link #3565

It's merged. You can start
Got it sir! I'll complete this ASAP and keep you updated.

[khushipatil1523]

@palisadoes While updating test cases, I noticed that clicking the "Join Now" button is not working. when i click on "Join Organization," it shows an "Error Occurred" message. After checking, I found that there is no mutation in the backend for joining an organization. All styling has been done according to the Figma style guide, but the "Join" button feature is broken. Should I cover this in this PR as well?

[palisadoes]

Yes

[khushipatil1523]

Yes

Sure, sir. I will work on it immediately.