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: Refactor CSS files in src/components/InfiniteScrollLoader #3323

Open
palisadoes opened this issue Jan 18, 2025 · 1 comment
Open

Figma: Refactor CSS files in src/components/InfiniteScrollLoader #3323

palisadoes opened this issue Jan 18, 2025 · 1 comment
Assignees
Labels
feature request good first issue Good for newcomers refactor Refactor the code to improve its quality ui/ux issue related and being worked with the figma file of the Admin UI

Comments

@palisadoes
Copy link
Contributor

palisadoes commented Jan 18, 2025

Introduction

To improve the UI/UX of Talawa-Admin we have been working on:

  1. making the application more suitable to color blind users
  2. streamlining all CSS into a single global file

Post a video of your work in the PR

  1. This is important for reviewers to understand the solution
  2. Pay attention to the Additional Information below.

Additional information:

  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

The challenge:

The goal is to convert the CSS file in this subdirectory and all the components related to this screen to use this new design pattern. This means that:

  1. All CSS files in this subdirectory and all the CSS files in related components must be merged into the global CSS file using pre-existing CSS.
  2. All CSS files in this subdirectory and all the CSS files in related components must be deleted after the merge.
  3. The remaining relevant files in this subdirectory must only reference the global CSS file.
  4. All the CSS files in the related components of this subdirectory must adhere to the same guidelines.
  5. Use variables for your CSS wherever possible. There may be predefined colors that you can use.
@github-actions github-actions bot added refactor Refactor the code to improve its quality ui/ux issue related and being worked with the figma file of the Admin UI unapproved good first issue Good for newcomers labels Jan 18, 2025
@sohelhussain
Copy link

Please assign this to me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request good first issue Good for newcomers refactor Refactor the code to improve its quality ui/ux issue related and being worked with the figma file of the Admin UI
Projects
Status: Backlog
Status: Backlog
Development

No branches or pull requests

3 participants