Team Settings Modal Revamp
- Matt Birtch
Ready for implementation
Important Links
Description
In line with the work done for both Channel Settings, Product Settings, and Profile Settings, this Team 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.
Separated navigation items
Rather than combining all team settings in to one view, the Team Settings modal has been broken up in to two views: Info and Access.
Info Tab
Team icon
By default, a team’s icon 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 team icon 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 team icon 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 state
Team name
No changes are proposed here, other than the updated text input UI.
Description
No changes are proposed here, other than the updated text area input UI.
Access Tab
All related settings have been moved to a separate tab called ‘Access’
Users with a specific email domain
If this setting is enabled, another field will display to enter the specified email domains. Each individual domain entered will be displayed in a chip.
Users on this server
No changes are proposed to the behavior of this setting. Just UI Updates.
Invite code
No changes are proposed to the behavior of this setting. Just UI Updates.
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.