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 => ( + + ))} + +
); };