search

openethereum / fether

Decentralized and light Ethereum Wallet
BSD 3-Clause "New" or "Revised" License
123 stars 32 forks source link

Add a UI library #158

Open amaury1093 opened 6 years ago

amaury1093 commented 6 years ago

We started this project with @brianflanagan's design, and its minimal and clean style has been approved by many.

While the design itself is excellent, I would like to refactor how it's implemented in the code.

Right now: A collection of SASS files under fether-react/assets/scss/, all compiled into one huge CSS file, imported by react.

Problem: It's very hard for non-UI developers (read: the whole Parity UI team) to add new components to it. E.g. I wanted to add a on/off toggle button once, I had no idea how to do that.

Solution: Add a UI components library to this project, like Semantic UI React (also used in shell, polkadot...). We would override their default theme to match the current Fether theme (maybe with css-in-js?). After that, adding new components like toggle buttons would be easy.

ltfschoen commented 5 years ago

@amaurymartiny I just read through this blogpost https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc. Which of the CSS-in-JS libraries do you prefer (i.e. styled-components, react-jss, glamorous, aphrodite, or styletron-react)?

amaury1093 commented 5 years ago

We're going with styled-components in substrate light ui, so I'd suggest to stick with this one.