UI redesign: users screen

[terpimost]

This issues is about the new design of #5495

Figma area

Icons

Majority of icons for web and mobile app are from Feather or Google or customized. For mobile app they are usually 24px size.
I will collect mobile app icons in this Figma page

• users

Clarifications

Organization icon should round corners of an image

If possible make the whole rectangle under it as clickable. Pressed stated could be darker, or 10% opacity black over it or 10% transparency - we should pick one default way across the app.

To make text look centered reserve the same as left icon space:

On the mock the panel stroke is inside the panel, implemented as a shadow:

List items

Online and Idle has circles, offline/invisible - no any circle.

Status as emoji is part of the name, status as emoji+ text should be on a new line

Dark mode

In dark mode what looks like white is usually white with some transparency, same for black. With this approach it would be easier to tune them later.
We will try to utilize colors from the web app.

General background is background: #1D1D1D;
Top and bottom panels are background: #222222;
Top and bottom panels internal borders are 30% opacity black
Screen title hsla(0, 0%, 100%, 0.8)
User name hsla(0, 0%, 100%, 0.75)
Text status hsla(0, 0%, 100%, 0.3)

Bottom tab bar icons are the same color, but active icon is hsla(0, 0%, 100%, 0.8)

[adetyaz]

Hello, I'd like to know I can work on this, I'm from the outreachy internship programme.

[alya]

@adetyaz As noted in the contributor guide, please choose an issue with the "help wanted" label, and follow the instructions for claiming an isssue.

[adetyaz]

noted thank you.