1. Jan 15, 2019
  2. Jan 13, 2019
    • Luke Schoen's avatar
      refactor: Order styles alphabetically · 284dbe05
      Luke Schoen authored
      284dbe05
    • Luke Schoen's avatar
      fix: Fix accidently removed styles · 6158b4bb
      Luke Schoen authored
      6158b4bb
    • Luke Schoen's avatar
    • Luke Schoen's avatar
      fix: Add babel-plugin-styled-components library so debugging shows name not hash · 6febb4ce
      Luke Schoen authored
      Without this babel plugin when you try to debug in Dev Tools > Elements,
      it displays the components with the styled-component name shown as a hash i.e.
      `<div class="sc-EHOje dGUdfn">`, whereas previously with CSS/Sass it showed the class name.
      
      This babel plugin displays the style-component name that we specified instead of a
      meaningless hash i.e. `<div class="App__DivContent-sc-1l7hwf9-0 jhbGUD">`, where `DivContent`
      is the name of the styled-component that we created.
      6febb4ce
    • 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
  3. Jan 11, 2019
  4. Jan 10, 2019
  5. Jan 08, 2019
  6. Jan 07, 2019