UI redesign: message content layout

[terpimost]

This issue is about new message content layout, not colors, not any other functionality.
I don't know how exactly mobile message look detached from the web or if it is the same css but for different media query.
If web app would have the same layout of message on mobile that would be great.
All sizes are in 100% scale (no high definition), so my px would be points in iOS and dp in android I guess.

[Figma ref](https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=538%3A20300) (if want to inspect details please make a copy so you have edit rights to your copy)

I'm very sorry but mockup containers structure isn't clean. So I try to clarify things here and in chat if you have any confusion.

The whole container of messages utilizes 100% of the width on mobile. There is no any gap between 2 messages.

Within the message there are such paddings for text

Notice the vertical space of 2px between the author and the message.

In case the message is without an author:

Left and right margin space will be utilized for different 16px size icons (moved, edited, bookmarked):

The font is the same as in web app:

Let me know if it is not possible to use it. I was hoping we could embed Source Sans 3 for the whole mobile app.

Author

Author container can be of a fixed width with ellipsis of a long name:

In my mock I gave a bit of space around the userpic:

User pic is 32x32 with 3px corner radius

For the time display I'm using small caps:

You can make it 50% transparent black color.

Topic bars

Topic bar is 40px height

font-family: Source Sans 3;
font-size: 16px;
font-weight: 600;
line-height: 18px;
letter-spacing: 0.02em;
text-align: left;

A date is a bit tricky. It has font-variant: small-caps; while the font-size is 16px. Since the background almost never white the color is 40% opacity black in the light theme.
I made it vertically aligned
but the correct way would be to align it according to the text baseline:
. This might require to manipulate the top margin/padding

Topic/stream/ recipient bar color

The algorithm of colorizing the recipient bar is described here https://codepen.io/terpimost/pen/WNzdrJN?editors=0010
The core idea is in these two functions

To see default zulip colors scroll example all the way down