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 (
Summary
- Send
Receive
+ Send
+ {/* Sign & Verify */}
);
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-size: ${FONT_SIZE.BASE};
- font-weight: ${FONT_WEIGHT.BASE};
+ 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};
+ 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 {
constructor(props: Props) {
@@ -125,11 +141,11 @@ class AccountBalance extends Component {
{this.props.balance} {selectedCoin.symbol}
{fiatRate && (
-
+
- ${fiatRateValue}
+ ${fiatRateValue}
1.00 {selectedCoin.symbol}
-
+
)}
)}
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 (
-
-
-
- Account #{parseInt(account.index, 10) + 1}
-
- See full transaction history
-
-
+
+
+
+
+ Account #{parseInt(account.index, 10) + 1}
+
+ See full transaction history
+
+
-
-
-
- Tokens
-
- Insert token name, symbol or address to be able to send it.
-
- )}
- >
-
-
-
- {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
- {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
-
- {/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
- {/* TODO: Input's box-shadow */}
-
- '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}
+
-
-
- {tokens.map(token => (
-
+ Tokens
+
+ Insert token name, symbol or address to be able to send it.
+
+ )}
+ >
+
+
+
+ {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
+ {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
+
+ {/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
+ {/* TODO: Input's box-shadow */}
+
+ '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}
/>
- ))}
-
+
+
+
+ {tokens.map(token => (
+
+ ))}
+
+
);
};