Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Figma: User Profile Page Violates The Figma Style Guide #3172

Open
palisadoes opened this issue Jan 6, 2025 · 12 comments
Open

Figma: User Profile Page Violates The Figma Style Guide #3172

palisadoes opened this issue Jan 6, 2025 · 12 comments
Assignees
Labels
bug Something isn't working ui/ux issue related and being worked with the figma file of the Admin UI

Comments

@palisadoes
Copy link
Contributor

palisadoes commented Jan 6, 2025

Post a video of your work in the PR

The design used to partially comply, check the page history and modify it accordingly

Describe the bug

  1. The People Profile 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 people
    4. Select a profile
    5. 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. The foundational work for this was completed in this PR:
  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.

image

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
    image
  2. Overview page
    image
  3. Organizations page
    image
  4. Events page
    image
  5. Tags page
    image

Potential internship candidates

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

@palisadoes palisadoes added the bug Something isn't working label Jan 6, 2025
@github-actions github-actions bot added feature request ui/ux issue related and being worked with the figma file of the Admin UI unapproved good first issue Good for newcomers labels Jan 6, 2025
@devender18
Copy link
Contributor

hey @palisadoes could you please assign this to me ?

@sohelhussain
Copy link

If there are no updates by @devender18 , Can this issue be assigned to me ?

@Shahmaz0
Copy link

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

@sohelhussain
Copy link

@palisadoes or @Cioppolo14 I noticed that there hasn't been any recent update from @devender18 regarding this issue. If it's alright, could you please assign this issue to me? I'd be happy to work on it and ensure it gets resolved promptly.

@devender18
Copy link
Contributor

@palisadoes or @Cioppolo14 I noticed that there hasn't been any recent update from @devender18 regarding this issue. If it's alright, could you please assign this issue to me? I'd be happy to work on it and ensure it gets resolved promptly.

@sohelhussain please consider working on new open issues, I'm working on it.

@sohelhussain
Copy link

alright

@Cioppolo14
Copy link
Contributor

@Shahmaz0 @sohelhussain We have an automated system in place to track when issues are inactive for too long. We are monitoring. The best way to contribute to our repositories is to ask for unassigned issues. That will help the most and ensure our assignment team is focused on that, instead of already assigned issues. Thank you.

@palisadoes
Copy link
Contributor Author

We created an this issue to do basic changes to the CSS colors for consistency

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
Copy link
Contributor Author

Please proceed. The changes mentioned previously are mostly in components

@palisadoes
Copy link
Contributor Author

@devender18 Are you still working on this?

@palisadoes
Copy link
Contributor Author

Unassigning due to inactivity and/or no submitted PR. Others need to get a chance. Please let us know whether you want to be reassigned before someone else requests assignment or select another issue.

@amaan-aly246
Copy link
Contributor

@palisadoes Please assign this issue to me.
Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working ui/ux issue related and being worked with the figma file of the Admin UI
Projects
Status: Backlog
Development

No branches or pull requests

6 participants