Design in progress
Important Links
Description
In line with the work done for both Channel Settings and Product Settings, the Profile settings modal should also be updated to match the proposed UI updates.
No more collapsed sections
Another significant change proposed here is the removal of sections being collapsed. All sections are now fully open without the need to click in to edit individual settings. This should help reduce the number of clicks and surface nested settings to be more discoverable.
Info Section
If login provider handles profile info
In cases where some fields are handled through the login provider, a notice shows at the top and fields are disabled/
Profile photo
By default, a user’s profile is set to a fallback image.
The fallback image cannot be removed - it can only be replaced
When the fallback image is displayed, the image formatting and file size limits display under the image.
Users can edit their profile image by clicking on the image or the pencil icon
This will open an OS dialog to choose the image they wish to use
Once a profile image has been added, the ‘Remove photo’ button displays under the image
If a user removes their custom image, it returns to the fallback image
Full name
No changes are proposed here, other than the updated text input UI. If this field is handled by the login provider, it will still be displayed, but in a disabled state.
Username
No changes are proposed here, other than the updated text input UI. If this field is handled by the login provider, it will still be displayed, but in a disabled state.
Real-time validation on blur of the field
Format/requirement validations happen after data has been entered and the field loses focus (on blur).
Nickname
No changes are proposed here, other than the updated text input UI.
Position
No changes are proposed here, other than the updated text input UI. If this field is handled by the login provider, it will still be displayed, but in a disabled state.
No changes are proposed here, other than the updated text input UI. If this field is handled by the login provider, it will still be displayed, but in a disabled state.
Real-time validation on blur of the field
Format/requirement validations happen after data has been entered and the field loses focus (on blur).
Security Section
Behavior for Saving Settings
As soon as a change is made to the settings, a floating footer animates from the bottom within the active content area. Users can continue making changes while this footer is displayed, but they cannot change sections until they either save or cancel the changes they’ve made. See details on the Product Settings documentation as this follows the same behavior.
Changing Tabs while there are unsaved changes
If users attempt to change sections while there are unsaved changes, the footer animates with a shake to highlight that they have unsaved changes. They cannot change tabs until changes are saved or canceled. See details on the Product Settings documentation as this follows the same behavior.