UI redesign: main navigation menu

[terpimost]

Main navigation menu represented as a bottom bar of actions (looks like tabs). By default we can fit 6 actions without visual labels.
These actions are shortcuts to the open list of root level sections (right side menu button opens it).
In future there might be a feature to allow user to pick which links should be displayed in the bottom bar.

Mocks

Figma frame

Transition

Menu should slide from the bottom over everything, while backdrop alpha is increasing.

Open menu animation has a custom easing function:

Background transparency could have linear easing.
Closing is "300ms ease in ease out"

Icons

Majority of icons for web and mobile app are from Feather or Google or customized. For mobile app they are usually 24px size, sometimes they are 16px size if they look small, but usually stroke is the same. Stroke is converted to shapes.

I will collect mobile app icons in this Figma page

menu
align-left
at-sign
clock
edit-3
hash-italic
log-out
mail
settings
star
users

smile

log-in

chevron-down

Clarifications

Bottom bar

Icons are placed in equally spread width of rectangles. In both themes icon color is `#666699`, active/selected icons is `#000000` in light and `rgba(255, 255, 255, 0.8)` in dark theme.

Top border is a transparent color. The bar background is not transparent

Backdrop

In the light theme is rgba(0, 0, 0, 0.4) in dark theme is rgba(0, 0, 0, 0.7)

Menu panel

Light theme:

background: #F2F2F2;
border-radius: 20px 20px 0px 0px;

Dark theme:

background: #222222;
border-radius: 20px 20px 0px 0px;

Organization selection dialog

Light theme:

background: #F2F2F2;
border-radius: 20px;

Dark theme:

background: #222222;
border-radius: 20px;

Organization name

Company name:

font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 30px;

Color of chevron icon is black in light theme and white in the dark theme, 50% transparency

Separator between organization and scrollable menu

We want to have this separator with gradient from background color to transparent so when scrolled we can see it

Menu items container

Cancel button:

height: 38px;
left: 16px;
top: 8px;
background: rgba(121, 121, 134, 0.15);  /* when pressed rgba(121, 121, 134, 0.25) */
border-radius: 7px;

font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;
/* identical to box height, or 120% */

text-align: center;

In the dark theme:

background: rgba(255, 255, 255, 0.07); /* when pressed rgba(255, 255, 255, 0.17) */
color: rgba(255, 255, 255, 0.8); 

Search field

Light theme:

background: rgba(0, 0, 0, 0.07); /* when pressed rgba(0, 0, 0, 0.17) */
border-radius: 10px;

Dark theme:

background: rgba(255, 255, 255, 0.07); /* when pressed rgba(255, 255, 255, 0.17) */
border-radius: 10px;

Light: `rgba(0, 0, 0, 0.5);`, dark: `rgba(255, 255, 255, 0.5);`

font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400;
font-size: 19px;
line-height: 26px;
/* identical to box height, or 137% */

color: rgba(0, 0, 0, 0.5); /* in dark theme rgba(255, 255, 255, 0.5);*/

Menu items

font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400; /* when selected  font-weight: 600; */
font-size: 19px;
line-height: 26px;
/* identical to box height, or 137% */
color: #222222; /* in dark theme:  rgba(255, 255, 255, 0.8); */

selected list item:

background: #FFFFFF; /* in dark theme: rgba(0, 0, 0, 0.23); */
border-radius: 10px;

Counter

background: rgba(102, 102, 153, 0.15);
border-radius: 5px;
padding: 1px 6px 2px;

font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600; /* dark theme: font-weight: 400;*/
font-size: 18px;
line-height: 21px;
/* identical to box height, or 117% */

text-align: right;
font-variant: small-caps;
color: #222222; /* dark theme: rgba(255, 255, 255, 0.8); */

Counters which are not unreads have transparent background:

color is the same as in regular counters but opacity: 0.5

[Syed-Ansar]

Hey @terpimost @alya I would like to work can you assign this issue to me.

[alya]

@Syed-Ansar please pick a "help wanted" issue to work on; I'd recommend focusing on one issue to start with. Thanks!

[alya]

Related: #5497
CZO discussion