Figma: Admin and User Chat Pages Violate The Figma Style Guide

[palisadoes]

Post a video of your work in the PR

• Pay special attention to the Other section below
• This is a complex issue for persons with significant merging experience in the repository

Describe the bug

1. Admin and User Chat Pages Violate The Figma Style Guide

To Reproduce
Steps to reproduce the behavior:

1. Style Related
   1. Login to the app as a User
   2. Select an organization
   3. Select people
   4. 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

Your design must accommodate:

1. A database with and without:
   1. Pinned posts
   2. Regular posts
2. Fewer pinned posts than will spread across the screen
3. There must be no gaps between the search bar and posts if pinned posts no longer exist

Figma Style Guide

1. We are migrating away from the green theme as part of our support for color blind users.
2. 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. Use a variable instead. There are appropriate blue/grey colors that have been used in other screens

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

1. User Portal
   
2. Admin Portal
   
3. Admin Portal scrolling
   

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 with these modifications
   
3. Horizontal scroll for pinned posts
   
4. Fixed width
   
5. Post detail
   

Potential internship candidates

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

• Student Internship Programs talawa#359

[swastikCommits]

Can I work on this issue?

[palisadoes]

@swastikCommits You have closed 4 PRs without merging. This will need to be assigned to someone with more recent success

[khushipatil1523]

can i work on this issue

[harshk-89]

Can I work on the issue?

[Abdul-Moiz31]

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

[aadhil2k4]

@palisadoes can I work on this?

[rahulch07]

@palisadoes "Hey, I’m already working on similar issues and would really like to take on this one as well. However, since I currently have other assigned issues, I’d prefer to complete them first before starting on this. If no one else gets assigned in the meantime, I’d be happy to take it up once I finish my existing tasks."

[Abdul-Moiz31]

@palisadoes Thankyou for assigning , I wil raise PR Soon

[Shahmaz0]

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

[Abdul-Moiz31]

@Shahmaz0 Thankyou for you interest ,. but I've sorted this out will raise a PR soon .