Created base styles

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",

src/js/components/common/Header.js

@@ -13,7 +13,7 @@ const Wrapper = styled.header`
          height: 28px;         
          width: 100px;
          flex: 1;
-     }
+    }
 `;
 
 const LayoutWrapper = styled.div`

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 }) => (
+    <Link href={href} />
+);
+
+export default StyledLink;

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 = () => (

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(<App />, root);
+    baseStyles();
+    render(
+        <App />,
+        root,
+    );
 }
 
 window.onbeforeunload = () => {

src/js/services/index.js

@@ -1,6 +1,3 @@
-/* @flow */
-
-
 import WalletService from './WalletService';
 import LogService from './LogService';
 import RouterService from './RouterService';

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;

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%;

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"