Unified paddings in wallet views

src/views/Wallet/index.js

@@ -77,6 +77,7 @@ const Body = styled.div`
     display: flex;
     flex: 1;
     flex-direction: column;
+    padding: 40px 35px 20px 35px;
 `;
 
 const Wallet = (props: WalletContainerProps) => (

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

@@ -16,22 +16,17 @@ import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
 
 import type { Props } from './Container';
 
-const Wrapper = styled.div`
+const Wrapper = styled.div``;
-    padding-top: 20px;
-`;
 
 const Label = styled.div`
     padding: 25px 0 5px 0;
     color: ${colors.TEXT_SECONDARY};
 `;
 
-const StyledH2 = styled(H2)`
-    padding: 20px 48px;
-`;
 const AddressWrapper = styled.div`
     position: relative;
-    padding: 0px 48px;
     display: flex;
+    margin-top: 20px;
     flex-wrap: wrap;
     flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')};
 `;
@@ -148,7 +143,7 @@ const AccountReceive = (props: Props) => {
     return (
         <SelectedAccount {...props}>
             <Wrapper>
-                <StyledH2>Receive Ethereum or tokens</StyledH2>
+                <H2>Receive Ethereum or tokens</H2>
                 <AddressWrapper
                     isShowingQrCode={addressVerified || addressUnverified}
                 >

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

@@ -23,16 +23,10 @@ import type { Props } from './Container';
 // and put it inside config/variables.js
 const SmallScreenWidth = '850px';
 
-const Wrapper = styled.section`
+const Wrapper = styled.section``;
-    padding: 20px 48px;
-`;
-
-const StyledH2 = styled(H2)`
-    padding: 20px 0;
-`;
 
 const InputRow = styled.div`
-    margin-bottom: 20px;
+    margin: 20px 0;
 `;
 
 const SetMaxAmountButton = styled(Button)`
@@ -237,7 +231,7 @@ const AccountSend = (props: Props) => {
     return (
         <SelectedAccount {...props}>
             <Wrapper>
-                <StyledH2>Send Ethereum or tokens</StyledH2>
+                <H2>Send Ethereum or tokens</H2>
                 <InputRow>
                     <Input
                         state={getAddressInputState(address, errors.address, warnings.address)}

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

@@ -11,7 +11,6 @@ const Wrapper = styled.div`
     flex: 1;
     flex-direction: row;
     background: ${colors.WHITE};
-    padding: 50px;
 `;
 
 const StyledH2 = styled(H2)`

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

@@ -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/Account/Summary/index.js

@@ -0,0 +1,162 @@
+/* @flow */
+import styled from 'styled-components';
+import React from 'react';
+import { H2 } from 'components/Heading';
+import BigNumber from 'bignumber.js';
+import Icon from 'components/Icon';
+import { AsyncSelect } from 'components/Select';
+import ICONS from 'config/icons';
+import colors from 'config/colors';
+import Tooltip from 'components/Tooltip';
+
+import CoinLogo from 'components/images/CoinLogo';
+import * as stateUtils from 'reducers/utils';
+import SelectedAccount from 'views/Wallet/components/SelectedAccount';
+import Link from 'components/Link';
+import AccountBalance from './components/Balance';
+import AddedToken from './components/Token';
+
+import type { Props } from './Container';
+
+const AccountHeading = styled.div`
+    padding: 0 0 30px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+const H2Wrapper = styled.div`
+    display: flex;
+    align-items: center;
+    padding: 20px 0;
+`;
+
+const StyledTooltip = styled(Tooltip)`
+    position: relative;
+    top: 2px;
+`;
+
+const AccountName = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const StyledCoinLogo = styled(CoinLogo)`
+    margin-right: 10px;
+`;
+
+const StyledIcon = styled(Icon)`
+    position: relative;
+    top: -1px;
+    &:hover {
+        cursor: pointer;
+    }
+`;
+
+const AsyncSelectWrapper = styled.div`
+    padding-bottom: 32px;
+`;
+
+const AddedTokensWrapper = styled.div``;
+
+const AccountSummary = (props: Props) => {
+    const device = props.wallet.selectedDevice;
+    const {
+        account,
+        network,
+        tokens,
+        pending,
+    } = props.selectedAccount;
+
+    // flow
+    if (!device || !account || !network) return <SelectedAccount {...props} />;
+
+    const explorerLink: string = `${network.explorer.address}${account.address}`;
+    const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
+    const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
+
+    return (
+        <SelectedAccount {...props}>
+            <AccountHeading>
+                <AccountName>
+                    <StyledCoinLogo coinNetwork={account.network} />
+                    <H2>Account #{parseInt(account.index, 10) + 1}</H2>
+                </AccountName>
+                <Link
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    href={explorerLink}
+                    isGray
+                >See full transaction history
+                </Link>
+            </AccountHeading>
+            <AccountBalance
+                coin={network}
+                summary={props.summary}
+                balance={balance}
+                network={network.network}
+                fiat={props.fiat}
+                localStorage={props.localStorage}
+            />
+            <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 */}
+
+            {/* 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>
+
+            <AddedTokensWrapper>
+                {tokens.map(token => (
+                    <AddedToken
+                        key={token.symbol}
+                        token={token}
+                        pending={pending}
+                        removeToken={props.removeToken}
+                    />
+                ))}
+            </AddedTokensWrapper>
+        </SelectedAccount>
+    );
+};
+
+export default AccountSummary;

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

@@ -1,170 +0,0 @@
-/* @flow */
-import styled from 'styled-components';
-import React from 'react';
-import { H2 } from 'components/Heading';
-import BigNumber from 'bignumber.js';
-import Icon from 'components/Icon';
-import { AsyncSelect } from 'components/Select';
-import ICONS from 'config/icons';
-import colors from 'config/colors';
-import Tooltip from 'components/Tooltip';
-
-import CoinLogo from 'components/images/CoinLogo';
-import * as stateUtils from 'reducers/utils';
-import SelectedAccount from 'views/Wallet/components/SelectedAccount';
-import Link from 'components/Link';
-import AccountBalance from './components/AccountBalance';
-import AddedToken from './components/AddedToken';
-
-import type { Props } from './Container';
-
-const Content = styled.div`
-    padding: 0 35px;
-`;
-
-const AccountHeading = styled.div`
-    padding: 30px 48px 30px 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-`;
-
-const H2Wrapper = styled.div`
-    display: flex;
-    align-items: center;
-    padding: 20px 0;
-`;
-
-const StyledTooltip = styled(Tooltip)`
-    position: relative;
-    top: 2px;
-`;
-
-const AccountName = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
-const StyledCoinLogo = styled(CoinLogo)`
-    margin-right: 10px;
-`;
-
-const StyledIcon = styled(Icon)`
-    position: relative;
-    top: -1px;
-    &:hover {
-        cursor: pointer;
-    }
-`;
-
-const AsyncSelectWrapper = styled.div`
-    padding-bottom: 32px;
-`;
-
-const AddedTokensWrapper = styled.div``;
-
-const AccountSummary = (props: Props) => {
-    const device = props.wallet.selectedDevice;
-    const {
-        account,
-        network,
-        tokens,
-        pending,
-    } = props.selectedAccount;
-
-    // flow
-    if (!device || !account || !network) return <SelectedAccount {...props} />;
-
-    const explorerLink: string = `${network.explorer.address}${account.address}`;
-    const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
-    const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
-
-    return (
-        <SelectedAccount {...props}>
-            <Content>
-                <AccountHeading>
-                    <AccountName>
-                        <StyledCoinLogo coinNetwork={account.network} />
-                        <H2>Account #{parseInt(account.index, 10) + 1}</H2>
-                    </AccountName>
-                    <Link
-                        target="_blank"
-                        rel="noreferrer noopener"
-                        href={explorerLink}
-                        isGray
-                    >See full transaction history
-                    </Link>
-                </AccountHeading>
-
-                <AccountBalance
-                    coin={network}
-                    summary={props.summary}
-                    balance={balance}
-                    network={network.network}
-                    fiat={props.fiat}
-                    localStorage={props.localStorage}
-                />
-
-                <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 */}
-
-                {/* 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>
-
-                <AddedTokensWrapper>
-                    {tokens.map(token => (
-                        <AddedToken
-                            key={token.symbol}
-                            token={token}
-                            pending={pending}
-                            removeToken={props.removeToken}
-                        />
-                    ))}
-                </AddedTokensWrapper>
-            </Content>
-        </SelectedAccount>
-    );
-};
-
-export default AccountSummary;

src/views/index.js

@@ -11,10 +11,10 @@ import LandingContainer from 'views/Landing/Container';
 
 // wallet views
 import WalletContainer from 'views/Wallet';
-import AccountSummary from 'views/Wallet/views/AccountSummary/Container';
+import AccountSummary from 'views/Wallet/views/Account/Summary/Container';
-import AccountSend from 'views/Wallet/views/AccountSend/Container';
+import AccountSend from 'views/Wallet/views/Account/Send/Container';
-import AccountReceive from 'views/Wallet/views/AccountReceive/Container';
+import AccountReceive from 'views/Wallet/views/Account/Receive/Container';
-import AccountSignVerify from 'views/Wallet/views/AccountSignVerify';
+import AccountSignVerify from 'views/Wallet/views/Account/SignVerify';
 
 import WalletDashboard from 'views/Wallet/views/Dashboard';
 import WalletDeviceSettings from 'views/Wallet/views/DeviceSettings';