Profile Settings
Profile panel with avatar upload, name and email inputs, a read-only timezone row, and a save bar.
Profile panel with avatar upload, name and email inputs, a read-only timezone row, and a save bar.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Profile Settings is the personal identity panel, Avery Stone’s avatar with a Change photo affordance and the honest constraint below it, PNG or JPG up to 2 MB, square crops look best. Name and email sit in a two column grid, and the email field carries its own caveat: changing it sends a confirmation to both addresses. The timezone row is read-only styled, Europe/London (UTC+01:00), with an Edit button beside it and a note that digest and reminder times follow it. The panel foot save bar pairs the Save changes button with the prose that stops the where did my changes go ticket, changes apply everywhere within a minute.
The timezone row is intentionally not an Input because detecting and persisting a timezone is a distinct action from the name and email form; keeping it separate makes the save affordance unambiguous.
Reach for this block on the personal settings route, wired to your profile PATCH endpoint and a timezone picker modal triggered from the Edit button. Gate email changes behind your confirmation flow before committing.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the personal identity form. Other profile panels:
Tip: the save bar hint, changes apply everywhere within a minute, answers the question before it becomes a support ticket.