Padding in accounts

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;

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/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/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;
     }
 

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;

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

@@ -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};

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;
 `;

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)`

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>
                 )}

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,6 +81,7 @@ const AccountSummary = (props: Props) => {
 
     return (
         <SelectedAccount {...props}>
+            <Content>
                 <AccountHeading>
                     <AccountName>
                         <StyledCoinLogo coinNetwork={account.network} />
@@ -160,6 +165,7 @@ const AccountSummary = (props: Props) => {
                         />
                     ))}
                 </AddedTokensWrapper>
+            </Content>
         </SelectedAccount>
     );
 };