This repository has been archived by the owner on May 24, 2022. It is now read-only.
Add a UI library #158
Labels
Milestone
Comments
|
@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. |
|
We're going with styled-components in substrate light ui, so I'd suggest to stick with this one. |
This was referenced Jan 1, 2019
Merged
ltfschoen
added a commit
that referenced
this issue
Jan 13, 2019
…etails. * Add styled-components dependency to start introducing it to components instead of Sass * Wrap App.js with styled-components ThemeProvider and inject `fetherTheme` prop colours so they are available to child components. * Added styled-components' GlobalStyle https://www.styled-components.com/docs/faqs boilerplate as child of ThemeProvider so global styles may be defined here * Replace assets/sass/layouts/_wrapper.scss with styled-components including: * DivContent is declared in App.js since it is only used here * DivWindow is declared in App.js since it is only used here * DivWindowContent is declared in shared folder since used by different components * Removed assets/sass/layouts/_wrapper.scss. Noting that `.connector` class is not used * Use styled-components in TxForm and TxDetails components (that were introduced in PR #307). * Add a style.js file in the same directory of the component where styled-components are used * Add styled-components theme animations folder with a SlideInLeft animation and introduce a theme to TxDetails * Add keyframes animation to TxDetails component (i.e. slide-in animation that's used in the details section that appears when you click Details/Hide button on the Send Ether/THIBCoin page) * Fix `faint` style implementation to use `rgba` with styled-components * Note that I decided not to use defaultProps feature of styled-components as it bloats the code too much * Note that currently we are using Sass _variables.scss for colour variables, and since many components still use some of the Sass variables we cannot remove them yet. * Note that the original branch where this work was done is https://github.com/paritytech/fether/compare/luke-293-show-tx-fee-styled-components?expand=1, but since multiple PRs have since been merged it was easier to just code again using it as reference * Disadvantage of styled-components appears to be when you go to debug components in Dev Tools > Elements. The classNames appear as a hash `<div class="sc-EHOje dGUdfn">` instead of the classname!!
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
The text was updated successfully, but these errors were encountered: