element-hq / element-hq/element-web

Unify outline look for timeline elements

Open
#22,746 0 comments 0 reactions 0 assignees View on GitHub
A-Timeline O-Frequent S-Tolerable T-Defect X-Needs-Design
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

https://user-images.githubusercontent.com/2803622/177496203-5ec69eb2-c722-44bf-a5cb-49587b99358e.mp4

- message has no outline
- reaction has a pretty contrast rich outline without hovering, and even richer when hovering
- thread summary has no outline by default, and gets an outline that is softer than the reaction's default outline when hovering
- context menu (proper name?) has yet another outline for the whole menu, and no outline for the item that is hovered over

![image](https://user-images.githubusercontent.com/2803622/177496370-f5bf47b4-b823-4833-9fb6-529fcd21a708.png)

- date border has no outline at all

![image](https://user-images.githubusercontent.com/2803622/177496402-07d3ad8d-605f-47d5-99dd-c73ca5b8a444.png)

- composer buttons are totally different yet again (green)
- no outlines (except that chrome accessibility thingy selecting Sticker in the screenshot, which looks different yet)

### Outcome

#### What did you expect?
unified look and feel
#### What happened instead?
see above

### Operating system

arch

### Application version

Element Nightly version: 2022070501 Olm version: 3.2.8

### How did you install the app?

aur

### Homeserver

_No response_

### Will you send logs?

No

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the attached video and screenshots, then locate the timeline UI elements they show: messages, reactions, thread summaries, context menus, date borders, and composer buttons. Compare their existing outline and hover styling, and define a consistent visual treatment across these elements; the issue is complete when the timeline has a unified look and feel.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.