Abeer/account designs

[AbeerDas]

Notion ticket link

Account Designs

Figma File

Implementation description

• I implemented the designs for the figma for the edit details frontend pages. They are available in the figma link above but on top of that there was also backend routing made for making a put request to update the user first name and last name. So basically to test this we are looking at the design and ensuring that the name updates and also

Steps to test

1. Log into one of your accounts with any role
2. Go to http://localhost:3000/account
3. Check these pages for the design
4. Click edit details (check if these designs are acceptable)
5. Make the put request for the name by saving different details for your name (feel free to change it back after)
6. Verify these changes go through (it should update the UI but also check Mongo/Firebase to see if the name changes)
7. Check password modal design - note that the design they came up with is combined with the create password designs (basically the differences in the eye icon to "show password" and the dimensions are intentionally different from the Figma as they are now more consistent with what the create password page fields look like)
8. Make sure the button to save password highlights once all the conditions are met
9. Try a user with a new role and then see if the colors change accordingly. For example, if you were a facilitator, then the action button would be purple. If it is a learner it would be the blue colour, etc.

note its blue for learners but it will be different for each role:

What should reviewers focus on?

• Coding practices. New userclientapi function so check those file changes
• Check jsx for design and check if the theme.ts is accessed wherever necessary

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

[github-actions]

Visit the preview URL for this PR (updated for commit 6769a84):

https://extendafamily-7613e--pr109-abeer-account-design-3060zq5r.web.app

_{(expires Wed, 19 Mar 2025 23:30:32 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: f8bb7b5cd838ab636347dc54fd0ab08ab3715d31}

[Astoriaaaa]

Great Work!!!!
Most of the designs look good and the PUT request works. I did notice a few things tho, the user details text is left aligned on my end. Also on hover the reset password background turns red whereas in the figma there's just a shadow.


Also one strange thing I noticed, when I change my user details, it updates on mongo but when I refresh the page, it goes back to what it originally was. I can only see the change permanently when I log back in.

Screen.Recording.2025-03-17.at.9.08.13.PM.mov

[carolynzhang18]

Nice work, it's looking really good!! 🤩

Summary of comments:

• Create a PUT /updateMyAccount user route that applies account updates to the user whose accessToken makes the request (so we don't have a route where any user can update any user...).
• After updating the user's account info, we need to make a call to setLocalStorageObjProperty(AUTHENTICATED_USER_KEY, ... to update it throughout the frontend.
• Instead of using raw hex codes for colours, we want to be using colours from our theme (makes it easier for us to tweak our palette and have it be reflected everywhere).
• Typography styles should be set using variant="<style in figma>", instead of as individual styles on the sx object.
• Rename ProfileButton.tsx -> ProfilePicture.tsx