Shravan taking over for Carlos - update blue square description

[sircarmart]

Description

This PR modifies blue squares modals to display the first and last name of the author in the format "Assigned by FirstName LastInitial MM/DD/YY".

Related PRS (if any):

This frontend PR is related to the #1653 backend PR.

Main changes explained:

• Pass Auth as a prop in UserProfile.jsx to UserProfileModal.jsx
• Retrieve logged in user name when adding blue squares in UserProfileModal.jsx
• Update Add/Update/View blue square modals in UserProfileModal.jsx
• Update USerProfileModal.test.jsx to test date format of MM/DD/YY

How to test:

1. run backend branch
2. check into current branch
3. do npm install and npm run start:local to run this PR locally
4. Clear site data/cache
5. log as admin user
6. go to any user profile (Nicolle's /userprofile/644db73845fccb5b38b13c14 was used in my testing)
7. verify adding blue squares matches Jae's requested formatting
8. verify modifying blue squares matches Jae's requested formatting
9. verify viewing blue squares (using an account without permission to modify) matches Jae's requested formatting
10. verify this new feature works in dark mode

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	47fcea0
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69d87b156371430008ce77b4
😎 Deploy Preview	https://deploy-preview-3874--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[ShravyaKudlu]

Its working as expected in dark and light mode.

[ujjwalbPipKcK]

The Blue Square is working as intended in both Light Mode and Dark Mode.

And cant Update BlueSquares with a volunteer account

[JERRRRY]

The UI works well under Dark and Light mode.

[sircarmart]

Ran into some issues while resolving a conflict, good to review/merge now.

[Anusha-Gali]

Hi Carlos,

I have reviewed your PR locally and the it does work as per requirement in light mode but in dark mode - the assigning page is in light mode in the text boxes and in the viewing of the blue sqaure, the person's name is not clearly visible.
Issue:


Working Screenshots

[Anusha-Gali]

Hi Shravan,

Thanks for updating the PR and making the changes in the dark mode. I was able to view the details as per requirement in both the modes. However this is one issue which could be out of scope is the calendar is in light mode while the application is in dark mode and the calendar icon too is not that UI friendly in dark mode. Please confirm with Jae and do let me know if it is not in your scope and i will update the review.

Issue

Working functionality

[HemanthNidamanuru]

Hi Shravan,

Thanks for the updates. I was able to test everything in both light and dark modes, and the changes look good.

One small thing I noticed is that the calendar still shows in light mode when the app is in dark mode, and the calendar icon does not look very consistent with the dark theme. I am not sure if this is part of the current scope. Please let me know.

[Anusha-Gali]

Hi Sharvan,

Thank you for making the update, however i suppose they broke the formating as you can see in the below screenshots. The text in the Summary is in the center of the text box with no word-wrap.

[sonarqubecloud]

Quality Gate passed

Issues
10 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Shravan-neelamsetty]

Hi Anusha,
I made some changes to the code and fixed it can you go ahead and test it again and update me if there is anything i have to work and and solve.