Merge branch 'master' into sign-and-verify-readonly

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": "^16.6.3",
-        "react-dom": "^16.2.0",
+        "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-components": "^4.1.2",
-        "styled-media-query": "^2.0.2",
+        "styled-normalize": "^8.0.4",
-        "styled-normalize": "^8.0.0",
         "trezor-connect": "6.0.2",
         "web3": "1.0.0-beta.35",
         "webpack": "^4.16.3",

src/components/Textarea/index.js

@@ -99,7 +99,7 @@ const StyledTextarea = styled(Textarea)`
 `;
 
 const TopLabel = styled.span`
-    padding-bottom: 8px;
+    padding-bottom: 10px;
     color: ${colors.TEXT_SECONDARY};
 `;
 

src/components/inputs/Input/index.js

@@ -29,7 +29,7 @@ const InputIconWrapper = styled.div`
 `;
 
 const TopLabel = styled.span`
-    padding-bottom: 8px;
+    padding-bottom: 10px;
     color: ${colors.TEXT_SECONDARY};
 `;
 
@@ -183,7 +183,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(
-    render(<App />, root);
+        <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`
+const baseStyles = createGlobalStyle`
-    ${normalize};
-
     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({
+const AsideWrapper = styled.aside`
-    style: ({ minHeight }) => ({
+    min-height: ${props => props.minHeight}px;
-        minHeight,
-    }),
-})`
     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({
+const StickyContainerWrapper = styled.div`
-    style: ({ top, left, paddingBottom }) => ({
+    top: ${props => props.top}px;
-        top,
+    left: ${props => props.left}px;
-        left,
+    padding-bottom: ${props => props.paddingBottom}px;
-        paddingBottom,
-    }),
-})`
     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({
+const Footer = styled.div`
-    style: ({ position }) => ({
+    position: ${props => props.position};
-        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,9 +2,8 @@
 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 Title from 'views/Wallet/components/Title';
 import Button from 'components/Button';
 import Icon from 'components/Icon';
 import Tooltip from 'components/Tooltip';
@@ -20,7 +19,7 @@ import VerifyAddressTooltip from './components/VerifyAddressTooltip';
 import type { Props } from './Container';
 
 const Label = styled.div`
-    padding: 25px 0 5px 0;
+    padding-bottom: 10px;
     color: ${colors.TEXT_SECONDARY};
 `;
 
@@ -43,14 +42,17 @@ const ShowAddressButton = styled(Button)`
     display: flex;
     height: 40px;
     align-items: center;
+    align-self: flex-end;
     justify-content: center;
 
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
-    ${media.lessThan('795px')`
+    @media screen and (max-width: 795px) {
         margin-top: 10px;
-    `}
+        align-self: auto;
+        border-radius: 3px;
+    }
 `;
 
 const ShowAddressIcon = styled(Icon)`
@@ -76,10 +78,11 @@ const EyeButton = styled(Button)`
 const Row = styled.div`
     display: flex;
     width: 100%;
+    padding-bottom: 28px;
 
-    ${media.lessThan('795px')`
+    @media screen and (max-width: 795px) {
         flex-direction: column;
-    `}
+    }
 `;
 
 const QrWrapper = styled.div`
@@ -114,15 +117,15 @@ const AccountReceive = (props: Props) => {
     return (
         <Content>
             <React.Fragment>
-                <H2>Receive Ethereum or tokens</H2>
+                <Title>Receive Ethereum or tokens</Title>
                 <AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
-                    <Label>Address</Label>
                     <Row>
                         <Input
                             type="text"
                             isReceiveAddress
                             readOnly
                             autoSelect
+                            topLabel="Address"
                             value={address}
                             isPartiallyHidden={isAddressHidden}
                             trezorAction={isAddressVerifying ? (

src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js

@@ -22,10 +22,6 @@ type Props = BaseProps & {
 // same variable also in "AccountSend/index.js"
 const SmallScreenWidth = '850px';
 
-const InputRow = styled.div`
-    margin-bottom: 20px;
-`;
-
 const InputLabelWrapper = styled.div`
     display: flex;
     align-items: center;
@@ -45,7 +41,7 @@ const AdvancedSettingsWrapper = styled.div`
     border-top: 1px solid ${colors.DIVIDER};
 `;
 
-const GasInputRow = styled(InputRow)`
+const GasInputRow = styled.div`
     width: 100%;
     display: flex;
 
@@ -55,7 +51,8 @@ const GasInputRow = styled(InputRow)`
 `;
 
 const GasInput = styled(Input)`
-    min-height: 85px;
+    /* min-height: 85px; */
+    padding-bottom: 28px;
     &:first-child {
         padding-right: 20px;
     }
@@ -63,13 +60,12 @@ const GasInput = styled(Input)`
     @media screen and (max-width: ${SmallScreenWidth}) {
         &:first-child {
             padding-right: 0;
-            margin-bottom: 2px;
         }
     }
 `;
 
 const StyledTextarea = styled(Textarea)`
-    margin-bottom: 20px;
+    padding-bottom: 28px;
     min-height: 80px;
 `;
 
@@ -214,25 +210,27 @@ const AdvancedForm = (props: Props) => {
                     spellCheck="false"
                     topLabel={(
                         <InputLabelWrapper>
-                            Gas price
+                            <Left>
-                            <Tooltip
+                                Gas price
-                                content={(
+                                <Tooltip
-                                    <React.Fragment>
+                                    content={(
-                                        Gas price refers to the amount of ether you are willing to pay for every
+                                        <React.Fragment>
-                                        unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
+                                            Gas price refers to the amount of ether you are willing to pay for every
-                                        makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
+                                            unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
-                                    </React.Fragment>
+                                            makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
-                                )}
+                                        </React.Fragment>
-                                maxWidth={400}
+                                    )}
-                                readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
+                                    maxWidth={400}
-                                placement="top"
+                                    readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
-                            >
+                                    placement="top"
-                                <Icon
+                                >
-                                    icon={ICONS.HELP}
+                                    <Icon
-                                    color={colors.TEXT_SECONDARY}
+                                        icon={ICONS.HELP}
-                                    size={24}
+                                        color={colors.TEXT_SECONDARY}
-                                />
+                                        size={24}
-                            </Tooltip>
+                                    />
+                                </Tooltip>
+                            </Left>
                         </InputLabelWrapper>
                     )}
                     bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
@@ -244,21 +242,23 @@ const AdvancedForm = (props: Props) => {
             <StyledTextarea
                 topLabel={(
                     <InputLabelWrapper>
-                        Data
+                        <Left>
-                        <Tooltip
+                            Data
-                            content={(
+                            <Tooltip
-                                <React.Fragment>
+                                content={(
-                                    Data is usually used when you send transactions to contracts.
+                                    <React.Fragment>
-                                </React.Fragment>
+                                        Data is usually used when you send transactions to contracts.
-                            )}
+                                    </React.Fragment>
-                            placement="top"
+                                )}
-                        >
+                                placement="top"
-                            <Icon
+                            >
-                                icon={ICONS.HELP}
+                                <Icon
-                                color={colors.TEXT_SECONDARY}
+                                    icon={ICONS.HELP}
-                                size={24}
+                                    color={colors.TEXT_SECONDARY}
-                            />
+                                    size={24}
-                        </Tooltip>
+                                />
+                            </Tooltip>
+                        </Left>
                     </InputLabelWrapper>
                 )}
                 state={getDataTextareaState(errors.data, warnings.data)}

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

@@ -34,7 +34,7 @@ const AmountInputLabel = styled.span`
 `;
 
 const InputRow = styled.div`
-    padding: 0 0 15px 0;
+    padding-bottom: 28px;
 `;
 
 const SetMaxAmountButton = styled(Button)`
@@ -88,7 +88,7 @@ const FeeOptionWrapper = styled.div`
 const FeeLabelWrapper = styled.div`
     display: flex;
     align-items: center;
-    margin-bottom: 4px;
+    padding-bottom: 10px;
 `;
 
 const FeeLabel = styled.span`

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

@@ -13,13 +13,12 @@ import type { Props } from './Container';
 const Wrapper = styled.div`
     display: flex;
     flex: 1;
-    margin-top: -5px;
     flex-direction: row;
     background: ${colors.WHITE};
 `;
 
 const Row = styled.div`
-    padding: 0 0 25px 0;
+    padding-bottom: 28px;
 `;
 
 const RowButtons = styled(Row)`

src/views/Wallet/views/Account/Summary/components/Balance/index.js

@@ -22,7 +22,7 @@ type State = {
 };
 
 const Wrapper = styled.div`
-    padding: 10px 0 25px 0;
+    padding-bottom: 28px;
     position: relative;
     display: flex;
 

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

@@ -21,7 +21,7 @@ import AddTokenMessage from './components/AddTokenMessage';
 import type { Props } from './Container';
 
 const AccountHeading = styled.div`
-    padding: 0 0 30px 0;
+    padding-bottom: 35px;
     display: flex;
     justify-content: space-between;
     align-items: center;

src/views/Wallet/views/Dashboard/index.js

@@ -33,7 +33,7 @@ const Dashboard = () => (
             <H2>Dashboard</H2>
             <Row>
                 <H2>Please select your coin</H2>
-                <P>You will gain access to recieving &amp; sending selected coin</P>
+                <P>You will gain access to receiving &amp; sending selected coin</P>
                 <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
             </Row>
         </Wrapper>