element-hq / element-hq/element-web

Modal Border Opacity/Refraction & Background Blur/shadow Efffect

Open
#33,915 0 comments 0 reactions 0 assignees View on GitHub
A-Appearance T-Enhancement X-Needs-Design Z-ProductPolish
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

### Your use case

#### Border Opacity

Some menus have a transluscent border.
These borders can look dull/flat.
Unless you're looking carefully the transluscent effect can be missed entirely.
There is no text or interactive element on the border so it doesn't need to be conservative with its transparency effect.

Since the background of the modal doesn't move, enhancing it's transparency effect can improve visual appeal.

#### Background Blur/Shadow Effect
Also consider increasing the fading of the background.

Something might be open, e.g. the window to copy link, and it's still competing with the rest of the screen because the darkening of the background is not strong enough.

#### What would you like to do?
1. Increase the transparency of modal borders.
- Or add light source for refraction to be more apparent.

2. Increase background darkening/blur effect.

#### Why would you like to do it?
1. Improve visual appeal.
2. Improve window focus: With a stronger background blur the open modal has less competition for attention.

### Have you considered any alternatives?

_No response_

### Additional context

_No response_

Contributor guide

Open the contributing guide

Research direction

The issue does not identify files, tests, or an entry point. Start by locating the modal implementation and its current border and background effects, then clarify the intended visual treatment with the maintainers; done requires an agreed change that improves modal focus without harming usability.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.