Merge pull request #85 from trezor/adjust-style

Adjust style according to guidelines first part

.eslintignore

@@ -2,6 +2,5 @@ public
 build
 build-devel
 coverage
-images
 node_modules
 src/flowtype/npm

src/components/DeviceHeader/index.js

@@ -12,7 +12,7 @@ import colors from 'config/colors';
 
 const Wrapper = styled.div`
     position: relative;
-    height: 64px;
+    height: 70px;
     width: 320px;
     display: flex;
     align-items: center;

src/components/Footer/index.js

@@ -16,6 +16,7 @@ const Wrapper = styled.div`
     color: ${colors.TEXT_SECONDARY};
     padding: 22px 48px;
     display: flex;
+    border-top: 1px solid ${colors.BACKGROUND};
 `;
 
 const StyledLink = styled(Link)`

src/components/Header/index.js

@@ -41,6 +41,7 @@ const Right = styled.div``;
 const A = styled.a`
     color: ${colors.WHITE};
     margin-left: 24px;
+    transition: all .1s ease-in;
 
     &:visited {
         color: ${colors.WHITE};

src/components/Select/index.js

@@ -13,7 +13,7 @@ const styles = isSearchable => ({
     control: (base, { isDisabled }) => ({
         ...base,
         minHeight: 'initial',
-        height: '100%',
+        height: '40px',
         borderRadius: '2px',
         borderColor: colors.DIVIDER,
         boxShadow: 'none',

src/components/Textarea/index.js

@@ -13,7 +13,7 @@ const Wrapper = styled.div`
 
 const disabledColor = colors.TEXT_PRIMARY;
 
-const TextArea = styled.textarea`
+const StyledTextarea = styled.textarea`
     width: 100%;
     min-height: 85px;
     margin-bottom: 10px;
