New right panel visual language

[germain-gg]

Aligning the right panel with the new visual language. This also updates the old room header to align it with the base card header.

The "search" triggers the old in RoomView search and is a deliberate compromise made with @nadonomy .

This is not expected to go behind a labs flag and will be rolled out straight away as all the functionality are meant to work the same, we are only adapting the visuals and improving contrast in a lot of places.

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

---

Here's what your changelog entry will look like:

✨ Features

• New right panel visual language (#11664).

[nadonomy]

The "search" triggers the old in RoomView search and is a deliberate compromise made with @nadonomy .

On this - rationale is:

1. Out of scope from header/right panel
2. We can ship good header/panel updates without it
3. No worse than what we have today

[nadonomy]

Adding as a PR comment for now, so @americanrefugee @janogarcia can consider as part of their more formal review and we can funnel into relevant iteration/issues:

• Room header cursor: Doesn't switch from pointer to hand reliably. Need to hover over the room title I think, instead of just anywhere in the header.
• Searching for messages:
  • Faux search bar triggers some kind of browser autocomplete for me after clicking. Should be labelled 'Search for messages or similar'.
  • Initially suggested to re-stylise as a button (hover states etc) similar to the faux search button above the room list. But, that's not a standard component.
  • From internal discussion, advocate to just lose the faux search bar altogether and rely on the button row. We'll improve search later.
• Hairline stroke: The harline stroke in the people & files views makes the layout feel too grid-like. I think we should hide it as a part of this PR as it effects basically every sub view, including profiles. We can trivially add the stroke back when implementing the new tab designs properly.
• Invite button: The invite button looks too visually strong imo. Can we tone it down to a text button or perhaps a fully rounded primary button?

Otherwise, looking/feeling on the right track!

[kerryarchibald]

Left some questions, but looks good!

[kerryarchibald]

Are there cases where we want a BaseCard without back and close buttons?

[germain-gg]

Yes! On the room summary card, the header is basically gone, hence why i introduced this new behaviour

[americanrefugee]

@nadonomy asked "Invite button: The invite button looks too visually strong imo. Can we tone it down to a text button or perhaps a fully rounded primary button?"

• We should be using the new Compound Web Secondary Button
  • Also, @janogarcia and I decided to change the Secondary Button outline to Light/color/border/interactive/Secondary, as this is a more subtle treatment but still is still accessible
• The button should go below the right panel header, just above the People list
• The right panel header should display the label "People" as shown here until we can implement the horizontal subnav

@janogarcia and I would also like to discuss this with @germain-gg in general to understand why the implementation is so different than the design specs.

[andybalaam]

Most recent failure looks like element-hq/element-web#25485 but that issue is not clear what error happens, so I'll log a new one.

[andybalaam]

Flaky test issue: element-hq/element-web#26407