Hiral fix profile page formatting

[hiralsonip]

Description

Fix the design issue of the profile page

Related PRS (if any):

This frontend PR is related to the Development backend PR.

Main changes explained:

• Fix the design issue in the Basic Information tab on the profile page
• Update the design for the team tab when no team is assigned

How to test:

1. check into the current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log in as an admin user
5. go to dashboard→ Profile
6. verify the design for the regular screen and check for the responsiveness as well.
7. go to dashboard→ Profile → Team → Assign Team and check for the background colour in the dropdown menu
8. go to dashboard→ Profile → Project → Assign Project and check for the background colour in the dropdown menu

Screenshots or videos of changes:

Before

After

Video

Profile_Page_Formatting.mp4

[lacnoskillz]

Hello @hiralsonip
I pulled your code and revied your changes and they look great!
Nice work and good eye for detail. little things like this really help the page appear more professional and clean.

See below images

Profile page Before

Profile page after

Teams section before

Teams section after

Also maintained its mobile responsiveness!

Great work
and happy coding!

[hbodgal]

HGN.APP.-.Google.Chrome.2024-05-04.12-47-38.mp4

I have double checked that I have checked in this branch locally and in development branch in backend. I have installed dependencies as well. I have used Admin login still I see white screen in profile page.

[hiralsonip]

HGN.APP.-.Google.Chrome.2024-05-04.12-47-38.mp4
I have double checked that I have checked in this branch locally and in development branch in backend. I have installed dependencies as well. I have used Admin login still I see white screen in profile page.

Hi @hbodgal

I have applied these steps and it worked for me. Kindly check.

• Pull the latest code and install all the dependencies for the frontend and backend.
• Also, build the backend project and run the project.
• Review the thread at - (https://highest-good.slack.com/archives/CSCN20FA5/p1714537724845419)

[SushmithaPrathap]

Hi Hiral, I just reviewed this PR. The changes looks good! Its responsive as well!

Screen.Recording.2024-04-26.at.4.09.08.PM.mov

[linkhanthtel]

I reviewed your PR and new UI look good and responsive! Nice work!

2225.mov

[Ramaruva]

Hi verified your changes in my local env and they are working as expected

hiralprofileformating.mp4

[MinSun0814]

New UI design looks clean and is responsive! Good work!

[KaushikMreddy]

Hi,

I've reviewed your changes, they look good. The drop-downs look uniform and profile page is neater

Same pages after decreasing resolution

Good work!

[dkn6]

Thank you for your great work! LGTM

[ZhangPeizhou]

Works as expected.

PR.2225.mp4

[CloudyZ524]

Hi Hiral, I just reviewed this PR which function works well and the page is responsive!

There are one suggestion: The box next to the Assign Team button with "X-XXX" looks confusing and I'm not sure if it has any function related to team assignment. It would be better to make it more clear with instructions and placeholders.

[mohabbasd]

Hello, I tested your PR and it works as intended. Great Job! Below is a video for your reference.

Screen.Recording.2024-06-01.at.9.25.23.PM.mov

[JatinAgrawal94]

1)checked into the current branch
2)Executed npm install and npm run start:local to run this PR locally
3) Clear site data/cache
4) log in as an admin user

The profile page looks great and is responsive.

[akshit0211]

Hello Hiral, I reviewed your changes and they look good.

Suggestion: Assign Project and Team drop-down windows should follow the dark mode color scheme.

[nishithaShetty]

Hi Nice work,
The design is rendered as expected, attached the screenshots below. They are responsive as well.

[Trip2310]

Reviewed this PR with development backend; In Project and Team , assign project and assign team is not visible for me other than that it works smooth.
a) At light and dark mode
b) checked page responsiveness for different dimensions(phone/desktop)
great work

[suaniii]

I verified your changes in my local environment, and they are working as expected. The new UI looks clean, responsive, and uniform. Nice work!

Screen.Recording.2024-06-19.at.5.43.11.PM.mov

[Sudershhh]

The Profile Page including the Teams and Projects Modals are responsive for different viewports. The UI is clean and seamless. Good Work.

[vishavk1992]

Hi Hiral, I've tested your pull request. It works as intended. The profile page looks great and is responsive.

PR-2225-2.mp4

[DiyaWadhwani]

Hey Hiral,
Went over your changes in both desktop and mobile versions and the UI looks clean and organized. Deletion of a team or project maintains the UI tables and assignment of either adds to the table properly without messing with the overall structure of the UI.
Added a video of testing below. Great work.

2225.mp4

[Sarath-3119]

The changes requested in the pr seems to be working properly. Checked the subsections in the profile page in both light and dark modes. The page formatting is seen as expected and the app entirely is responsive as well. Good work!

https://www.loom.com/share/307fc951f7f14505a5d1f7d597493657?sid=3859076c-27d4-40f3-87ce-b37ca91b7c50

[one-community]

Thank you all, merging!