@@ -124,7 +124,8 @@ const Textarea = ({
         {topLabel && (
             <TopLabel>{topLabel}</TopLabel>
         )}
-        <TextArea
+        <StyledTextarea
+            className={className}
             disabled={isDisabled}
             style={customStyle}
             onFocus={onFocus}

src/components/Tooltip/index.js

@@ -7,10 +7,10 @@ import PropTypes from 'prop-types';
 
 const Wrapper = styled.div`
     .rc-tooltip {
+        min-width: 200px;
         max-width: ${props => `${props.maxWidth}px` || 'auto'};
         position: absolute;
         z-index: 1070;
-        display: block;
         visibility: visible;
         border: none;
         border-radius: 3px;

src/components/images/CoinLogo/index.js

@@ -1,40 +1,58 @@
-import React from 'react';
+import React, { Component } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { ICON_SIZE } from 'config/variables';
 
-const Logo = styled.div`
+const Wrapper = styled.div`
-    height: ${ICON_SIZE.BASE};
+    padding-right: 20px;
-    width: ${ICON_SIZE.BASE};
+    width: 40px;
-    margin-right: 5px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: auto ${ICON_SIZE.BASE};
-    background-image: url('${props => props.coinImg}');
 `;
 
-const CoinLogo = ({
+const Logo = styled.img`
-    className, coinNetwork, coinImg,
+    width: ${props => (props.hasLongIcon ? '15px' : '23px')};
-}) => {
+    margin-left: ${props => (props.hasLongIcon ? '3px' : '0px')};
+    display: block;
+`;
+
+class CoinLogo extends Component {
+    constructor() {
+        super();
+        this.longIcons = ['etc', 'eth', 'trop'];
+    }
+
+    getIcon() {
+        const { coinNetwork, coinId } = this.props;
         let coinImgName = coinNetwork;
         if (coinImgName === 'ethereum') {
             coinImgName = 'eth';
         } else if (coinImgName === 'ethereum-classic') {
             coinImgName = 'etc';
         }
-    const coinImgUrl = `../images/${coinImgName}-logo.png`;
+        return coinImgName || coinId;
+    }
 
+    hasLongIcon(coinImgName) {
+        let hasLongIcon = false;
+        if (this.longIcons.includes(coinImgName)) {
+            hasLongIcon = true;
+        }
+        return hasLongIcon;
+    }
+
+    render() {
+        const iconName = this.getIcon();
         return (
+            <Wrapper>
                 <Logo
-            className={className}
+                    hasLongIcon={this.hasLongIcon(iconName)}
-            coinImg={coinImgName ? coinImgUrl : coinImg}
+                    src={require(`./images/${iconName}.png`)} // eslint-disable-line
                 />
+            </Wrapper>
         );
-};
+    }
+}
 
 CoinLogo.propTypes = {
-    className: PropTypes.string,
+    coinId: PropTypes.string,
-    coinImg: PropTypes.string,
     coinNetwork: PropTypes.string,
 };
 

src/components/inputs/Input/index.js

@@ -7,6 +7,7 @@ import Icon from 'components/Icon';
 import {
     FONT_SIZE,
     FONT_WEIGHT,
+    FONT_FAMILY,
     TRANSITION,
 } from 'config/variables';
 
@@ -28,18 +29,19 @@ const InputIconWrapper = styled.div`
 `;
 
 const TopLabel = styled.span`
-    padding-bottom: 4px;
+    padding-bottom: 10px;
     color: ${colors.TEXT_SECONDARY};
 `;
 
 const StyledInput = styled.input`
     width: 100%;
-    padding: 6px ${props => (props.hasIcon ? '32px' : '12px')} 6px 12px;
+    height: 40px;
+    padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
 
     line-height: 1.42857143;
     font-size: ${FONT_SIZE.SMALL};
     font-weight: ${FONT_WEIGHT.BASE};
-    color: ${colors.TEXT_PRIMARY};
+    color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
 
     border-radius: 2px;
     ${props => props.hasAddon && css`
@@ -61,7 +63,8 @@ const StyledInput = styled.input`
 const StyledIcon = styled(Icon)`
     position: absolute;
     left: auto;
-    right: 3px;
+    top: 3px;
+    right: 10px;
 `;
 
 const BottomText = styled.span`
@@ -116,6 +119,7 @@ class Input extends Component {
                             innerRef={this.props.innerRef}
                             hasAddon={!!this.props.sideAddons}
                             type={this.props.type}
+                            color={this.getColor(this.props.state)}
                             placeholder={this.props.placeholder}
                             autocomplete={this.props.autocomplete}
                             autocorrect={this.props.autocorrect}

src/components/modals/pin/Pin/index.js

@@ -4,9 +4,10 @@ import { H2 } from 'components/Heading';
 import React, { Component } from 'react';
 import Link from 'components/Link';
 import styled from 'styled-components';
-import PinInput from 'components/inputs/PinInput';
+
 import Button from 'components/Button';
-import PinButton from './components/PinButton';
+import PinButton from './components/Button';
+import PinInput from './components/Input';
 import type { Props } from '../../index';
 
 type State = {

src/config/colors.js

@@ -2,6 +2,8 @@ export default {
     WHITE: '#FFFFFF',
     BACKGROUND: '#EBEBEB',
 
+    TEXT: '#333333',
+
     HEADER: '#1A1A1A',
     BODY: '#E3E3E3',
     MAIN: '#FBFBFB',

src/config/variables.js

@@ -3,6 +3,8 @@ export const FONT_SIZE = {
     SMALLER: '12px',
     SMALL: '14px',
     BASE: '16px',
+    TOP_MENU: '17px',
+    BIG: '21px',
     BIGGER: '32px',
     BIGGEST: '36px',
 };

src/constants/coins.js

@@ -1,32 +1,26 @@
 export default [
     {
+        id: 'btc',
         coinName: 'Bitcoin',
-        url: 'https://wallet.trezor.io/#/coin/btc',
-        image: '../images/btc-logo.png',
     },
     {
+        id: 'ltc',
         coinName: 'Litecoin',
-        url: 'https://wallet.trezor.io/#/coin/ltc',
-        image: '../images/ltc-logo.png',
     },
     {
+        id: 'bch',
         coinName: 'Bitcoin Cash',
-        url: 'https://wallet.trezor.io/#/coin/bch',
-        image: '../images/bch-logo.png',
     },
     {
+        id: 'btg',
         coinName: 'Bitcoin Gold',
-        url: 'https://wallet.trezor.io/#/coin/btg',
-        image: '../images/btg-logo.png',
     },
     {
+        id: 'dash',
         coinName: 'Dash',
-        url: 'https://wallet.trezor.io/#/coin/dash',
-        image: '../images/dash-logo.png',
     },
     {
+        id: 'zec',
         coinName: 'Zcash',
-        url: 'https://wallet.trezor.io/#/coin/zec',
-        image: '../images/zec-logo.png',
     },
 ];

src/support/BaseStyles.js

@@ -1,4 +1,5 @@
 import { injectGlobal } from 'styled-components';
+import colors from 'config/colors';
 import normalize from 'styled-normalize';
 
 const baseStyles = () => injectGlobal`
@@ -11,6 +12,7 @@ const baseStyles = () => injectGlobal`
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
         font-weight: 400;
         font-size: 14px;
+        color: ${colors.TEXT};
     }
 
     * , *:before , *:after {

src/views/Landing/components/BrowserNotSupported/index.js

@@ -1,10 +1,13 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import Link from 'components/Link';
 import Button from 'components/Button';
 import P from 'components/Paragraph';
 import { H2 } from 'components/Heading';
 
+import ChromeImage from 'images/browser-chrome.png';
+import FirefoxImage from 'images/browser-firefox.png';
+
 const Wrapper = styled.div``;
 
 const ChooseBrowserWrapper = styled.div`
@@ -12,16 +15,10 @@ const ChooseBrowserWrapper = styled.div`
     justify-content: space-between;
 `;
 
-const BrowserLogo = styled.div`
+const BrowserLogo = styled.img`
     margin-bottom: 10px;
     width: 43px;
     height: 43px;
-    ${props => props.isChrome && css`
-        background-image: url('../images/browser-chrome.png');
-    `}
-    ${props => props.isFirefox && css`
-        background-image: url('../images/browser-firefox.png');
-    `}
 `;
 
 const Browser = styled.div`
@@ -37,7 +34,7 @@ const BrowserNotSupported = () => (
         <P>Please choose one of the supported browsers</P>
         <ChooseBrowserWrapper>
             <Browser>
-                <BrowserLogo isChrome />
+                <BrowserLogo src={ChromeImage} />
                 <P isSmaller>Google Chrome</P>
                 <Link
                     href="https://www.google.com/chrome/"
@@ -48,7 +45,7 @@ const BrowserNotSupported = () => (
                 </Link>
             </Browser>
             <Browser>
-                <BrowserLogo isFirefox />
+                <BrowserLogo src={FirefoxImage} />
                 <P isSmaller>Mozzila Firefox</P>
                 <Link
                     href="https://www.mozilla.org/en-US/firefox/new/"

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 40px 35px 40px 35px;
+`;
+
+const Content = ({
+    children,
+}) => (
+    <Wrapper>
+        {children}
+    </Wrapper>
+);
+
+Content.propTypes = {
+    children: PropTypes.element,
+};
+
+export default Content;

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

@@ -24,6 +24,10 @@ class CoinMenu extends Component {
         return baseUrl;
     }
 
+    getCoinUrl(coinId) {
+        return `https://wallet.trezor.io/#/coin/${coinId}`;
+    }
+
     render() {
         const { config } = this.props.localStorage;
         return (
@@ -44,15 +48,14 @@ class CoinMenu extends Component {
                 <Divider
                     textLeft="Other coins"
                     textRight="(You will be redirected)"
-                    borderTop
+                    hasBorder
-                    borderBottom
                 />
                 {coins.map(coin => (
-                    <a key={coin.url} href={coin.url}>
+                    <a key={this.getCoinUrl(coin.id)} href={this.getCoinUrl(coin.id)}>
                         <RowCoin
                             coin={{
                                 name: coin.coinName,
-                                img: coin.image,
+                                id: coin.id,
                             }}
                             iconRight={{
                                 type: ICONS.SKIP,

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

@@ -12,20 +12,17 @@ const Wrapper = styled.div`
     font-size: ${FONT_SIZE.SMALLER};
     color: ${colors.TEXT_SECONDARY};
     background: ${colors.LANDING};
-    ${props => props.borderTop && css`
+    ${props => props.hasBorder && css`
-        border-top: 1px solid ${colors.DIVIDER};
+        border-top: 1px solid ${colors.BODY};
-    `}
+        border-bottom: 1px solid ${colors.BODY};
-    ${props => props.borderBottom && css`
-        border-bottom: 1px solid ${colors.DIVIDER};
     `}
 `;
 
 const Divider = ({
-    textLeft, textRight, borderTop = false, borderBottom = false,
+    textLeft, textRight, hasBorder = false,
 }) => (
     <Wrapper
-        borderTop={borderTop}
+        hasBorder={hasBorder}
-        borderBottom={borderBottom}
     >
         <p>{textLeft}</p>
         <p>{textRight}</p>
@@ -35,8 +32,7 @@ const Divider = ({
 Divider.propTypes = {
     textLeft: PropTypes.string,
     textRight: PropTypes.string,
-    borderTop: PropTypes.bool,
+    hasBorder: PropTypes.bool,
-    borderBottom: PropTypes.bool,
 };
 
 export default Divider;

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

@@ -37,10 +37,6 @@ const IconWrapper = styled.div`
     margin-right: 10px;
 `;
 
-const LogoWrapper = styled.div`
-    margin-right: 3px;
-`;
-
 const RowCoin = ({
     coin, iconLeft, iconRight,
 }) => (
@@ -57,12 +53,10 @@ const RowCoin = ({
                     </IconWrapper>
                 )}
                 <CoinNameWrapper>
-                    <LogoWrapper>
                     <CoinLogo
                         coinNetwork={coin.network}
-                            coinImg={coin.img}
+                        coinId={coin.id}
                     />
-                    </LogoWrapper>
                     <p>{coin.name}</p>
                 </CoinNameWrapper>
             </Left>
@@ -86,7 +80,7 @@ RowCoin.propTypes = {
     coin: PropTypes.shape({
         name: PropTypes.string.isRequired,
         network: PropTypes.string,
-        img: PropTypes.string,
+        id: PropTypes.string,
     }).isRequired,
     iconLeft: PropTypes.shape(iconShape),
     iconRight: PropTypes.shape(iconShape),

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

@@ -12,7 +12,9 @@ import DeviceMenu from './components/DeviceMenu';
 import StickyContainer from './components/StickyContainer';
 import type { Props } from './components/common';
 
-const Header = styled(DeviceHeader)``;
+const Header = styled(DeviceHeader)`
+    border-right: 1px solid ${colors.BACKGROUND};
+`;
 
 const Counter = styled.div`
     border: 1px solid ${colors.DIVIDER};
@@ -44,7 +46,7 @@ const Footer = styled.div.attrs({
     width: 320px;
     bottom: 0;
     background: ${colors.MAIN};
-    border-right: 1px solid ${colors.DIVIDER};
+    border-right: 1px solid ${colors.BACKGROUND};
 `;
 
 const Body = styled.div`
@@ -58,7 +60,7 @@ const Help = styled.div`
     text-align: center;
     width: 319px;
     padding: 8px 0px;
-    border-top: 1px solid ${colors.DIVIDER};
+    border-top: 1px solid ${colors.BACKGROUND};
 `;
 
 const A = styled.a`

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

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import React from 'react';
+import { FONT_SIZE } from 'config/variables';
 import { NavLink } from 'react-router-dom';
 import colors from 'config/colors';
 import Indicator from './components/Indicator';
@@ -7,16 +8,17 @@ import Indicator from './components/Indicator';
 const Wrapper = styled.div`
     position: relative;
     display: flex;
+    height: 100%;
     flex: 1;
     align-items: center;
     justify-content: space-between;
-    padding: 0px 28px;
+    padding: 0px 30px 0 40px;
     max-width: 600px;
 `;
 
 const StyledNavLink = styled(NavLink)`
     font-weight: 500;
-    font-size: 14px;
+    font-size: ${FONT_SIZE.TOP_MENU};
     color: ${colors.TEXT_SECONDARY};
     margin: 0px 4px;
     padding: 20px;
@@ -44,8 +46,9 @@ const TopNavigationAccount = (props) => {
     return (
         <Wrapper className="account-tabs">
             <StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
-            <StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>
             <StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
+            <StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>
+            {/* <StyledNavLink to={`${basePath}/signverify`}>Sign & Verify</StyledNavLink> */}
             <Indicator pathname={props.match.pathname} />
         </Wrapper>
     );

src/views/Wallet/index.js

@@ -68,7 +68,7 @@ const MainContent = styled.article`
 `;
 
 const Navigation = styled.nav`
-    height: 64px;
+    height: 70px;
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
     display: flex;
     background: ${colors.WHITE};

src/views/Wallet/views/AccountReceive/index.js

@@ -5,6 +5,7 @@ import { H2 } from 'components/Heading';
 import Button from 'components/Button';
 import Icon from 'components/Icon';
 import ICONS from 'config/icons';
+import Content from 'views/Wallet/components/Content';
 import colors from 'config/colors';
 
 import Tooltip from 'components/Tooltip';
@@ -14,27 +15,35 @@ import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
 
 import type { Props } from './Container';
 
-const Wrapper = styled.div``;
+const Label = styled.div`
-const StyledH2 = styled(H2)`
+    padding: 25px 0 5px 0;
-    padding: 20px 48px;
+    color: ${colors.TEXT_SECONDARY};
 `;
+
 const AddressWrapper = styled.div`
     position: relative;
-    padding: 0px 48px;
     display: flex;
+    margin-top: 20px;
     flex-wrap: wrap;
     flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')};
 `;
 
+const StyledQRCode = styled(QRCode)`
+    padding: 15px;
+    margin-top: 0 25px;
+    border: 1px solid ${colors.BODY};
+`;
+
 const ValueWrapper = styled.div`
     font-size: ${FONT_SIZE.SMALL};
+    height: 40px;
     font-weight: ${FONT_WEIGHT.SMALLEST};
     line-height: 1.42857143;
     font-family: ${FONT_FAMILY.MONOSPACE};
     color: ${colors.TEXT_PRIMARY};
     border: 1px solid ${colors.DIVIDER};
     border-radius: 3px;
-    padding: 6px 12px;
+    padding: 10px 12px;
     padding-right: 38px;
     position: relative;
     flex: 1;
@@ -119,23 +128,19 @@ const EyeButton = styled(Button)`
     padding: 0;
     position: absolute;
     left: auto;
-    right: 60px;
+    right: 10px;
-    top: 3px;
+    top: 6px;
 `;
 
-const qrCodeStyle = {
-    width: 256,
-    margin: '20px auto',
-};
-
 const AccountReceive = (props: Props) => {
     const device = props.wallet.selectedDevice;
     const {
         account,
         discovery,
+        shouldRender,
     } = props.selectedAccount;
 
-    if (!device || !account || !discovery) return null;
+    if (!device || !account || !discovery || !shouldRender) return null;
 
     const {
         addressVerified,
@@ -152,11 +157,15 @@ const AccountReceive = (props: Props) => {
     const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
 
     return (
-        <Wrapper>
+        <Content>
-            <StyledH2>Receive Ethereum or tokens</StyledH2>
+            <React.Fragment>
+                <H2>Receive Ethereum or tokens</H2>
                 <AddressWrapper
                     isShowingQrCode={addressVerified || addressUnverified}
                 >
+                    {isAddressVerifying && (
+                        <AddressInfoText>Confirm address on TREZOR</AddressInfoText>
+                    )}
                     {((addressVerified || addressUnverified) && !isAddressVerifying) && (
                         <Tooltip
                             placement="bottomRight"
@@ -190,7 +199,8 @@ const AccountReceive = (props: Props) => {
                     <ValueWrapper
                         isHidden={isAddressHidden}
                         isVerifying={isAddressVerifying}
-                >{address}
+                    >
+                        {address}
                     </ValueWrapper>
                     {isAddressVerifying && (
                         <React.Fragment>
@@ -204,17 +214,17 @@ const AccountReceive = (props: Props) => {
                             </AddressInfoText>
                         </React.Fragment>
                     )}
-                {/* {isAddressVerifying && (
-                    <AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
-                )} */}
                     {(addressVerified || addressUnverified) && (
-                    <QRCode
+                        <React.Fragment>
+                            <Label>QR code</Label>
+                            <StyledQRCode
                                 bgColor="#FFFFFF"
                                 fgColor="#000000"
                                 level="Q"
-                        style={qrCodeStyle}
+                                style={{ width: 150 }}
                                 value={account.address}
                             />
+                        </React.Fragment>
                     )}
                     {!(addressVerified || addressUnverified) && (
                         <ShowAddressButton
@@ -229,7 +239,8 @@ const AccountReceive = (props: Props) => {
                         </ShowAddressButton>
                     )}
                 </AddressWrapper>
-        </Wrapper>
+            </React.Fragment>
+        </Content>
     );
 };
 

src/views/Wallet/views/AccountSend/index.js

@@ -12,6 +12,7 @@ import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
 import colors from 'config/colors';
 import P from 'components/Paragraph';
 import { H2 } from 'components/Heading';
+import Content from 'views/Wallet/components/Content';
 import type { Token } from 'flowtype';
 import AdvancedForm from './components/AdvancedForm';
 import PendingTransactions from './components/PendingTransactions';
@@ -22,14 +23,6 @@ import type { Props } from './Container';
 // and put it inside config/variables.js
 const SmallScreenWidth = '850px';
 
-const Wrapper = styled.section`
-    padding: 0 48px;
-`;
-
-const StyledH2 = styled(H2)`
-    padding: 20px 0;
-`;
-
 const AmountInputLabelWrapper = styled.div`
     display: flex;
     justify-content: space-between;
@@ -41,11 +34,11 @@ const AmountInputLabel = styled.span`
 `;
 
 const InputRow = styled.div`
-    margin-bottom: 10px;
+    margin: 20px 0;
 `;
 
 const SetMaxAmountButton = styled(Button)`
-    height: 34px;
+    height: 40px;
     padding: 0 10px;
     display: flex;
     align-items: center;
@@ -83,7 +76,7 @@ const SetMaxAmountButton = styled(Button)`
 
 const CurrencySelect = styled(Select)`
     min-width: 77px;
-    height: 34px;
+    height: 40px;
     flex: 0.2;
 `;
 
@@ -208,6 +201,7 @@ const AccountSend = (props: Props) => {
         sending,
         advanced,
     } = props.sendForm;
+
     const {
         toggleAdvanced,
         onAddressChange,
@@ -252,8 +246,9 @@ const AccountSend = (props: Props) => {
     const isAdvancedSettingsHidden = !advanced;
 
     return (
-        <Wrapper>
+        <Content>
-            <StyledH2>Send Ethereum or tokens</StyledH2>
+            <React.Fragment>
+                <H2>Send Ethereum or tokens</H2>
                 <InputRow>
                     <Input
                         state={getAddressInputState(address, errors.address, warnings.address)}
@@ -400,7 +395,8 @@ const AccountSend = (props: Props) => {
                         network={network}
                     />
                 )}
-        </Wrapper>
+            </React.Fragment>
+        </Content>
     );
 };
 

src/views/Wallet/views/AccountSignVerify/index.js

@@ -1,5 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
+import Input from 'components/inputs/Input';
+import Textarea from 'components/Textarea';
+import Content from 'views/Wallet/components/Content';
 
 import { H2 } from 'components/Heading';
 import colors from 'config/colors';
@@ -9,7 +12,6 @@ const Wrapper = styled.div`
     flex: 1;
     flex-direction: row;
     background: ${colors.WHITE};
-    padding: 50px;
 `;
 
 const StyledH2 = styled(H2)`
@@ -33,14 +35,8 @@ const Label = styled.div`
     padding: 5px 0px;
 `;
 
-const Textarea = styled.textarea`
-    resize: vertical;
-    width: 100%;
-`;
-
-const Input = styled.input``;
-
 const AccountSignVerify = () => (
+    <Content>
         <Wrapper>
             <Sign>
                 <StyledH2>Sign message</StyledH2>
@@ -61,6 +57,7 @@ const AccountSignVerify = () => (
                 <Textarea rows="4" maxLength="255" />
             </Verify>
         </Wrapper>
+    </Content>
 );
 
 export default AccountSignVerify;

src/views/Wallet/views/AccountSummary/components/Balance/index.js

@@ -22,7 +22,7 @@ type State = {
 };
 
 const Wrapper = styled.div`
-    padding: 0 48px 25px;
+    padding: 10px 0 25px 0;
     position: relative;
     display: flex;
 
@@ -52,12 +52,31 @@ const HideBalanceIconWrapper = styled.div`
 `;
 
 const FiatValue = styled.div`
-    font-size: ${FONT_SIZE.BASE};
+    font-weight: ${FONT_WEIGHT.BIGGER};
-    font-weight: ${FONT_WEIGHT.BASE};
+    font-size: ${FONT_SIZE.BIG};
     margin: 7px 0;
+    min-height: 25px;
     color: ${colors.TEXT_PRIMARY};
 `;
 
+const FiatValueRate = styled.div`
+    font-weight: ${FONT_WEIGHT.BIGGER};
+    font-size: ${FONT_SIZE.BASE};
+    min-height: 25px;
+    margin: 7px 0;
+    display: flex;
+    align-items: center;
+    color: ${colors.TEXT_PRIMARY};
+`;
+
+const BalanceWrapper = styled.div`
+    margin-right: 48px;
+`;
+
+const BalanceRateWrapper = styled(BalanceWrapper)`
+    padding-left: 50px;
+`;
+
 const CoinBalace = styled.div`
     font-size: ${FONT_SIZE.SMALLER};
     color: ${colors.TEXT_SECONDARY};
@@ -68,9 +87,6 @@ const Label = styled.div`
     color: ${colors.TEXT_SECONDARY};
 `;
 
-const BalanceWrapper = styled.div`
-    margin-right: 48px;
-`;
 
 class AccountBalance extends Component<Props, State> {
     constructor(props: Props) {
@@ -125,11 +141,11 @@ class AccountBalance extends Component<Props, State> {
                             <CoinBalace>{this.props.balance} {selectedCoin.symbol}</CoinBalace>
                         </BalanceWrapper>
                         {fiatRate && (
-                            <BalanceWrapper>
+                            <BalanceRateWrapper>
                                 <Label>Rate</Label>
-                                <FiatValue>${fiatRateValue}</FiatValue>
+                                <FiatValueRate>${fiatRateValue}</FiatValueRate>
                                 <CoinBalace>1.00 {selectedCoin.symbol}</CoinBalace>
-                            </BalanceWrapper>
+                            </BalanceRateWrapper>
                         )}
                     </React.Fragment>
                 )}

src/views/Wallet/views/AccountSummary/components/Token/index.js

@@ -11,7 +11,7 @@ import BigNumber from 'bignumber.js';
 import PropTypes from 'prop-types';
 
 const TokenWrapper = styled.div`
-    padding: 14px 48px;
+    padding: 14px 0;
     position: relative;
     display: flex;
     align-items: center;
@@ -62,9 +62,7 @@ class AddedToken extends Component<> {
         const textColor = new ColorHash();
 
         return (
-            <TokenWrapper
+            <TokenWrapper key={this.props.token.symbol}>
-                key={this.props.token.symbol}
-            >
                 <TokenIcon
                     textColor={textColor.hex(this.props.token.address)}
                     backgroundColor={bgColor.hex(this.props.token.address)}

src/views/Wallet/views/AccountSummary/index.js

@@ -8,30 +8,32 @@ import { AsyncSelect } from 'components/Select';
 import ICONS from 'config/icons';
 import colors from 'config/colors';
 import Tooltip from 'components/Tooltip';
+import Content from 'views/Wallet/components/Content';
 
 import CoinLogo from 'components/images/CoinLogo';
 import * as stateUtils from 'reducers/utils';
 import Link from 'components/Link';
-import AccountBalance from './components/AccountBalance';
+import AccountBalance from './components/Balance';
-import AddedToken from './components/AddedToken';
+import AddedToken from './components/Token';
 
 import type { Props } from './Container';
 
 const AccountHeading = styled.div`
-    padding: 20px 48px 20px 45px;
+    padding: 0 0 30px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
 `;
 
-const TooltipContent = styled.div`
-    display: block;
-`;
-
 const H2Wrapper = styled.div`
     display: flex;
     align-items: center;
-    padding: 20px 48px;
+    padding: 20px 0;
+`;
+
+const StyledTooltip = styled(Tooltip)`
+    position: relative;
+    top: 2px;
 `;
 
 const AccountName = styled.div`
@@ -52,7 +54,7 @@ const StyledIcon = styled(Icon)`
 `;
 
 const AsyncSelectWrapper = styled.div`
-    padding: 0px 48px 32px 48px;
+    padding-bottom: 32px;
 `;
 
 const AddedTokensWrapper = styled.div``;
@@ -75,6 +77,7 @@ const AccountSummary = (props: Props) => {
     const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
 
     return (
+        <Content>
             <React.Fragment>
                 <AccountHeading>
                     <AccountName>
@@ -89,7 +92,6 @@ const AccountSummary = (props: Props) => {
                     >See full transaction history
                     </Link>
                 </AccountHeading>
-
                 <AccountBalance
                     coin={network}
                     summary={props.summary}
@@ -98,10 +100,10 @@ const AccountSummary = (props: Props) => {
                     fiat={props.fiat}
                     localStorage={props.localStorage}
                 />
-
                 <H2Wrapper>
                     <H2>Tokens</H2>
-                <Tooltip
+                    <StyledTooltip
+                        maxWidth={200}
                         placement="top"
                         content="Insert token name, symbol or address to be able to send it."
                     >
@@ -110,7 +112,7 @@ const AccountSummary = (props: Props) => {
                             color={colors.TEXT_SECONDARY}
                             size={24}
                         />
-                </Tooltip>
+                    </StyledTooltip>
                 </H2Wrapper>
                 {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
                 {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
@@ -156,6 +158,7 @@ const AccountSummary = (props: Props) => {
                     ))}
                 </AddedTokensWrapper>
             </React.Fragment>
+        </Content>
     );
 };
 

src/views/Wallet/views/Bootloader/index.js

@@ -12,8 +12,6 @@ const Wrapper = styled.div`
 const Row = styled.div`
     flex: 1;
     display: flex;
-    padding: 0px 48px;
-    
     flex-direction: column;
     justify-content: center;
     align-items: center;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
+import Content from 'views/Wallet/components/Content';
 
 import { H2 } from 'components/Heading';
 import DashboardImg from 'images/dashboard.png';
@@ -11,10 +12,6 @@ const Wrapper = styled.div`
     flex: 1;
 `;
 
-const StyledH2 = styled(H2)`
-    padding: 24px 48px;
-`;
-
 const Row = styled.div`
     flex: 1;
     display: flex;
@@ -31,14 +28,16 @@ const P = styled.p`
 `;
 
 const Dashboard = () => (
+    <Content>
         <Wrapper>
-        <StyledH2>Dashboard</StyledH2>
+            <H2>Dashboard</H2>
             <Row>
                 <H2>Please select your coin</H2>
                 <P>You will gain access to recieving &amp; sending selected coin</P>
                 <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
             </Row>
         </Wrapper>
+    </Content>
 );
 
 export default connect(null, null)(Dashboard);

src/views/Wallet/views/DeviceSettings/index.js

@@ -4,19 +4,17 @@ import { H2 } from 'components/Heading';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
 import Button from 'components/Button';
+import P from 'components/Paragraph';
+import Link from 'components/Link';
 import ICONS from 'config/icons';
+import Content from 'views/Wallet/components/Content';
 import { connect } from 'react-redux';
 
 const Section = styled.section`
-`;
+    display: flex;
-
+    justify-content: center;
-const P = styled.p`
+    align-items: center;
-    padding: 12px 0px 24px 0px;
+    height: 100%;
-    text-align: center;
-`;
-
-const StyledH2 = styled(H2)`
-    padding-top: 15px;
 `;
 
 const Row = styled.div`
@@ -25,11 +23,15 @@ const Row = styled.div`
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 0px 48px;
+`;
-    padding-bottom: 98px;
+
+const StyledP = styled(P)`
+    padding: 10px 0 15px 0;
+    text-align: center;
 `;
 
 const DeviceSettings = () => (
+    <Content>
         <Section>
             <Row>
                 <Icon
@@ -37,13 +39,14 @@ const DeviceSettings = () => (
                     color={colors.WARNING_PRIMARY}
                     icon={ICONS.WARNING}
                 />
-            <StyledH2>Device settings is under construction</StyledH2>
+                <H2>Device settings is under construction</H2>
-            <P>Please use Bitcoin wallet interface to change your device settings</P>
+                <StyledP isSmaller>Please use Bitcoin wallet interface to change your device settings</StyledP>
-            <a href="https://wallet.trezor.io/">
+                <Link href="https://wallet.trezor.io/">
                     <Button>Take me to the Bitcoin wallet</Button>
-            </a>
+                </Link>
             </Row>
         </Section>
+    </Content>
 );
 
 export default connect(null, null)(DeviceSettings);

src/views/Wallet/views/WalletSettings/index.js

@@ -1,13 +1,16 @@
 import styled from 'styled-components';
 import React from 'react';
 import { connect } from 'react-redux';
+import Content from 'views/Wallet/components/Content';
 
 const Wrapper = styled.div``;
 
 const WalletSettings = () => (
+    <Content>
         <Wrapper>
             Wallet settings
         </Wrapper>
+    </Content>
 );
 
 export default connect(null, null)(WalletSettings);