Room Header Highlight Obstructs Highlight of Shortcut Buttons

Open Beginner friendly
#33,918 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
design, frontend

Research direction

Inspect the Element Web Room header implementation and the related issue #33586 first. Confirm how the banner, Room name, avatar, and shortcut buttons respond to hover; this is done when the highlight is limited to the Room name while shortcut-button highlights remain clearly visible in dark mode.

Written by the indexing model from the issue text.

Description

A-Room-View T-Enhancement X-Needs-Design Z-ProductPolish
Your use case

You can access the Room info panel by clicking any empty space on the banner and the Room name. However when you hover on the banner it is highlighted. The highlight of the banner makes the highlight of the shortcut buttons difficult to see (dark mode).

What would you like to do?

Limit the highlight to the Room name.
e.g.
624060787-47f34180-40dd-4e70-8044-6f8e27243b5f.png

Why would you like to do it?

Improve discoverability of the Room avatar and Room name.
Improve visibility of the highlight effect on the shortcut buttons in the header

Have you considered any alternatives?

No response

related

https://github.com/element-hq/element-web/issues/33586

Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
Avg merge
2d 4h
Merged PRs (30d)
168

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from element-hq/element-web

All issues in element-hq/element-web

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.