diff --git a/.babelrc b/.babelrc index e69226b0..16b8d93a 100644 --- a/.babelrc +++ b/.babelrc @@ -17,7 +17,8 @@ ["babel-plugin-root-import", { "rootPathSuffix": "./src", "rootPathPrefix": "~" - }] + }], + "babel-plugin-styled-components" ], "env": { "test": { diff --git a/package.json b/package.json index cd1c6c0a..12fdc04e 100644 --- a/package.json +++ b/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", diff --git a/src/js/components/common/Heading.js b/src/js/components/common/Heading.js new file mode 100644 index 00000000..9db6fb9f --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/js/components/wallet/account/receive/Receive.js b/src/js/components/wallet/account/receive/Receive.js index e5960a2e..2dc4e007 100644 --- a/src/js/components/wallet/account/receive/Receive.js +++ b/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 = (
Confirm address on TREZOR
) + ver = (
Confirm address on TREZOR
); button = (
{ account.network } account #{ (account.index + 1) }
); } return ( -
-

Receive Ethereum or tokens

- + +

Receive Ethereum or tokens

{ ver }
@@ -87,7 +87,7 @@ const Receive = (props: Props) => { { button }
{ qrCode } -
+
); }; diff --git a/src/js/config/colors.js b/src/js/config/colors.js new file mode 100644 index 00000000..ce72470b --- /dev/null +++ b/src/js/config/colors.js @@ -0,0 +1,3 @@ +export default { + BLACK: '#000000', +}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index a6b833a1..a2694ede 100644 --- a/yarn.lock +++ b/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"