Merge pull request #267 from trezor/upgrade-styled-components

Upgraded react, react-dom, styled components, removed styled-media-query

package.json

@@ -49,8 +49,8 @@
         "raf": "^3.4.0",
         "raven-js": "^3.22.3",
         "rc-tooltip": "^3.7.0",
-        "react": "^16.4.2",
-        "react-dom": "^16.2.0",
+        "react": "^16.6.3",
+        "react-dom": "^16.6.3",
         "react-hot-loader": "^4.3.4",
         "react-json-view": "^1.19.1",
         "react-qr-svg": "^2.1.0",
@@ -67,9 +67,8 @@
         "redux-raven-middleware": "^1.2.0",
         "redux-thunk": "^2.2.0",
         "rimraf": "^2.6.2",
-        "styled-components": "^3.4.9",
-        "styled-media-query": "^2.0.2",
-        "styled-normalize": "^8.0.0",
+        "styled-components": "^4.1.2",
+        "styled-normalize": "^8.0.4",
         "trezor-connect": "6.0.2",
         "web3": "1.0.0-beta.35",
         "webpack": "^4.16.3",

src/components/inputs/Input/index.js

@@ -176,7 +176,7 @@ class Input extends PureComponent {
                             height={this.props.height}
                             trezorAction={this.props.trezorAction}
                             hasIcon={this.getIcon(this.props.state).length > 0}
-                            innerRef={this.props.innerRef}
+                            ref={this.props.innerRef}
                             hasAddon={!!this.props.sideAddons}
                             type={this.props.type}
                             color={this.getColor(this.props.state)}

src/index.js

@@ -1,13 +1,20 @@
 /* @flow */
 import React from 'react';
 import { render } from 'react-dom';
-import baseStyles from 'support/styles';
+import { Normalize } from 'styled-normalize';
+import BaseStyles from 'support/styles';
 import App from 'views/index';
 
 const root: ?HTMLElement = document.getElementById('trezor-wallet-root');
 if (root) {
-    baseStyles();
-    render(<App />, root);
+    render(
+        <React.Fragment>
+            <Normalize />
+            <BaseStyles />
+            <App />
+        </React.Fragment>,
+        root,
+    );
 }
 
 window.onbeforeunload = () => {

src/support/styles/index.js

@@ -1,13 +1,10 @@
-import { injectGlobal } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
 import colors from 'config/colors';
-import normalize from 'styled-normalize';
 
 import tooltipStyles from './Tooltip';
 import animationStyles from './Animations';
 
-const baseStyles = () => injectGlobal`
-    ${normalize};
-
+const baseStyles = createGlobalStyle`
     html, body {
         width: 100%;
         height: 100%;

src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js

@@ -19,11 +19,8 @@ type State = {
     footerFixed: boolean,
 }
 
-const AsideWrapper = styled.aside.attrs({
-    style: ({ minHeight }) => ({
-        minHeight,
-    }),
-})`
+const AsideWrapper = styled.aside`
+    min-height: ${props => props.minHeight}px;
     position: relative;
     top: 0px;
     width: 320px;
@@ -33,13 +30,10 @@ const AsideWrapper = styled.aside.attrs({
     border-right: 1px solid ${colors.DIVIDER};
 `;
 
-const StickyContainerWrapper = styled.div.attrs({
-    style: ({ top, left, paddingBottom }) => ({
-        top,
-        left,
-        paddingBottom,
-    }),
-})`
+const StickyContainerWrapper = styled.div`
+    top: ${props => props.top}px;
+    left: ${props => props.left}px;
+    padding-bottom: ${props => props.paddingBottom}px;
     position: fixed;
     border-right: 1px solid ${colors.DIVIDER};
     width: 320px;
@@ -160,7 +154,7 @@ export default class StickyContainer extends React.PureComponent<Props, State> {
             <AsideWrapper
                 footerFixed={this.state.footerFixed}
                 minHeight={this.state.asideMinHeight}
-                innerRef={this.asideRefCallback}
+                ref={this.asideRefCallback}
                 onScroll={this.handleScroll}
                 onTouchStart={this.handleScroll}
                 onTouchMove={this.handleScroll}
@@ -170,11 +164,11 @@ export default class StickyContainer extends React.PureComponent<Props, State> {
                     paddingBottom={this.state.wrapperBottomPadding}
                     top={this.state.wrapperTopOffset}
                     left={this.state.wrapperLeftOffset}
-                    innerRef={this.wrapperRefCallback}
+                    ref={this.wrapperRefCallback}
                 >
                     {React.Children.map(this.props.children, (child) => { // eslint-disable-line arrow-body-style
                         return child.key === 'sticky-footer' ? React.cloneElement(child, {
-                            innerRef: this.footerRefCallback,
+                            ref: this.footerRefCallback,
                             position: this.state.footerFixed ? 'fixed' : 'relative',
                         }) : child;
                     })}

src/views/Wallet/components/LeftNavigation/index.js

@@ -44,11 +44,8 @@ const TransitionContentWrapper = styled.div`
     vertical-align: top;
 `;
 
-const Footer = styled.div.attrs({
-    style: ({ position }) => ({
-        position,
-    }),
-})`
+const Footer = styled.div`
+    position: ${props => props.position};
     width: 320px;
     bottom: 0;
     background: ${colors.MAIN};

src/views/Wallet/components/TopNavigationAccount/index.js

@@ -61,7 +61,7 @@ class TopNavigationAccount extends React.PureComponent<Props> {
 
         const basePath = `/device/${state.device}/network/${state.network}/account/${state.account}`;
         return (
-            <Wrapper className="account-tabs" innerRef={this.wrapperRefCallback}>
+            <Wrapper className="account-tabs" ref={this.wrapperRefCallback}>
                 <StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
                 <StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
                 <StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>

src/views/Wallet/views/Account/Receive/index.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { QRCode } from 'react-qr-svg';
 import styled from 'styled-components';
-import media from 'styled-media-query';
 
 import { H2 } from 'components/Heading';
 import Button from 'components/Button';
@@ -48,9 +47,9 @@ const ShowAddressButton = styled(Button)`
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
-    ${media.lessThan('795px')`
+    @media screen and (max-width: 795px) {
         margin-top: 10px;
-    `}
+    }
 `;
 
 const ShowAddressIcon = styled(Icon)`
@@ -77,9 +76,9 @@ const Row = styled.div`
     display: flex;
     width: 100%;
 
-    ${media.lessThan('795px')`
+    @media screen and (max-width: 795px) {
         flex-direction: column;
-    `}
+    }
 `;
 
 const QrWrapper = styled.div`