• Luke Schoen's avatar
    feat: Relates to #158. Add styled-components UI library. See commit details. · ba1664e8
    Luke Schoen authored
    * 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!!
    ba1664e8