POC of styled component

.babelrc

@@ -17,7 +17,8 @@
         ["babel-plugin-root-import", {
             "rootPathSuffix": "./src",
             "rootPathPrefix": "~"
-        }]
+        }],
+        "babel-plugin-styled-components"
     ],
     "env": {
         "test": {

package.json

@@ -33,6 +33,7 @@
         "hdkey": "^0.8.0",
         "html-webpack-plugin": "^3.2.0",
         "mini-css-extract-plugin": "^0.4.1",
+        "prop-types": "^15.6.2",
         "raf": "^3.4.0",
         "raven-js": "^3.22.3",
         "rc-tooltip": "^3.7.0",
@@ -51,6 +52,7 @@
         "redux-logger": "^3.0.6",
         "redux-raven-middleware": "^1.2.0",
         "redux-thunk": "^2.2.0",
+        "styled-components": "^3.3.3",
         "trezor-connect": "5.0.13",
         "web3": "^0.19.0",
         "webpack": "^4.16.3",
@@ -62,6 +64,7 @@
         "babel-eslint": "^8.2.6",
         "babel-loader": "^7.1.5",
         "babel-plugin-root-import": "^6.1.0",
+        "babel-plugin-styled-components": "^1.5.1",
         "babel-plugin-transform-class-properties": "^6.24.1",
         "babel-plugin-transform-flow-strip-types": "^6.22.0",
         "babel-plugin-transform-object-rest-spread": "^6.23.0",

src/js/components/common/Heading.js

@@ -0,0 +1,40 @@
+// @flow
+
+import styled, { css } from 'styled-components';
+import colors from '~/js/config/colors';
+
+const baseStyles = css`
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    color: ${colors.black};
+    font-weight: bold;
+`;
+
+const H1 = styled.h1`
+  ${baseStyles}
+  font-size: 16px;
+`;
+
+const H2 = styled.h2`
+  ${baseStyles};
+  font-size: 14px;
+`;
+
+const H3 = styled.h3`
+  ${baseStyles};
+  font-size: 12px;
+`;
+
+const H4 = styled.h4`
+  ${baseStyles};
+  font-size: 10px;
+`;
+
+const Heading = {
+    H1,
+    H2,
+    H3,
+    H4,
+};
+
+module.exports = Heading;

src/js/components/wallet/account/receive/Receive.js

@@ -1,7 +1,7 @@
 /* @flow */
-
-
 import React, { Component } from 'react';
+import styled from 'styled-components';
+import { H2 } from '~/js/components/common/Heading';
 
 import Tooltip from 'rc-tooltip';
 import { QRCode } from 'react-qr-svg';
@@ -11,6 +11,7 @@ import { Notification } from '~/js/components/common/Notification';
 
 import type { Props } from './index';
 
+const Wrapper = styled.div``;
 
 const Receive = (props: Props) => {
     const device = props.wallet.selectedDevice;
@@ -67,18 +68,17 @@ const Receive = (props: Props) => {
         );
     }
 
-    const ver = null;
+    let ver = null;
     if (props.modal.opened && props.modal.windowType === 'ButtonRequest_Address') {
         className = 'address verifying';
         address = account.address;
-        // ver = (<div className="confirm">Confirm address on TREZOR</div>)
+        ver = (<div className="confirm">Confirm address on TREZOR</div>);
         button = (<div className="confirm">{ account.network } account #{ (account.index + 1) }</div>);
     }
 
     return (
-        <div>
+        <Wrapper>
-            <h2>Receive Ethereum or tokens</h2>
+            <H2>Receive Ethereum or tokens</H2>
-
             <div className={className}>
                 { ver }
                 <div className="value">
@@ -87,7 +87,7 @@ const Receive = (props: Props) => {
                 { button }
             </div>
             { qrCode }
-        </div>
+        </Wrapper>
     );
 };
 

src/js/config/colors.js

@@ -0,0 +1,3 @@
+export default {
+    BLACK: '#000000',
+};

yarn.lock

@@ -24,6 +24,12 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/helper-annotate-as-pure@^7.0.0-beta.37":
+  version "7.0.0-beta.55"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.55.tgz#3c3e4c00e14e7dea917938e35ed5d9156cdd35ce"
+  dependencies:
+    "@babel/types" "7.0.0-beta.55"
+
 "@babel/helper-function-name@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz#e18552aaae2231100a6e485e03854bc3532d44dd"
@@ -92,6 +98,14 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-beta.55":
+  version "7.0.0-beta.55"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.55.tgz#7755c9d2e58315a64f05d8cf3322379be16d9199"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -928,6 +942,14 @@ babel-plugin-root-import@^6.1.0:
   dependencies:
     slash "^1.0.0"
 
+babel-plugin-styled-components@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.1.tgz#31dbeb696d1354d1585e60d66c7905f5e474afcd"
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0-beta.37"
+    babel-types "^6.26.0"
+    stylis "^3.0.0"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -1727,6 +1749,13 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+buffer@^5.0.3:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.0.tgz#53cf98241100099e9eeae20ee6d51d21b16e541e"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+
 builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -2443,6 +2472,10 @@ css-animation@^1.3.2:
     babel-runtime "6.x"
     component-classes "^1.2.5"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+
 css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -2483,6 +2516,14 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
+css-to-react-native@^2.0.3:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.1.tgz#7f3f4c95de65501b8720c87bf0caf1f39073b88e"
+  dependencies:
+    css-color-keywords "^1.0.0"
+    fbjs "^0.8.5"
+    postcss-value-parser "^3.3.0"
+
 css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -3548,6 +3589,18 @@ fbjs@^0.8.16, fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
+fbjs@^0.8.5:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 figures@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -7275,6 +7328,10 @@ react-input-autosize@^2.1.2:
   dependencies:
     prop-types "^15.5.8"
 
+react-is@^16.3.1:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -8476,6 +8533,29 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
+styled-components@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.3.3.tgz#09e702055ab11f7a8eab8229b1c0d0b855095686"
+  dependencies:
+    buffer "^5.0.3"
+    css-to-react-native "^2.0.3"
+    fbjs "^0.8.16"
+    hoist-non-react-statics "^2.5.0"
+    is-plain-object "^2.0.1"
+    prop-types "^15.5.4"
+    react-is "^16.3.1"
+    stylis "^3.5.0"
+    stylis-rule-sheet "^0.0.10"
+    supports-color "^3.2.3"
+
+stylis-rule-sheet@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+
+stylis@^3.0.0, stylis@^3.5.0:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.3.tgz#99fdc46afba6af4deff570825994181a5e6ce546"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -8761,6 +8841,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+ua-parser-js@^0.7.18:
+  version "0.7.18"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
+
 ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"