diff --git a/package.json b/package.json index 40ee7e19..27d29990 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "redux-raven-middleware": "^1.2.0", "redux-thunk": "^2.2.0", "styled-components": "^3.3.3", + "styled-normalize": "^8.0.0", "trezor-connect": "^5.0.28", "web3": "^0.19.0", "webpack": "^4.16.3", diff --git a/src/js/components/common/Header.js b/src/js/components/common/Header.js index d6d47c78..adb2d320 100644 --- a/src/js/components/common/Header.js +++ b/src/js/components/common/Header.js @@ -13,7 +13,7 @@ const Wrapper = styled.header` height: 28px; width: 100px; flex: 1; - } + } `; const LayoutWrapper = styled.div` diff --git a/src/js/components/common/Link.js b/src/js/components/common/Link.js new file mode 100644 index 00000000..e5bb7a9c --- /dev/null +++ b/src/js/components/common/Link.js @@ -0,0 +1,14 @@ +import React from 'react'; +import styled from 'styled-components'; +import colors from '~/js/config/colors'; + +const StyledLink = styled.a` + color: red; + text-decoration +`; + +const Link = ({ href, name }) => ( + +); + +export default StyledLink; diff --git a/src/js/components/wallet/pages/DeviceSettings.js b/src/js/components/wallet/pages/DeviceSettings.js index e2ed8fdf..f1a55c3e 100644 --- a/src/js/components/wallet/pages/DeviceSettings.js +++ b/src/js/components/wallet/pages/DeviceSettings.js @@ -1,6 +1,5 @@ import React from 'react'; import { H2 } from '~/js/components/common/Heading'; -import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; export const DeviceSettings = () => ( diff --git a/src/js/index.js b/src/js/index.js index ec0ac5c4..4979d9bc 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,6 +1,7 @@ /* @flow */ import React from 'react'; import { render } from 'react-dom'; +import baseStyles from '~/js/support/BaseStyles'; import store from './store'; import App from './router'; import { onBeforeUnload } from './actions/WalletActions'; @@ -8,7 +9,11 @@ import styles from '~/styles/index.less'; const root: ?HTMLElement = document.getElementById('root'); if (root) { - render(, root); + baseStyles(); + render( + , + root, + ); } window.onbeforeunload = () => { diff --git a/src/js/services/index.js b/src/js/services/index.js index ebcb6937..b2ed5a5b 100644 --- a/src/js/services/index.js +++ b/src/js/services/index.js @@ -1,6 +1,3 @@ -/* @flow */ - - import WalletService from './WalletService'; import LogService from './LogService'; import RouterService from './RouterService'; diff --git a/src/js/support/BaseStyles.js b/src/js/support/BaseStyles.js new file mode 100644 index 00000000..15eb6c9a --- /dev/null +++ b/src/js/support/BaseStyles.js @@ -0,0 +1,24 @@ +import { injectGlobal } from 'styled-components'; + +import normalize from 'styled-normalize'; + +const baseStyles = () => injectGlobal` + ${normalize}; + + * , *:before , *:after { + box-sizing: border-box; + } + + * { + margin: 0; + padding: 0; + } + + *:focus, *:active, *:active:focus, *::selection, *::-moz-selection { + outline: 0 !important; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } +`; + +export default baseStyles; diff --git a/src/styles/base.less b/src/styles/base.less index 54d6d27d..f4fdda8a 100644 --- a/src/styles/base.less +++ b/src/styles/base.less @@ -1,18 +1,3 @@ -* , *:before , *:after { - box-sizing: border-box; -} - -* { - margin: 0; - padding: 0; -} - -*:focus, *:active, *:active:focus, *::selection, *::-moz-selection { - outline: 0 !important; - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - html, body { width: 100%; height: 100%; diff --git a/yarn.lock b/yarn.lock index 1bfd2ea9..7ba42c8e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9105,6 +9105,10 @@ styled-components@^3.3.3: stylis-rule-sheet "^0.0.10" supports-color "^3.2.3" +styled-normalize@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/styled-normalize/-/styled-normalize-8.0.0.tgz#54881c9389540bf9fb2a3d34dca2e2d4d68601f2" + stylelint-config-recommended@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-2.1.0.tgz#f526d5c771c6811186d9eaedbed02195fee30858"