UI redesign: Recipient header bar (topic title bar)

[terpimost]

Checklist:

• Stream message header bar colors
• DM header bar colors
• Update icons
• Date styling in header bar

---

As part of the redesign we want to update styles and tune sizing of elements of the recipient bar.
This might be a big task, which could be decomposed to multiple issues.

Every message and recipient bar are united into a "topic" card:

In the light theme the whole card has a border:

border: 1px solid #D7D7D7;
border-radius: 5px;

and in the dark theme is:

border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 5px;

The bar itself has a height of 29px including the bottom border:

The bar could be of 2 types: stream messages and PM messages.

Stream messages

For stream messages the color consist from 2 backgrounds, one of which could be the general color of the hole card or implemented by using 2 css gradients.

Don't forget to round top corners and create a bottom bar, which is the same color as the whole card border. Alternatively the bottom bar could be implemented as a shadow:

Light theme:

Discussion and materials about the topic color calculation is here https://chat.zulip.org/#narrow/stream/101-design/topic/UI.20redesign.3A.20stream.2Ftopic.20header.20bar/near/1413426

background: linear-gradient(0deg, rgba(239, 206, 124, 0.03), rgba(239, 206, 124, 0.03)), #FFFFFF;
box-shadow: 0px 1px 0px #E5E5E5;
border-radius: 5px 5px 0px 0px;

Dark theme

Discussion and materials about the topic color calculation is here https://chat.zulip.org/#narrow/stream/101-design/topic/UI.20redesign.3A.20stream.2Ftopic.20header.20bar/near/1413426

background: linear-gradient(0deg, rgba(102, 157, 105, 0.08), rgba(102, 157, 105, 0.08)), #242424;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 0px 0px;

PM messages

If the bar is for PMs (PM style card) the styles should be:

Light theme

background: #F3F0E7;
box-shadow: 0px 1px 0px #D7D7D7;
border-radius: 5px 5px 0px 0px;

Dark theme

background: #403A26;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 0px 0px;

I understand that this is might be outside this task, but just pointing attention in case you can affect this case somehow:

When the topic is sticky we want it covering that 1 px of a top border, instead having 1px of app top bar border and 1px of recipient bar border (actually is the border of the whole card).

Icons

• mute.svg - Material icon volume (rounded) and custom cross symbol
• hashtag - Custom icon
• users - https://feathericons.com/?query=users 1.33 stroke
• external-link-bold - https://feathericons.com/?query=external-link 2 stroke
• edit-bold - custom icon
• check-bold - https://feathericons.com/?query=check 3 stroke
• chevron-right - https://feathericons.com/?query=chevron-right 1.33 stroke

Spacing between left and right icons and the stream/topic name is 5px while spacing between chevron-right icon and stream name/topic is 1px


The color of chevron-right icon in light theme is rgba(0, 0, 0, 0.3) and in black theme is rgba(255, 255, 255, 0.3)
The color of other (bigger and clickable) icons in light theme is rgba(0, 0, 0, 0.2) and rgba(255, 255, 255, 0.2) in black theme. On hover the icon of a button goes from 20% opacity to 40%, so rgba(0, 0, 0, 0.4) in light and rgba(255, 255, 255, 0.4) in dark

Clickable icons are actually 26px x 26px buttons, and on hover they have:
Light theme:

background: rgba(0, 0, 0, 0.05);
border-radius: 4px;

Dark theme:

background: rgba(255, 255, 255, 0.05);
border-radius: 4px;

External link icon color is hsla(240, 50%, 69%, 1) for both themes

We've been asked to use the current way of Zulip icon supply (converts them to a custom font) if it possible to achieve the precise result from the design

The date on the top right has these styles:

text-align: right;
font-variant: all-small-caps;
font-size: 15px;
line-height: 18px;

positioning should be like this:

light theme color is hsla(0, 0%, 37%, 1);, dark theme color is hsla(0, 0%, 70%, 1)

[zulipbot]

Hello @zulip/design members, this issue was labeled with the "redesign" label, so you may want to check it out!

[timabbott]

I think we should try prototyping this. I can't really tell a priori to what extent we'll feel blocked on integrating this until we've changed the backgrounds, and I think the only way to find that out is try a prototype. It's possible we'll find an intermediate state that we can test-deploy on chat.zulip.org for evaluation or even merge that has only minor changes from the design specified here (and then we'd append the final bits to the plan for changing the sidebar background colors)

[zulipbot]

@amanagr You have been unassigned from this issue because you have not made any updates for over 14 days. Please feel free to reclaim the issue if you decide to pick up again. Thanks!

[alya]

The release goal parts of this issue have been completed.

[zulipbot]

@amanagr You have been unassigned from this issue because you have not made any updates for over 14 days. Please feel free to reclaim the issue if you decide to pick up again. Thanks!

[timabbott]

Can we extract the remaining icons work to a new issue? I feel like this sort of issue where 90% of the work has been done tends to just sit around. Alternatively, someone could just finish this.

[terpimost]

Sure. In fact I would like to revisit that part of the UI. We discussed with @alya recently that we could address contrast issues and use this bar more bravely.

So "Topic bar actions" is on me...