Refactor CSS files in src/screens/OrganizationPeople

[AVtheking]

Refactor CSS files in src/screens/OrganizationPeople

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

Additional information:

1. The foundational work for this was completed in this PR:
   • Chore/css changes #2466
2. The desired single CSS file is:
   • src/style/app.module.css

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.

[swastikCommits]

Please assign me this issue

[amaan-aly246]

Please assign this issue to me.

[amaan-aly246]

I have done the setup for talawa-api and talawa-admin , registered and login in the admin. Bu I'm unable to understand what changes you want. organizationPeople component styles are coming from /style/app.module.css which I think is the global CSS file. I would really appreciate if you could explain with example. Thanks!

[palisadoes]

@AVtheking PTAL

[amaan-aly246]

@palisadoes I have made changes in the OrganizationPeople and it's related components ( in develop branch), and but when I ran the tests, 2 tests failed out of 197. These tests are for the OrganizationScreen.tsx and customTableCell.tsx components, but I haven't made any changes to them. The failed test for OrganizationScreen.tsx indicates that it should have a _expand_ccl5z_8 class, but there's no such class in its corresponding CSS file. The failed test for customTableCell.tsx states 'CustomTableCell › renders event details correctly.' What should I do now? Should I push the changes to my fork develop branch or main branch. Thanks.

[palisadoes]

Please do the following:

1. Base your local branch on the develop-postres branch
2. Make sure your local branch is not named develop-postres
3. Submit the PR develop-postres branch
4. Fix the errors as part of your PR

Sometimes the tests don't work as expected

[amaan-aly246]

I have raised the PR. I want to work on the bug I found in UI of Action Items section of the orgactionitem component. Where when you click on serach / sort/ status button the options list comes underneath the page with scrollbar.

So can I raise the issue following the ISSUE_GUIDELINES section or wait till my PR merges ? And Do you guys have slack/discord where I can communicate regarding development doubts and stuff?

[amaan-aly246]

@palisadoes The OrganizationPeople component does not have a dedicated CSS file to move styles from to the global CSS file.
Since it is already importing styles from the global CSS file, this issue can be closed.

[palisadoes]

Thanks.