element-hq / element-hq/element-web
Modal Border Opacity/Refraction & Background Blur/shadow Efffect
- 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
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