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')};
-    let coinImgName = coinNetwork;
+    display: block;
-    if (coinImgName === 'ethereum') {
+`;
-        coinImgName = 'eth';
-    } else if (coinImgName === 'ethereum-classic') {
-        coinImgName = 'etc';
-    }
-    const coinImgUrl = `../images/${coinImgName}-logo.png`;
 
-    return (
+class CoinLogo extends Component {
-        <Logo
+    constructor() {
-            className={className}
+        super();
-            coinImg={coinImgName ? coinImgUrl : coinImg}
+        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';
+        }
+        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
+                    hasLongIcon={this.hasLongIcon(iconName)}
+                    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
-                        <CoinLogo
+                        coinNetwork={coin.network}
-                            coinNetwork={coin.network}
+                        coinId={coin.id}
-                            coinImg={coin.img}
+                    />
-                        />
-                    </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,84 +157,90 @@ const AccountReceive = (props: Props) => {
     const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified;
 
     return (
-        <Wrapper>
+        <Content>
-            <StyledH2>Receive Ethereum or tokens</StyledH2>
+            <React.Fragment>
-            <AddressWrapper
+                <H2>Receive Ethereum or tokens</H2>
-                isShowingQrCode={addressVerified || addressUnverified}
+                <AddressWrapper
-            >
+                    isShowingQrCode={addressVerified || addressUnverified}
-                {((addressVerified || addressUnverified) && !isAddressVerifying) && (
+                >
-                    <Tooltip
+                    {isAddressVerifying && (
-                        placement="bottomRight"
+                        <AddressInfoText>Confirm address on TREZOR</AddressInfoText>
-                        content={(
+                    )}
-                            <React.Fragment>
+                    {((addressVerified || addressUnverified) && !isAddressVerifying) && (
-                                {addressUnverified ? (
+                        <Tooltip
-                                    <React.Fragment>
+                            placement="bottomRight"
+                            content={(
+                                <React.Fragment>
+                                    {addressUnverified ? (
+                                        <React.Fragment>
                                         Unverified address.
-                                        <br />
+                                            <br />
-                                        {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
+                                            {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
-                                    </React.Fragment>
+                                        </React.Fragment>
-                                ) : (
+                                    ) : (
-                                    <React.Fragment>
+                                        <React.Fragment>
-                                        {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
+                                            {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
-                                    </React.Fragment>
+                                        </React.Fragment>
-                                )}
+                                    )}
-                            </React.Fragment>
+                                </React.Fragment>
-                        )}
+                            )}
-                    >
-                        <EyeButton
-                            isTransparent
-                            onClick={() => props.showAddress(account.addressPath)}
                         >
-                            <Icon
+                            <EyeButton
-                                icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
+                                isTransparent
-                                color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
+                                onClick={() => props.showAddress(account.addressPath)}
+                            >
+                                <Icon
+                                    icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
+                                    color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
+                                />
+                            </EyeButton>
+                        </Tooltip>
+                    )}
+                    <ValueWrapper
+                        isHidden={isAddressHidden}
+                        isVerifying={isAddressVerifying}
+                    >
+                        {address}
+                    </ValueWrapper>
+                    {isAddressVerifying && (
+                        <React.Fragment>
+                            <ArrowUp />
+                            <AddressInfoText>
+                                <Icon
+                                    icon={ICONS.T1}
+                                    color={colors.WHITE}
+                                />
+                                Check address on your Trezor
+                            </AddressInfoText>
+                        </React.Fragment>
+                    )}
+                    {(addressVerified || addressUnverified) && (
+                        <React.Fragment>
+                            <Label>QR code</Label>
+                            <StyledQRCode
+                                bgColor="#FFFFFF"
+                                fgColor="#000000"
+                                level="Q"
+                                style={{ width: 150 }}
+                                value={account.address}
                             />
-                        </EyeButton>
+                        </React.Fragment>
-                    </Tooltip>
+                    )}
-                )}
+                    {!(addressVerified || addressUnverified) && (
-                <ValueWrapper
+                        <ShowAddressButton
-                    isHidden={isAddressHidden}
+                            onClick={() => props.showAddress(account.addressPath)}
-                    isVerifying={isAddressVerifying}
+                            isDisabled={device.connected && !discovery.completed}
-                >{address}
+                        >
-                </ValueWrapper>
+                            <ShowAddressIcon
-                {isAddressVerifying && (
+                                icon={ICONS.EYE}
-                    <React.Fragment>
-                        <ArrowUp />
-                        <AddressInfoText>
-                            <Icon
-                                icon={ICONS.T1}
                                 color={colors.WHITE}
                             />
-                            Check address on your Trezor
-                        </AddressInfoText>
-                    </React.Fragment>
-                )}
-                {/* {isAddressVerifying && (
-                    <AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
-                )} */}
-                {(addressVerified || addressUnverified) && (
-                    <QRCode
-                        bgColor="#FFFFFF"
-                        fgColor="#000000"
-                        level="Q"
-                        style={qrCodeStyle}
-                        value={account.address}
-                    />
-                )}
-                {!(addressVerified || addressUnverified) && (
-                    <ShowAddressButton
-                        onClick={() => props.showAddress(account.addressPath)}
-                        isDisabled={device.connected && !discovery.completed}
-                    >
-                        <ShowAddressIcon
-                            icon={ICONS.EYE}
-                            color={colors.WHITE}
-                        />
                         Show full address
-                    </ShowAddressButton>
+                        </ShowAddressButton>
-                )}
+                    )}
-            </AddressWrapper>
+                </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,155 +246,157 @@ const AccountSend = (props: Props) => {
     const isAdvancedSettingsHidden = !advanced;
 
     return (
-        <Wrapper>
+        <Content>
-            <StyledH2>Send Ethereum or tokens</StyledH2>
+            <React.Fragment>
-            <InputRow>
+                <H2>Send Ethereum or tokens</H2>
-                <Input
+                <InputRow>
-                    state={getAddressInputState(address, errors.address, warnings.address)}
+                    <Input
-                    autoComplete="off"
+                        state={getAddressInputState(address, errors.address, warnings.address)}
-                    autoCorrect="off"
+                        autoComplete="off"
-                    autoCapitalize="off"
+                        autoCorrect="off"
-                    spellCheck="false"
+                        autoCapitalize="off"
-                    topLabel="Address"
+                        spellCheck="false"
-                    bottomText={errors.address || warnings.address || infos.address}
+                        topLabel="Address"
-                    value={address}
+                        bottomText={errors.address || warnings.address || infos.address}
-                    onChange={event => onAddressChange(event.target.value)}
+                        value={address}
-                />
+                        onChange={event => onAddressChange(event.target.value)}
-            </InputRow>
-
-            <InputRow>
-                <Input
-                    state={getAmountInputState(errors.amount, warnings.amount)}
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck="false"
-                    topLabel={(
-                        <AmountInputLabelWrapper>
-                            <AmountInputLabel>Amount</AmountInputLabel>
-                            {(isCurrentCurrencyToken && selectedToken) && (
-                                <AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
-                            )}
-                        </AmountInputLabelWrapper>
-                    )}
-                    value={amount}
-                    onChange={event => onAmountChange(event.target.value)}
-                    bottomText={errors.amount || warnings.amount || infos.amount}
-                    sideAddons={[
-                        (
-                            <SetMaxAmountButton
-                                key="icon"
-                                onClick={() => onSetMax()}
-                                isActive={setMax}
-                            >
-                                {!setMax && (
-                                    <Icon
-                                        icon={ICONS.TOP}
-                                        size={25}
-                                        color={colors.TEXT_SECONDARY}
-                                    />
-                                )}
-                                {setMax && (
-                                    <Icon
-                                        icon={ICONS.CHECKED}
-                                        size={25}
-                                        color={colors.WHITE}
-                                    />
-                                )}
-                                Set max
-                            </SetMaxAmountButton>
-                        ),
-                        (
-                            <CurrencySelect
-                                key="currency"
-                                isSearchable={false}
-                                isClearable={false}
-                                defaultValue={tokensSelectData[0]}
-                                isDisabled={tokensSelectData.length < 2}
-                                onChange={onCurrencyChange}
-                                options={tokensSelectData}
-                            />
-                        ),
-                    ]}
-                />
-            </InputRow>
-
-            <InputRow>
-                <FeeLabelWrapper>
-                    <FeeLabel>Fee</FeeLabel>
-                    {gasPriceNeedsUpdate && (
-                        <UpdateFeeWrapper>
-                            <Icon
-                                icon={ICONS.WARNING}
-                                color={colors.WARNING_PRIMARY}
-                                size={20}
-                            />
-                            Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
-                        </UpdateFeeWrapper>
-                    )}
-                </FeeLabelWrapper>
-                <Select
-                    isSearchable={false}
-                    isClearable={false}
-                    value={selectedFeeLevel}
-                    onChange={onFeeLevelChange}
-                    options={feeLevels}
-                    formatOptionLabel={option => (
-                        <FeeOptionWrapper>
-                            <P>{option.value}</P>
-                            <P>{option.label}</P>
-                        </FeeOptionWrapper>
-                    )}
-                />
-            </InputRow>
-
-            <ToggleAdvancedSettingsWrapper
-                isAdvancedSettingsHidden={isAdvancedSettingsHidden}
-            >
-                <ToggleAdvancedSettingsButton
-                    isTransparent
-                    onClick={toggleAdvanced}
-                >
-                    Advanced settings
-                    <AdvancedSettingsIcon
-                        icon={ICONS.ARROW_DOWN}
-                        color={colors.TEXT_SECONDARY}
-                        size={24}
-                        isActive={advanced}
-                        canAnimate
                     />
-                </ToggleAdvancedSettingsButton>
+                </InputRow>
 
-                {isAdvancedSettingsHidden && (
+                <InputRow>
-                    <SendButton
+                    <Input
-                        isDisabled={isSendButtonDisabled}
+                        state={getAmountInputState(errors.amount, warnings.amount)}
-                        isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                        autoComplete="off"
-                        onClick={() => onSend()}
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        topLabel={(
+                            <AmountInputLabelWrapper>
+                                <AmountInputLabel>Amount</AmountInputLabel>
+                                {(isCurrentCurrencyToken && selectedToken) && (
+                                    <AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
+                                )}
+                            </AmountInputLabelWrapper>
+                        )}
+                        value={amount}
+                        onChange={event => onAmountChange(event.target.value)}
+                        bottomText={errors.amount || warnings.amount || infos.amount}
+                        sideAddons={[
+                            (
+                                <SetMaxAmountButton
+                                    key="icon"
+                                    onClick={() => onSetMax()}
+                                    isActive={setMax}
+                                >
+                                    {!setMax && (
+                                        <Icon
+                                            icon={ICONS.TOP}
+                                            size={25}
+                                            color={colors.TEXT_SECONDARY}
+                                        />
+                                    )}
+                                    {setMax && (
+                                        <Icon
+                                            icon={ICONS.CHECKED}
+                                            size={25}
+                                            color={colors.WHITE}
+                                        />
+                                    )}
+                                Set max
+                                </SetMaxAmountButton>
+                            ),
+                            (
+                                <CurrencySelect
+                                    key="currency"
+                                    isSearchable={false}
+                                    isClearable={false}
+                                    defaultValue={tokensSelectData[0]}
+                                    isDisabled={tokensSelectData.length < 2}
+                                    onChange={onCurrencyChange}
+                                    options={tokensSelectData}
+                                />
+                            ),
+                        ]}
+                    />
+                </InputRow>
+
+                <InputRow>
+                    <FeeLabelWrapper>
+                        <FeeLabel>Fee</FeeLabel>
+                        {gasPriceNeedsUpdate && (
+                            <UpdateFeeWrapper>
+                                <Icon
+                                    icon={ICONS.WARNING}
+                                    color={colors.WARNING_PRIMARY}
+                                    size={20}
+                                />
+                            Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
+                            </UpdateFeeWrapper>
+                        )}
+                    </FeeLabelWrapper>
+                    <Select
+                        isSearchable={false}
+                        isClearable={false}
+                        value={selectedFeeLevel}
+                        onChange={onFeeLevelChange}
+                        options={feeLevels}
+                        formatOptionLabel={option => (
+                            <FeeOptionWrapper>
+                                <P>{option.value}</P>
+                                <P>{option.label}</P>
+                            </FeeOptionWrapper>
+                        )}
+                    />
+                </InputRow>
+
+                <ToggleAdvancedSettingsWrapper
+                    isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                >
+                    <ToggleAdvancedSettingsButton
+                        isTransparent
+                        onClick={toggleAdvanced}
                     >
-                        {sendButtonText}
+                    Advanced settings
-                    </SendButton>
+                        <AdvancedSettingsIcon
+                            icon={ICONS.ARROW_DOWN}
+                            color={colors.TEXT_SECONDARY}
+                            size={24}
+                            isActive={advanced}
+                            canAnimate
+                        />
+                    </ToggleAdvancedSettingsButton>
+
+                    {isAdvancedSettingsHidden && (
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    )}
+                </ToggleAdvancedSettingsWrapper>
+
+                {advanced && (
+                    <AdvancedForm {...props}>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </AdvancedForm>
                 )}
-            </ToggleAdvancedSettingsWrapper>
 
-            {advanced && (
+                {props.selectedAccount.pending.length > 0 && (
-                <AdvancedForm {...props}>
+                    <PendingTransactions
-                    <SendButton
+                        pending={props.selectedAccount.pending}
-                        isDisabled={isSendButtonDisabled}
+                        tokens={props.selectedAccount.tokens}
-                        onClick={() => onSend()}
+                        network={network}
-                    >
+                    />
-                        {sendButtonText}
+                )}
-                    </SendButton>
+            </React.Fragment>
-                </AdvancedForm>
+        </Content>
-            )}
-
-            {props.selectedAccount.pending.length > 0 && (
-                <PendingTransactions
-                    pending={props.selectedAccount.pending}
-                    tokens={props.selectedAccount.tokens}
-                    network={network}
-                />
-            )}
-        </Wrapper>
     );
 };
 

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,34 +35,29 @@ const Label = styled.div`
     padding: 5px 0px;
 `;
 
-const Textarea = styled.textarea`
-    resize: vertical;
-    width: 100%;
-`;
-
-const Input = styled.input``;
-
 const AccountSignVerify = () => (
-    <Wrapper>
+    <Content>
-        <Sign>
+        <Wrapper>
-            <StyledH2>Sign message</StyledH2>
+            <Sign>
-            <Label>Message</Label>
+                <StyledH2>Sign message</StyledH2>
-            <Textarea rows="4" maxLength="255" />
+                <Label>Message</Label>
-            <Label>Address</Label>
+                <Textarea rows="4" maxLength="255" />
-            <Input type="text" />
+                <Label>Address</Label>
-            <Label>Signature</Label>
+                <Input type="text" />
-            <Textarea rows="4" maxLength="255" readOnly="readonly" />
+                <Label>Signature</Label>
-        </Sign>
+                <Textarea rows="4" maxLength="255" readOnly="readonly" />
-        <Verify>
+            </Sign>
-            <StyledH2>Verify message</StyledH2>
+            <Verify>
-            <Label>Message</Label>
+                <StyledH2>Verify message</StyledH2>
-            <Textarea rows="4" maxLength="255" />
+                <Label>Message</Label>
-            <Label>Address</Label>
+                <Textarea rows="4" maxLength="255" />
-            <Input type="text" />
+                <Label>Address</Label>
-            <Label>Signature</Label>
+                <Input type="text" />
-            <Textarea rows="4" maxLength="255" />
+                <Label>Signature</Label>
-        </Verify>
+                <Textarea rows="4" maxLength="255" />
-    </Wrapper>
+            </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,87 +77,88 @@ const AccountSummary = (props: Props) => {
     const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
 
     return (
-        <React.Fragment>
+        <Content>
-            <AccountHeading>
+            <React.Fragment>
-                <AccountName>
+                <AccountHeading>
-                    <StyledCoinLogo coinNetwork={account.network} />
+                    <AccountName>
-                    <H2>Account #{parseInt(account.index, 10) + 1}</H2>
+                        <StyledCoinLogo coinNetwork={account.network} />
-                </AccountName>
+                        <H2>Account #{parseInt(account.index, 10) + 1}</H2>
-                <Link
+                    </AccountName>
-                    target="_blank"
+                    <Link
-                    rel="noreferrer noopener"
+                        target="_blank"
-                    href={explorerLink}
+                        rel="noreferrer noopener"
-                    isGray
+                        href={explorerLink}
-                >See full transaction history
+                        isGray
-                </Link>
+                    >See full transaction history
-            </AccountHeading>
+                    </Link>
-
+                </AccountHeading>
-            <AccountBalance
+                <AccountBalance
-                coin={network}
+                    coin={network}
-                summary={props.summary}
+                    summary={props.summary}
-                balance={balance}
+                    balance={balance}
-                network={network.network}
+                    network={network.network}
-                fiat={props.fiat}
+                    fiat={props.fiat}
-                localStorage={props.localStorage}
+                    localStorage={props.localStorage}
-            />
-
-            <H2Wrapper>
-                <H2>Tokens</H2>
-                <Tooltip
-                    placement="top"
-                    content="Insert token name, symbol or address to be able to send it."
-                >
-                    <StyledIcon
-                        icon={ICONS.HELP}
-                        color={colors.TEXT_SECONDARY}
-                        size={24}
-                    />
-                </Tooltip>
-            </H2Wrapper>
-            {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
-            {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
-
-            {/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
-            {/* TODO: Input's box-shadow  */}
-            <AsyncSelectWrapper>
-                <AsyncSelect
-                    isSearchable
-                    defaultOptions
-                    value={null}
-                    isMulti={false}
-                    placeholder="Search for the token"
-                    loadingMessage={() => 'Loading...'}
-                    noOptionsMessage={() => 'Token not found'}
-                    onChange={(token) => {
-                        const isAdded = tokens.find(t => t.symbol === token.symbol);
-                        if (!isAdded) {
-                            props.addToken(token, account);
-                        }
-                    }}
-                    loadOptions={input => props.loadTokens(input, account.network)}
-                    formatOptionLabel={(option) => {
-                        const isAdded = tokens.find(t => t.symbol === option.symbol);
-                        if (isAdded) {
-                            return `${option.name} (Already added)`;
-                        }
-                        return option.name;
-                    }}
-                    getOptionLabel={option => option.name}
-                    getOptionValue={option => option.symbol}
                 />
-            </AsyncSelectWrapper>
+                <H2Wrapper>
+                    <H2>Tokens</H2>
+                    <StyledTooltip
+                        maxWidth={200}
+                        placement="top"
+                        content="Insert token name, symbol or address to be able to send it."
+                    >
+                        <StyledIcon
+                            icon={ICONS.HELP}
+                            color={colors.TEXT_SECONDARY}
+                            size={24}
+                        />
+                    </StyledTooltip>
+                </H2Wrapper>
+                {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
+                {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
 
-            <AddedTokensWrapper>
+                {/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
-                {tokens.map(token => (
+                {/* TODO: Input's box-shadow  */}
-                    <AddedToken
+                <AsyncSelectWrapper>
-                        key={token.symbol}
+                    <AsyncSelect
-                        token={token}
+                        isSearchable
-                        pending={pending}
+                        defaultOptions
-                        removeToken={props.removeToken}
+                        value={null}
+                        isMulti={false}
+                        placeholder="Search for the token"
+                        loadingMessage={() => 'Loading...'}
+                        noOptionsMessage={() => 'Token not found'}
+                        onChange={(token) => {
+                            const isAdded = tokens.find(t => t.symbol === token.symbol);
+                            if (!isAdded) {
+                                props.addToken(token, account);
+                            }
+                        }}
+                        loadOptions={input => props.loadTokens(input, account.network)}
+                        formatOptionLabel={(option) => {
+                            const isAdded = tokens.find(t => t.symbol === option.symbol);
+                            if (isAdded) {
+                                return `${option.name} (Already added)`;
+                            }
+                            return option.name;
+                        }}
+                        getOptionLabel={option => option.name}
+                        getOptionValue={option => option.symbol}
                     />
-                ))}
+                </AsyncSelectWrapper>
-            </AddedTokensWrapper>
+
-        </React.Fragment>
+                <AddedTokensWrapper>
+                    {tokens.map(token => (
+                        <AddedToken
+                            key={token.symbol}
+                            token={token}
+                            pending={pending}
+                            removeToken={props.removeToken}
+                        />
+                    ))}
+                </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 = () => (
-    <Wrapper>
+    <Content>
-        <StyledH2>Dashboard</StyledH2>
+        <Wrapper>
-        <Row>
+            <H2>Dashboard</H2>
-            <H2>Please select your coin</H2>
+            <Row>
-            <P>You will gain access to recieving &amp; sending selected coin</P>
+                <H2>Please select your coin</H2>
-            <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
+                <P>You will gain access to recieving &amp; sending selected coin</P>
-        </Row>
+                <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
-    </Wrapper>
+            </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,25 +23,30 @@ 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 = () => (
-    <Section>
+    <Content>
-        <Row>
+        <Section>
-            <Icon
+            <Row>
-                size={60}
+                <Icon
-                color={colors.WARNING_PRIMARY}
+                    size={60}
-                icon={ICONS.WARNING}
+                    color={colors.WARNING_PRIMARY}
-            />
+                    icon={ICONS.WARNING}
-            <StyledH2>Device settings is under construction</StyledH2>
+                />
-            <P>Please use Bitcoin wallet interface to change your device settings</P>
+                <H2>Device settings is under construction</H2>
-            <a href="https://wallet.trezor.io/">
+                <StyledP isSmaller>Please use Bitcoin wallet interface to change your device settings</StyledP>
-                <Button>Take me to the Bitcoin wallet</Button>
+                <Link href="https://wallet.trezor.io/">
-            </a>
+                    <Button>Take me to the Bitcoin wallet</Button>
-        </Row>
+                </Link>
-    </Section>
+            </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 = () => (
-    <Wrapper>
+    <Content>
-        Wallet settings
+        <Wrapper>
-    </Wrapper>
+            Wallet settings
+        </Wrapper>
+    </Content>
 );
 
 export default connect(null, null)(WalletSettings);