Account Screen

In-progress

https://mattermost.atlassian.net/browse/MM-36858

Figma file: https://www.figma.com/file/a9w2q3JnVvBwo2IScP8j3K/Phase-1-Design?node-id=1632%3A97169

The new account screen is accessible via the new Tab Bar. This essentially replaces the right sidebar with a few notable updates.

Design

iOS

Android

 

 

 

For small screens (i.e iPhone SE)

The H1 title (user name) shrinks to Heading 500.

 

Your Profile

A user can fill out his profile by tapping on 'Your Profile'.

 

 

Avatar with Status

The large Avatar displays the user’s profile image. If it’s not set display the fallback profile image. In addition, the user’s current status is displayed inset with the avatar.

Display Name

  • If a display name is set, it will be shown as the large title below the avatar

  • If no display name is set, the username will be promoted to the larger title

Using the Menu Item Component, the following options are available on this account screen.

Status

Opens the existing UI for setting status. May be revisited in the future

Set a Custom Status

Based on work done for this ticket: https://mattermost.atlassian.net/browse/MM-24340 , this feature should be available for v2. For phase 1 of v2, we’ll use this UI without any UI changes. This may be revisited in the future for UI improvements.

Your Profile

Opens the existing UI for viewing/editing your profile. Will be revisited in the future.

Saved Messages

Opens the existing Saved Messages modal UI.

Settings

Opens the existing Settings Modal UI.

Log out

Displays the current server that the user is working with as a point of reference. Logging out will accomplish the same thing as the log out function from the new Servers List. Visit the Multi-Server Navigation page for details.

Tablet Layout