Skip to content

NoMongo: Figma: Organization Settings Page Violates The Figma Style Guide #3178

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

Closed
palisadoes opened this issue Jan 6, 2025 · 26 comments
Closed
Assignees
Labels
bug Something isn't working good first issue Good for newcomers GSoC Priority 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

Describe the bug

  1. Organization settings Page Violates The Figma Style Guide
  2. The organization custom fields feature needs to be removed

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. 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

Actual behavior

  • See screenshots

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

  1. Screen Top
    image
  2. Screen Bottom
    image
  3. Action Items: Refer to this issue for corrections
    1. Figma: Action Item Pages Violate The Figma Style Guide #3174

      image

  4. Agenda Item Categories
    image

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
    image
  2. Figma design
    image
  3. Use this as a guide. There is no equivalent in the Figma design
    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 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
@AceHunterr
Copy link
Contributor

@palisadoes may I work on this issue?

@Shahmaz0
Copy link

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

@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

@AceHunterr
Copy link
Contributor

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

@AceHunterr
Copy link
Contributor

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

Copy link

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.

@github-actions github-actions bot added the no-issue-activity No issue activity label Jan 28, 2025
@palisadoes
Copy link
Contributor Author

unassigned. inactivity

@palisadoes palisadoes reopened this Jan 28, 2025
@github-project-automation github-project-automation bot moved this from Done to In progress in 2024 New Talawa Admin Screens Jan 28, 2025
@github-actions github-actions bot removed the no-issue-activity No issue activity label Jan 28, 2025
@AceHunterr
Copy link
Contributor

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?

@Cioppolo14
Copy link
Contributor

Thanks for letting us know!

Copy link

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.

@github-actions github-actions bot added the no-issue-activity No issue activity label Feb 13, 2025
@github-actions github-actions bot removed the no-issue-activity No issue activity label Feb 14, 2025
@palisadoes
Copy link
Contributor Author

palisadoes commented Feb 16, 2025

@khushipatil1523
Copy link
Contributor

can i work on this issue?

@palisadoes palisadoes changed the title Figma: Organization Settings Page Violates The Figma Style Guide NoMongo: Figma: Organization Settings Page Violates The Figma Style Guide Feb 24, 2025
@palisadoes
Copy link
Contributor Author

@khushipatil1523 I'm unassigning you. You have 4 issues open across 2 repositories and only one open PR. We need to give others a chance.

Image
Image

@khushipatil1523
Copy link
Contributor

@khushipatil1523 I'm unassigning you. You have 4 issues open across 2 repositories and only one open PR. We need to give others a chance.

I completely understand! I'll make sure to work on the remaining issues as soon as possible. No worries about unassigning me—I truly appreciate the opportunity to contribute and will continue to do my best.

@palisadoes
Copy link
Contributor Author

  1. You have 3 now, however the one you created in the API is related to one of your screen issues.
  2. When do you think you'll be able to complete all 3?

@khushipatil1523
Copy link
Contributor

  1. You have 3 now, however the one you created in the API is related to one of your screen issues.
  2. When do you think you'll be able to complete all 3?

I will surely complete them by tomorrow night.

@gurramkarthiknetha
Copy link
Contributor

@palisadoes Sir, shall I work on this issue? I currently have only one assigned issue, which I have already completed.

@Cioppolo14
Copy link
Contributor

@gurramkarthiknetha We are asking you to focus on your current PR, as many of your PRs are being closed prematurely. See #3170

@gurramkarthiknetha
Copy link
Contributor

@gurramkarthiknetha We are asking you to focus on your current PR, as many of your PRs are being closed prematurely. See #3170

Got it! I'll make sure to focus on my current PR and ensure it's complete before opening new ones. Thanks for the feedback!

@gurramkarthiknetha
Copy link
Contributor

gurramkarthiknetha commented Feb 28, 2025

Hi @Cioppolo14, I currently have only one issue assigned to me.and my last pr was merged .could you please assign it now .

@gurramkarthiknetha
Copy link
Contributor

gurramkarthiknetha commented Mar 2, 2025

Image

@palisadoes , @duplixx sir, could you please check this? I have made changes according to Figma. Let me know if any further modifications are needed. Thanks!

palisadoes pushed a commit that referenced this issue Mar 11, 2025
…3788)

* fixed the settings

* fixed the linting

* changed acc to bot

* removed comments

* removed unused css classes

* updatecss

* fix

* fixed acc to coderabbitai

* fixed acc to coderabbitai-1

* fixed acc to coderabbitai-2

* Update app-fixed.module.css

* Update app-fixed.module.css

* Update app-fixed.module.css

* update app-fixed

* update

* fix

* fix format

* Update OrgUpdate.spec.tsx

* Update app-fixed.module.css

* added the buttons in settings pg

* improved the test

* updated the code

* Update custom.css

* fix custom.css

* Update custom.css

* Update app.css

* fixed formatting-1

* fixed the buttons

* fixed the buttons

* fixed card align

* fixed card

* fixed the files

* fixed translations

* update app-fixed css

* update app-fixed css

* update app-fixed css codecov

* fixed the color of button

* fixed camel case

* fixed acc to coderabbitai

* fixed acc to coderabbitai
@github-project-automation github-project-automation bot moved this from Backlog to Done in NoMongo: Talawa-Admin Mar 11, 2025
@github-project-automation github-project-automation bot moved this from In progress to Done in 2024 New Talawa Admin Screens Mar 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good first issue Good for newcomers GSoC Priority ui/ux issue related and being worked with the figma file of the Admin UI
Projects
Archived in project
Development

No branches or pull requests

6 participants