Widget: Styling Overrides
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5.5k
- Forks
- 5.4k
- PR merge metrics
- No merged PRs in 30d
Description
Problem
Currently, customizing the theme for the SwapWidget can cause weirdness in unintended parts of the user experience. For example, setting the background color of the module property to transparent can cause the intended behavior to the from section of the swap, but then the background of the token list is also transparent. Trying to set CSS overrides in JS has lifecycle implications and isn't stable in dealing with this. Trying to use vague css overrides is also unstable and has unintended consequences.
Solution
It would be really nice to have deterministic class names / ids when the swap widget is compiled to allow for predictably overrides and customized styling
Alternatives
Expanding the theming to allow for more customizability
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the SwapWidget implementation and tracing how its theme and module styles are compiled. Define deterministic class names or IDs that isolate styling between the swap sections and token list, then verify that overrides no longer affect unintended parts of the widget.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100