From f8a947e187fc8a125dafb05bae92f25192987781 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Mon, 24 Sep 2018 16:40:38 +0200
Subject: [PATCH] Padding in accounts

---
 src/components/DeviceHeader/index.js          |   2 +-
 src/components/Footer/index.js                |   1 +
 src/config/variables.js                       |   2 +
 .../components/StickyContainer/index.js       |   2 +
 .../Wallet/components/LeftNavigation/index.js |   4 +-
 .../components/TopNavigationAccount/index.js  |  11 +-
 src/views/Wallet/index.js                     |   2 +-
 .../Wallet/views/AccountReceive/index.js      |   5 +-
 src/views/Wallet/views/AccountSend/index.js   |   2 +-
 .../components/AccountBalance/index.js        |  32 +++-
 .../Wallet/views/AccountSummary/index.js      | 174 +++++++++---------
 11 files changed, 136 insertions(+), 101 deletions(-)

diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js
index c47e3d3b..2b117dab 100644
--- a/src/components/DeviceHeader/index.js
+++ b/src/components/DeviceHeader/index.js
@@ -15,7 +15,7 @@ import colors from 'config/colors';
 
 const Wrapper = styled.div`
     position: relative;
-    height: 64px;
+    height: 70px;
     width: 320px;
     display: flex;
     align-items: center;
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 8f19462c..2b988cba 100644
--- a/src/components/Footer/index.js
+++ b/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)`
diff --git a/src/config/variables.js b/src/config/variables.js
index 542e6986..4c900387 100644
--- a/src/config/variables.js
+++ b/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',
 };
diff --git a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
index def4b97d..65827a9a 100644
--- a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
@@ -22,8 +22,10 @@ const AsideWrapper = styled.aside`
     min-width: 320px;
     overflow: hidden;
     background: ${colors.MAIN};
+    border-right: 1px solid ${colors.BACKGROUND};
 
     .fixed {
+        border-right: 1px solid ${colors.BACKGROUND};
         position: fixed;
     }
 
diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js
index ab1e5399..87651e1a 100644
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@@ -11,7 +11,9 @@ import CoinMenu from './components/CoinMenu';
 import DeviceMenu from './components/DeviceMenu';
 import StickyContainer from './components/StickyContainer';
 
-const Header = styled(DeviceHeader)``;
+const Header = styled(DeviceHeader)`
+    border-right: 1px solid ${colors.BACKGROUND};
+`;
 
 const TransitionGroupWrapper = styled(TransitionGroup)`
     width: 640px;
diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js
index 8a0c47ad..17058116 100644
--- a/src/views/Wallet/components/TopNavigationAccount/index.js
+++ b/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,20 +8,21 @@ 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;
-
+    
     &.active,
     &:hover {
         transition: all 0.3s ease-in-out;
@@ -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>
     );
diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js
index 07024a52..ff9777d9 100644
--- a/src/views/Wallet/index.js
+++ b/src/views/Wallet/index.js
@@ -66,7 +66,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};
diff --git a/src/views/Wallet/views/AccountReceive/index.js b/src/views/Wallet/views/AccountReceive/index.js
index 412f9229..5b84484d 100644
--- a/src/views/Wallet/views/AccountReceive/index.js
+++ b/src/views/Wallet/views/AccountReceive/index.js
@@ -16,7 +16,10 @@ 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 StyledH2 = styled(H2)`
     padding: 20px 48px;
 `;
diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js
index d7d2ffa3..fbeeac63 100644
--- a/src/views/Wallet/views/AccountSend/index.js
+++ b/src/views/Wallet/views/AccountSend/index.js
@@ -24,7 +24,7 @@ import type { Props } from './Container';
 const SmallScreenWidth = '850px';
 
 const Wrapper = styled.section`
-    padding: 0 48px;
+    padding: 20px 48px;
 `;
 
 const StyledH2 = styled(H2)`
diff --git a/src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js b/src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js
index 17384817..243b48d5 100644
--- a/src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js
+++ b/src/views/Wallet/views/AccountSummary/components/AccountBalance/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-weight: ${FONT_WEIGHT.BIGGER};
+    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};
-    font-weight: ${FONT_WEIGHT.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>
                 )}
diff --git a/src/views/Wallet/views/AccountSummary/index.js b/src/views/Wallet/views/AccountSummary/index.js
index 0a5d6644..c22485b1 100644
--- a/src/views/Wallet/views/AccountSummary/index.js
+++ b/src/views/Wallet/views/AccountSummary/index.js
@@ -18,8 +18,12 @@ import AddedToken from './components/AddedToken';
 
 import type { Props } from './Container';
 
+const Content = styled.div`
+    padding-left: 35px;
+`;
+
 const AccountHeading = styled.div`
-    padding: 20px 48px 20px 45px;
+    padding: 30px 48px 30px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -28,7 +32,7 @@ const AccountHeading = styled.div`
 const H2Wrapper = styled.div`
     display: flex;
     align-items: center;
-    padding: 20px 48px;
+    padding: 20px 0;
 `;
 
 const StyledTooltip = styled(Tooltip)`
@@ -54,7 +58,7 @@ const StyledIcon = styled(Icon)`
 `;
 
 const AsyncSelectWrapper = styled.div`
-    padding: 0px 48px 32px 48px;
+    padding-bottom: 32px;
 `;
 
 const AddedTokensWrapper = styled.div``;
@@ -77,89 +81,91 @@ const AccountSummary = (props: Props) => {
 
     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
-                    placement="top"
-                    content={(
-                        <React.Fragment>
-                            Insert token name, symbol or address to be able to send it.
-                        </React.Fragment>
-                    )}
-                >
-                    <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}
+            <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}
                 />
-            </AsyncSelectWrapper>
-
-            <AddedTokensWrapper>
-                {tokens.map(token => (
-                    <AddedToken
-                        key={token.symbol}
-                        token={token}
-                        pending={pending}
-                        removeToken={props.removeToken}
+
+                <H2Wrapper>
+                    <H2>Tokens</H2>
+                    <StyledTooltip
+                        placement="top"
+                        content={(
+                            <React.Fragment>
+                            Insert token name, symbol or address to be able to send it.
+                            </React.Fragment>
+                        )}
+                    >
+                        <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}
                     />
-                ))}
-            </AddedTokensWrapper>
+                </AsyncSelectWrapper>
+
+                <AddedTokensWrapper>
+                    {tokens.map(token => (
+                        <AddedToken
+                            key={token.symbol}
+                            token={token}
+                            pending={pending}
+                            removeToken={props.removeToken}
+                        />
+                    ))}
+                </AddedTokensWrapper>
+            </Content>
         </SelectedAccount>
     );
 };