diff --git a/.eslintignore b/.eslintignore index cb7239b8..ec297d25 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,6 +2,5 @@ public build build-devel coverage -images node_modules src/flowtype/npm \ No newline at end of file diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index 8315b326..6eba69a0 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -12,7 +12,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/components/Header/index.js b/src/components/Header/index.js index 75a9862b..6703177d 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -41,6 +41,7 @@ const Right = styled.div``; const A = styled.a` color: ${colors.WHITE}; margin-left: 24px; + transition: all .1s ease-in; &:visited { color: ${colors.WHITE}; diff --git a/src/components/Select/index.js b/src/components/Select/index.js index 5e94cdd3..5c6bef36 100644 --- a/src/components/Select/index.js +++ b/src/components/Select/index.js @@ -13,7 +13,7 @@ const styles = isSearchable => ({ control: (base, { isDisabled }) => ({ ...base, minHeight: 'initial', - height: '100%', + height: '40px', borderRadius: '2px', borderColor: colors.DIVIDER, boxShadow: 'none', diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 2d21bebf..d67ba8d7 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -13,7 +13,7 @@ const Wrapper = styled.div` const disabledColor = colors.TEXT_PRIMARY; -const TextArea = styled.textarea` +const StyledTextarea = styled.textarea` width: 100%; min-height: 85px; margin-bottom: 10px; @@ -124,7 +124,8 @@ const Textarea = ({ {topLabel && ( {topLabel} )} - `${props.maxWidth}px` || 'auto'}; position: absolute; z-index: 1070; - display: block; visibility: visible; border: none; border-radius: 3px; diff --git a/src/images/bch-logo.png b/src/components/images/CoinLogo/images/bch.png similarity index 100% rename from src/images/bch-logo.png rename to src/components/images/CoinLogo/images/bch.png diff --git a/src/images/btc-logo.png b/src/components/images/CoinLogo/images/btc.png similarity index 100% rename from src/images/btc-logo.png rename to src/components/images/CoinLogo/images/btc.png diff --git a/src/images/btg-logo.png b/src/components/images/CoinLogo/images/btg.png similarity index 100% rename from src/images/btg-logo.png rename to src/components/images/CoinLogo/images/btg.png diff --git a/src/images/dash-logo.png b/src/components/images/CoinLogo/images/dash.png similarity index 100% rename from src/images/dash-logo.png rename to src/components/images/CoinLogo/images/dash.png diff --git a/src/images/etc-logo.png b/src/components/images/CoinLogo/images/etc.png similarity index 100% rename from src/images/etc-logo.png rename to src/components/images/CoinLogo/images/etc.png diff --git a/src/images/eth-logo.png b/src/components/images/CoinLogo/images/eth.png similarity index 100% rename from src/images/eth-logo.png rename to src/components/images/CoinLogo/images/eth.png diff --git a/src/images/ltc-logo.png b/src/components/images/CoinLogo/images/ltc.png similarity index 100% rename from src/images/ltc-logo.png rename to src/components/images/CoinLogo/images/ltc.png diff --git a/src/images/nem-logo.png b/src/components/images/CoinLogo/images/nem.png similarity index 100% rename from src/images/nem-logo.png rename to src/components/images/CoinLogo/images/nem.png diff --git a/src/images/rinkeby-logo.png b/src/components/images/CoinLogo/images/rinkeby.png similarity index 100% rename from src/images/rinkeby-logo.png rename to src/components/images/CoinLogo/images/rinkeby.png diff --git a/src/images/trop-logo.png b/src/components/images/CoinLogo/images/trop.png similarity index 100% rename from src/images/trop-logo.png rename to src/components/images/CoinLogo/images/trop.png diff --git a/src/images/zec-logo.png b/src/components/images/CoinLogo/images/zec.png similarity index 100% rename from src/images/zec-logo.png rename to src/components/images/CoinLogo/images/zec.png diff --git a/src/components/images/CoinLogo/index.js b/src/components/images/CoinLogo/index.js index 60761e7b..472bbdd1 100644 --- a/src/components/images/CoinLogo/index.js +++ b/src/components/images/CoinLogo/index.js @@ -1,40 +1,58 @@ -import React from 'react'; +import React, { Component } from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; -import { ICON_SIZE } from 'config/variables'; - -const Logo = styled.div` - height: ${ICON_SIZE.BASE}; - width: ${ICON_SIZE.BASE}; - margin-right: 5px; - background-repeat: no-repeat; - background-position: center; - background-size: auto ${ICON_SIZE.BASE}; - background-image: url('${props => props.coinImg}'); + +const Wrapper = styled.div` + padding-right: 20px; + width: 40px; +`; + +const Logo = styled.img` + width: ${props => (props.hasLongIcon ? '15px' : '23px')}; + margin-left: ${props => (props.hasLongIcon ? '3px' : '0px')}; + display: block; `; -const CoinLogo = ({ - className, coinNetwork, coinImg, -}) => { - let coinImgName = coinNetwork; - if (coinImgName === 'ethereum') { - coinImgName = 'eth'; - } else if (coinImgName === 'ethereum-classic') { - coinImgName = 'etc'; +class CoinLogo extends Component { + constructor() { + super(); + this.longIcons = ['etc', 'eth', 'trop']; } - const coinImgUrl = `../images/${coinImgName}-logo.png`; - - return ( - - ); -}; + + getIcon() { + const { coinNetwork, coinId } = this.props; + let coinImgName = coinNetwork; + if (coinImgName === 'ethereum') { + coinImgName = 'eth'; + } else if (coinImgName === 'ethereum-classic') { + coinImgName = 'etc'; + } + return coinImgName || coinId; + } + + hasLongIcon(coinImgName) { + let hasLongIcon = false; + if (this.longIcons.includes(coinImgName)) { + hasLongIcon = true; + } + return hasLongIcon; + } + + render() { + const iconName = this.getIcon(); + return ( + + + + ); + } +} CoinLogo.propTypes = { - className: PropTypes.string, - coinImg: PropTypes.string, + coinId: PropTypes.string, coinNetwork: PropTypes.string, }; diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 95b13a2d..c63a7351 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -7,6 +7,7 @@ import Icon from 'components/Icon'; import { FONT_SIZE, FONT_WEIGHT, + FONT_FAMILY, TRANSITION, } from 'config/variables'; @@ -28,18 +29,19 @@ const InputIconWrapper = styled.div` `; const TopLabel = styled.span` - padding-bottom: 4px; + padding-bottom: 10px; color: ${colors.TEXT_SECONDARY}; `; const StyledInput = styled.input` width: 100%; - padding: 6px ${props => (props.hasIcon ? '32px' : '12px')} 6px 12px; + height: 40px; + padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px; line-height: 1.42857143; font-size: ${FONT_SIZE.SMALL}; font-weight: ${FONT_WEIGHT.BASE}; - color: ${colors.TEXT_PRIMARY}; + color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)}; border-radius: 2px; ${props => props.hasAddon && css` @@ -61,7 +63,8 @@ const StyledInput = styled.input` const StyledIcon = styled(Icon)` position: absolute; left: auto; - right: 3px; + top: 3px; + right: 10px; `; const BottomText = styled.span` @@ -116,6 +119,7 @@ class Input extends Component { innerRef={this.props.innerRef} hasAddon={!!this.props.sideAddons} type={this.props.type} + color={this.getColor(this.props.state)} placeholder={this.props.placeholder} autocomplete={this.props.autocomplete} autocorrect={this.props.autocorrect} diff --git a/src/components/modals/pin/Pin/components/PinButton/index.js b/src/components/modals/pin/Pin/components/Button/index.js similarity index 100% rename from src/components/modals/pin/Pin/components/PinButton/index.js rename to src/components/modals/pin/Pin/components/Button/index.js diff --git a/src/components/inputs/PinInput/index.js b/src/components/modals/pin/Pin/components/Input/index.js similarity index 100% rename from src/components/inputs/PinInput/index.js rename to src/components/modals/pin/Pin/components/Input/index.js diff --git a/src/components/modals/pin/Pin/index.js b/src/components/modals/pin/Pin/index.js index 42a62d9f..5862097f 100644 --- a/src/components/modals/pin/Pin/index.js +++ b/src/components/modals/pin/Pin/index.js @@ -4,9 +4,10 @@ import { H2 } from 'components/Heading'; import React, { Component } from 'react'; import Link from 'components/Link'; import styled from 'styled-components'; -import PinInput from 'components/inputs/PinInput'; + import Button from 'components/Button'; -import PinButton from './components/PinButton'; +import PinButton from './components/Button'; +import PinInput from './components/Input'; import type { Props } from '../../index'; type State = { diff --git a/src/config/colors.js b/src/config/colors.js index 32c737e4..e870decc 100644 --- a/src/config/colors.js +++ b/src/config/colors.js @@ -2,6 +2,8 @@ export default { WHITE: '#FFFFFF', BACKGROUND: '#EBEBEB', + TEXT: '#333333', + HEADER: '#1A1A1A', BODY: '#E3E3E3', MAIN: '#FBFBFB', 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/constants/coins.js b/src/constants/coins.js index cfdd9d26..7571f8ab 100644 --- a/src/constants/coins.js +++ b/src/constants/coins.js @@ -1,32 +1,26 @@ export default [ { + id: 'btc', coinName: 'Bitcoin', - url: 'https://wallet.trezor.io/#/coin/btc', - image: '../images/btc-logo.png', }, { + id: 'ltc', coinName: 'Litecoin', - url: 'https://wallet.trezor.io/#/coin/ltc', - image: '../images/ltc-logo.png', }, { + id: 'bch', coinName: 'Bitcoin Cash', - url: 'https://wallet.trezor.io/#/coin/bch', - image: '../images/bch-logo.png', }, { + id: 'btg', coinName: 'Bitcoin Gold', - url: 'https://wallet.trezor.io/#/coin/btg', - image: '../images/btg-logo.png', }, { + id: 'dash', coinName: 'Dash', - url: 'https://wallet.trezor.io/#/coin/dash', - image: '../images/dash-logo.png', }, { + id: 'zec', coinName: 'Zcash', - url: 'https://wallet.trezor.io/#/coin/zec', - image: '../images/zec-logo.png', }, -]; +]; \ No newline at end of file diff --git a/src/support/BaseStyles.js b/src/support/BaseStyles.js index d4a73d6f..354d4960 100644 --- a/src/support/BaseStyles.js +++ b/src/support/BaseStyles.js @@ -1,4 +1,5 @@ import { injectGlobal } from 'styled-components'; +import colors from 'config/colors'; import normalize from 'styled-normalize'; const baseStyles = () => injectGlobal` @@ -11,6 +12,7 @@ const baseStyles = () => injectGlobal` font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: 14px; + color: ${colors.TEXT}; } * , *:before , *:after { diff --git a/src/views/Landing/components/BrowserNotSupported/index.js b/src/views/Landing/components/BrowserNotSupported/index.js index e5f0f51e..e9cc2f62 100644 --- a/src/views/Landing/components/BrowserNotSupported/index.js +++ b/src/views/Landing/components/BrowserNotSupported/index.js @@ -1,10 +1,13 @@ import React from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import Link from 'components/Link'; import Button from 'components/Button'; import P from 'components/Paragraph'; import { H2 } from 'components/Heading'; +import ChromeImage from 'images/browser-chrome.png'; +import FirefoxImage from 'images/browser-firefox.png'; + const Wrapper = styled.div``; const ChooseBrowserWrapper = styled.div` @@ -12,16 +15,10 @@ const ChooseBrowserWrapper = styled.div` justify-content: space-between; `; -const BrowserLogo = styled.div` +const BrowserLogo = styled.img` margin-bottom: 10px; width: 43px; height: 43px; - ${props => props.isChrome && css` - background-image: url('../images/browser-chrome.png'); - `} - ${props => props.isFirefox && css` - background-image: url('../images/browser-firefox.png'); - `} `; const Browser = styled.div` @@ -37,7 +34,7 @@ const BrowserNotSupported = () => ( Please choose one of the supported browsers - + Google Chrome ( - + Mozzila Firefox ( + + {children} + +); + +Content.propTypes = { + children: PropTypes.element, +}; + +export default Content; diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index d0859e51..949d9d77 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -24,6 +24,10 @@ class CoinMenu extends Component { return baseUrl; } + getCoinUrl(coinId) { + return `https://wallet.trezor.io/#/coin/${coinId}`; + } + render() { const { config } = this.props.localStorage; return ( @@ -44,15 +48,14 @@ class CoinMenu extends Component { {coins.map(coin => ( - + props.borderTop && css` - border-top: 1px solid ${colors.DIVIDER}; - `} - ${props => props.borderBottom && css` - border-bottom: 1px solid ${colors.DIVIDER}; + ${props => props.hasBorder && css` + border-top: 1px solid ${colors.BODY}; + border-bottom: 1px solid ${colors.BODY}; `} `; const Divider = ({ - textLeft, textRight, borderTop = false, borderBottom = false, + textLeft, textRight, hasBorder = false, }) => ( {textLeft} {textRight} @@ -35,8 +32,7 @@ const Divider = ({ Divider.propTypes = { textLeft: PropTypes.string, textRight: PropTypes.string, - borderTop: PropTypes.bool, - borderBottom: PropTypes.bool, + hasBorder: PropTypes.bool, }; export default Divider; diff --git a/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js b/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js index fa8506e3..4ffc780b 100644 --- a/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js @@ -37,10 +37,6 @@ const IconWrapper = styled.div` margin-right: 10px; `; -const LogoWrapper = styled.div` - margin-right: 3px; -`; - const RowCoin = ({ coin, iconLeft, iconRight, }) => ( @@ -57,12 +53,10 @@ const RowCoin = ({ )} - - - + {coin.name} @@ -86,7 +80,7 @@ RowCoin.propTypes = { coin: PropTypes.shape({ name: PropTypes.string.isRequired, network: PropTypes.string, - img: PropTypes.string, + id: PropTypes.string, }).isRequired, iconLeft: PropTypes.shape(iconShape), iconRight: PropTypes.shape(iconShape), diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index e399e10d..2f2c87f5 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -12,7 +12,9 @@ import DeviceMenu from './components/DeviceMenu'; import StickyContainer from './components/StickyContainer'; import type { Props } from './components/common'; -const Header = styled(DeviceHeader)``; +const Header = styled(DeviceHeader)` + border-right: 1px solid ${colors.BACKGROUND}; +`; const Counter = styled.div` border: 1px solid ${colors.DIVIDER}; @@ -44,7 +46,7 @@ const Footer = styled.div.attrs({ width: 320px; bottom: 0; background: ${colors.MAIN}; - border-right: 1px solid ${colors.DIVIDER}; + border-right: 1px solid ${colors.BACKGROUND}; `; const Body = styled.div` @@ -58,7 +60,7 @@ const Help = styled.div` text-align: center; width: 319px; padding: 8px 0px; - border-top: 1px solid ${colors.DIVIDER}; + border-top: 1px solid ${colors.BACKGROUND}; `; const A = styled.a` 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 c78a3020..2003d405 100644 --- a/src/views/Wallet/index.js +++ b/src/views/Wallet/index.js @@ -68,7 +68,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 202ceee1..8b7249e6 100644 --- a/src/views/Wallet/views/AccountReceive/index.js +++ b/src/views/Wallet/views/AccountReceive/index.js @@ -5,6 +5,7 @@ import { H2 } from 'components/Heading'; import Button from 'components/Button'; import Icon from 'components/Icon'; import ICONS from 'config/icons'; +import Content from 'views/Wallet/components/Content'; import colors from 'config/colors'; import Tooltip from 'components/Tooltip'; @@ -14,27 +15,35 @@ import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables'; import type { Props } from './Container'; -const Wrapper = styled.div``; -const StyledH2 = styled(H2)` - padding: 20px 48px; +const Label = styled.div` + padding: 25px 0 5px 0; + color: ${colors.TEXT_SECONDARY}; `; + const AddressWrapper = styled.div` position: relative; - padding: 0px 48px; display: flex; + margin-top: 20px; flex-wrap: wrap; flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')}; `; +const StyledQRCode = styled(QRCode)` + padding: 15px; + margin-top: 0 25px; + border: 1px solid ${colors.BODY}; +`; + const ValueWrapper = styled.div` font-size: ${FONT_SIZE.SMALL}; + height: 40px; font-weight: ${FONT_WEIGHT.SMALLEST}; line-height: 1.42857143; font-family: ${FONT_FAMILY.MONOSPACE}; color: ${colors.TEXT_PRIMARY}; border: 1px solid ${colors.DIVIDER}; border-radius: 3px; - padding: 6px 12px; + padding: 10px 12px; padding-right: 38px; position: relative; flex: 1; @@ -119,23 +128,19 @@ const EyeButton = styled(Button)` padding: 0; position: absolute; left: auto; - right: 60px; - top: 3px; + right: 10px; + top: 6px; `; -const qrCodeStyle = { - width: 256, - margin: '20px auto', -}; - const AccountReceive = (props: Props) => { const device = props.wallet.selectedDevice; const { account, discovery, + shouldRender, } = props.selectedAccount; - if (!device || !account || !discovery) return null; + if (!device || !account || !discovery || !shouldRender) return null; const { addressVerified, @@ -152,85 +157,91 @@ const AccountReceive = (props: Props) => { const isAddressHidden = !isAddressVerifying && !addressVerified && !addressUnverified; return ( - - Receive Ethereum or tokens - - {((addressVerified || addressUnverified) && !isAddressVerifying) && ( - - {addressUnverified ? ( - + + + Receive Ethereum or tokens + + {isAddressVerifying && ( + Confirm address on TREZOR + )} + {((addressVerified || addressUnverified) && !isAddressVerifying) && ( + + {addressUnverified ? ( + Unverified address. - - {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'} - - ) : ( - - {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'} - - )} - - )} + + {device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'} + + ) : ( + + {device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'} + + )} + + )} + > + props.showAddress(account.addressPath)} + > + + + + )} + - + {isAddressVerifying && ( + + + + + Check address on your Trezor + + + )} + {(addressVerified || addressUnverified) && ( + + QR code + + + )} + {!(addressVerified || addressUnverified) && ( + props.showAddress(account.addressPath)} + isDisabled={device.connected && !discovery.completed} > - - - - )} - {address} - - {isAddressVerifying && ( - - - - - Check address on your Trezor - - - )} - {/* {isAddressVerifying && ( - {account.network} account #{account.index + 1} - )} */} - {(addressVerified || addressUnverified) && ( - - )} - {!(addressVerified || addressUnverified) && ( - props.showAddress(account.addressPath)} - isDisabled={device.connected && !discovery.completed} - > - Show full address - - )} - - + + )} + + + ); }; -export default AccountReceive; \ No newline at end of file +export default AccountReceive; diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index 7007d92d..0f1a726b 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -12,6 +12,7 @@ import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables'; import colors from 'config/colors'; import P from 'components/Paragraph'; import { H2 } from 'components/Heading'; +import Content from 'views/Wallet/components/Content'; import type { Token } from 'flowtype'; import AdvancedForm from './components/AdvancedForm'; import PendingTransactions from './components/PendingTransactions'; @@ -22,14 +23,6 @@ import type { Props } from './Container'; // and put it inside config/variables.js const SmallScreenWidth = '850px'; -const Wrapper = styled.section` - padding: 0 48px; -`; - -const StyledH2 = styled(H2)` - padding: 20px 0; -`; - const AmountInputLabelWrapper = styled.div` display: flex; justify-content: space-between; @@ -41,11 +34,11 @@ const AmountInputLabel = styled.span` `; const InputRow = styled.div` - margin-bottom: 10px; + margin: 20px 0; `; const SetMaxAmountButton = styled(Button)` - height: 34px; + height: 40px; padding: 0 10px; display: flex; align-items: center; @@ -83,7 +76,7 @@ const SetMaxAmountButton = styled(Button)` const CurrencySelect = styled(Select)` min-width: 77px; - height: 34px; + height: 40px; flex: 0.2; `; @@ -208,6 +201,7 @@ const AccountSend = (props: Props) => { sending, advanced, } = props.sendForm; + const { toggleAdvanced, onAddressChange, @@ -252,155 +246,157 @@ const AccountSend = (props: Props) => { const isAdvancedSettingsHidden = !advanced; return ( - - Send Ethereum or tokens - - onAddressChange(event.target.value)} - /> - - - - - Amount - {(isCurrentCurrencyToken && selectedToken) && ( - You have: {selectedTokenBalance} {selectedToken.symbol} - )} - - )} - value={amount} - onChange={event => onAmountChange(event.target.value)} - bottomText={errors.amount || warnings.amount || infos.amount} - sideAddons={[ - ( - onSetMax()} - isActive={setMax} - > - {!setMax && ( - - )} - {setMax && ( - + + + Send Ethereum or tokens + + onAddressChange(event.target.value)} + /> + + + + + Amount + {(isCurrentCurrencyToken && selectedToken) && ( + You have: {selectedTokenBalance} {selectedToken.symbol} )} + + )} + value={amount} + onChange={event => onAmountChange(event.target.value)} + bottomText={errors.amount || warnings.amount || infos.amount} + sideAddons={[ + ( + onSetMax()} + isActive={setMax} + > + {!setMax && ( + + )} + {setMax && ( + + )} Set max - - ), - ( - - ), - ]} - /> - - - - - Fee - {gasPriceNeedsUpdate && ( - - + + ), + ( + + ), + ]} + /> + + + + + Fee + {gasPriceNeedsUpdate && ( + + Recommended fees updated. Click here to use them - - )} - - ( - - {option.value} - {option.label} - - )} - /> - - - - - Advanced settings - + )} + + ( + + {option.value} + {option.label} + + )} /> - + - {isAdvancedSettingsHidden && ( - onSend()} + + - {sendButtonText} - + Advanced settings + + + + {isAdvancedSettingsHidden && ( + onSend()} + > + {sendButtonText} + + )} + + + {advanced && ( + + onSend()} + > + {sendButtonText} + + )} - - {advanced && ( - - onSend()} - > - {sendButtonText} - - - )} - - {props.selectedAccount.pending.length > 0 && ( - - )} - + {props.selectedAccount.pending.length > 0 && ( + + )} + + ); }; diff --git a/src/views/Wallet/views/AccountSignVerify/index.js b/src/views/Wallet/views/AccountSignVerify/index.js index 7935b1e6..d04e3b4f 100644 --- a/src/views/Wallet/views/AccountSignVerify/index.js +++ b/src/views/Wallet/views/AccountSignVerify/index.js @@ -1,5 +1,8 @@ import React from 'react'; import styled from 'styled-components'; +import Input from 'components/inputs/Input'; +import Textarea from 'components/Textarea'; +import Content from 'views/Wallet/components/Content'; import { H2 } from 'components/Heading'; import colors from 'config/colors'; @@ -9,7 +12,6 @@ const Wrapper = styled.div` flex: 1; flex-direction: row; background: ${colors.WHITE}; - padding: 50px; `; const StyledH2 = styled(H2)` @@ -33,34 +35,29 @@ const Label = styled.div` padding: 5px 0px; `; -const Textarea = styled.textarea` - resize: vertical; - width: 100%; -`; - -const Input = styled.input``; - const AccountSignVerify = () => ( - - - Sign message - Message - - Address - - Signature - - - - Verify message - Message - - Address - - Signature - - - + + + + Sign message + Message + + Address + + Signature + + + + Verify message + Message + + Address + + Signature + + + + ); export default AccountSignVerify; \ No newline at end of file diff --git a/src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js b/src/views/Wallet/views/AccountSummary/components/Balance/index.js similarity index 86% rename from src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js rename to src/views/Wallet/views/AccountSummary/components/Balance/index.js index 17384817..243b48d5 100644 --- a/src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js +++ b/src/views/Wallet/views/AccountSummary/components/Balance/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 { constructor(props: Props) { @@ -125,11 +141,11 @@ class AccountBalance extends Component { {this.props.balance} {selectedCoin.symbol} {fiatRate && ( - + Rate - ${fiatRateValue} + ${fiatRateValue} 1.00 {selectedCoin.symbol} - + )} )} diff --git a/src/views/Wallet/views/AccountSummary/components/AddedToken/index.js b/src/views/Wallet/views/AccountSummary/components/Token/index.js similarity index 96% rename from src/views/Wallet/views/AccountSummary/components/AddedToken/index.js rename to src/views/Wallet/views/AccountSummary/components/Token/index.js index 2ee663b3..7291b348 100644 --- a/src/views/Wallet/views/AccountSummary/components/AddedToken/index.js +++ b/src/views/Wallet/views/AccountSummary/components/Token/index.js @@ -11,7 +11,7 @@ import BigNumber from 'bignumber.js'; import PropTypes from 'prop-types'; const TokenWrapper = styled.div` - padding: 14px 48px; + padding: 14px 0; position: relative; display: flex; align-items: center; @@ -62,9 +62,7 @@ class AddedToken extends Component<> { const textColor = new ColorHash(); return ( - + { const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10); return ( - - - - - Account #{parseInt(account.index, 10) + 1} - - See full transaction history - - - - - - - Tokens - - - - - {/* 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} + + + + + + Account #{parseInt(account.index, 10) + 1} + + See full transaction history + + + - - - - {tokens.map(token => ( - + Tokens + + + + + {/* 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 => ( + + ))} + + + ); }; diff --git a/src/views/Wallet/views/Bootloader/index.js b/src/views/Wallet/views/Bootloader/index.js index 0f245f7a..c831887b 100644 --- a/src/views/Wallet/views/Bootloader/index.js +++ b/src/views/Wallet/views/Bootloader/index.js @@ -12,8 +12,6 @@ const Wrapper = styled.div` const Row = styled.div` flex: 1; display: flex; - padding: 0px 48px; - flex-direction: column; justify-content: center; align-items: center; diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js index 1c59f343..3fde163b 100644 --- a/src/views/Wallet/views/Dashboard/index.js +++ b/src/views/Wallet/views/Dashboard/index.js @@ -1,6 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { connect } from 'react-redux'; +import Content from 'views/Wallet/components/Content'; import { H2 } from 'components/Heading'; import DashboardImg from 'images/dashboard.png'; @@ -11,10 +12,6 @@ const Wrapper = styled.div` flex: 1; `; -const StyledH2 = styled(H2)` - padding: 24px 48px; -`; - const Row = styled.div` flex: 1; display: flex; @@ -31,14 +28,16 @@ const P = styled.p` `; const Dashboard = () => ( - - Dashboard - - Please select your coin - You will gain access to recieving & sending selected coin - - - + + + Dashboard + + Please select your coin + You will gain access to recieving & sending selected coin + + + + ); export default connect(null, null)(Dashboard); diff --git a/src/views/Wallet/views/DeviceSettings/index.js b/src/views/Wallet/views/DeviceSettings/index.js index 83eb1d47..b557c944 100644 --- a/src/views/Wallet/views/DeviceSettings/index.js +++ b/src/views/Wallet/views/DeviceSettings/index.js @@ -4,19 +4,17 @@ import { H2 } from 'components/Heading'; import Icon from 'components/Icon'; import colors from 'config/colors'; import Button from 'components/Button'; +import P from 'components/Paragraph'; +import Link from 'components/Link'; import ICONS from 'config/icons'; +import Content from 'views/Wallet/components/Content'; import { connect } from 'react-redux'; const Section = styled.section` -`; - -const P = styled.p` - padding: 12px 0px 24px 0px; - text-align: center; -`; - -const StyledH2 = styled(H2)` - padding-top: 15px; + display: flex; + justify-content: center; + align-items: center; + height: 100%; `; const Row = styled.div` @@ -25,25 +23,30 @@ const Row = styled.div` flex-direction: column; justify-content: center; align-items: center; - padding: 0px 48px; - padding-bottom: 98px; +`; + +const StyledP = styled(P)` + padding: 10px 0 15px 0; + text-align: center; `; const DeviceSettings = () => ( - - - - Device settings is under construction - Please use Bitcoin wallet interface to change your device settings - - Take me to the Bitcoin wallet - - - + + + + + Device settings is under construction + Please use Bitcoin wallet interface to change your device settings + + Take me to the Bitcoin wallet + + + + ); export default connect(null, null)(DeviceSettings); diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index 2ea20ad3..dead180e 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -1,13 +1,16 @@ import styled from 'styled-components'; import React from 'react'; import { connect } from 'react-redux'; +import Content from 'views/Wallet/components/Content'; const Wrapper = styled.div``; const WalletSettings = () => ( - - Wallet settings - + + + Wallet settings + + ); export default connect(null, null)(WalletSettings);
Please choose one of the supported browsers
Google Chrome
Mozzila Firefox
{textLeft}
{textRight}
{coin.name}
{option.value}
{option.label}
You will gain access to recieving & sending selected coin
Please use Bitcoin wallet interface to change your device settings