diff --git a/src/js/config/variables.js b/src/js/config/variables.js index 754d18ca..17573f4f 100644 --- a/src/js/config/variables.js +++ b/src/js/config/variables.js @@ -15,3 +15,7 @@ export const ICON_SIZE = { export const BORDER_WIDTH = { SELECTED: '3px', }; + +export const LEFT_NAVIGATION_ROW = { + PADDING: '16px 24px', +}; diff --git a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index abb620d6..b701abaf 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -1,5 +1,5 @@ /* @flow */ -import React, { Component } from 'react'; +import React from 'react'; import BigNumber from 'bignumber.js'; import Icon from 'components/Icon'; import colors from 'config/colors'; @@ -13,7 +13,7 @@ import ICONS from 'config/icons'; import { NavLink } from 'react-router-dom'; import { findDeviceAccounts } from 'reducers/AccountsReducer'; import { - FONT_SIZE, BORDER_WIDTH, TRANSITION_TIME, + FONT_SIZE, BORDER_WIDTH, TRANSITION_TIME, LEFT_NAVIGATION_ROW, } from 'config/variables'; import type { Accounts } from 'flowtype'; @@ -30,83 +30,109 @@ const Text = styled.span` `; const RowAccountWrapper = styled.div` - height: 64px; - padding: 16px 0 16px 24px; + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: ${LEFT_NAVIGATION_ROW.PADDING}; font-size: ${FONT_SIZE.SMALL}; color: ${colors.TEXT_PRIMARY}; - border-top: 1px solid ${colors.DIVIDER}; + ${props => props.borderTop && css` + border-top: 1px solid ${colors.DIVIDER}; + `} + border-bottom: 1px solid ${colors.DIVIDER}; &:hover { background-color: ${colors.GRAY_LIGHT}; } ${props => props.isSelected && css` border-left: ${BORDER_WIDTH.SELECTED} solid ${colors.GREEN_PRIMARY}; background: ${colors.WHITE}; - &:hover { background-color: ${colors.WHITE}; } - - &:last-child { - border-bottom: 1px solid ${colors.DIVIDER}; - } `} `; const RowAccount = ({ - accountIndex, balance, isSelected = false, + accountIndex, balance, isSelected = false, borderTop = false, }) => ( - - + + Account #{accountIndex + 1} {balance ? ( {balance} ) : ( Loading... )} - - + + ); RowAccount.propTypes = { accountIndex: PropTypes.number.isRequired, balance: PropTypes.string, isSelected: PropTypes.bool, + borderTop: PropTypes.bool, }; -const AddAccountWrapper = styled.div` - position: relative; - padding: 8px 0 8px 20px; - cursor: pointer; - color: ${colors.TEXT_SECONDARY}; +const RowAddAccountWrapper = styled.div` + width: 100%; + padding: ${LEFT_NAVIGATION_ROW.PADDING}; display: flex; align-items: center; - + color: ${colors.TEXT_SECONDARY}; &:hover { - color: ${colors.TEXT_PRIMARY}; - transition: background-color ${TRANSITION_TIME.BASE} ease-in-out, color ${TRANSITION_TIME.BASE} ease-in-out, border-color ${TRANSITION_TIME.BASE} ease-in-out; + cursor: ${props => (props.disabled ? 'default' : 'pointer')}; + color: ${props => (props.disabled ? colors.TEXT_SECONDARY : colors.TEXT_PRIMARY)}; } - - ${props => props.disabled && css` - cursor: not-allowed; - &:hover { - color: ${colors.TEXT_SECONDARY}; - } - `} `; const AddAccountIconWrapper = styled.div` margin-right: 12px; `; +const RowAddAccount = (({ + disabled = false, onClick, onMouseEnter, onMouseLeave, onFocus, +}) => ( + + + + + + Add account + + +)); + +RowAddAccount.propTypes = { + disabled: PropTypes.bool, + onClick: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, + onFocus: PropTypes.func, +}; + const DiscoveryStatusWrapper = styled.div` - height: 64px; display: flex; flex-direction: column; - justify-content: space-evenly; + font-size: ${FONT_SIZE.SMALL}; - padding: 16px 28px 16px 30px; + padding: ${LEFT_NAVIGATION_ROW.PADDING}; white-space: nowrap; border-top: 1px solid ${colors.DIVIDER}; `; @@ -119,12 +145,28 @@ const DiscoveryStatusText = styled.div` text-overflow: ellipsis; `; +const RowDiscoveryStatus = (({ + instanceLabel, +}) => ( + + + Accounts could not be loaded + + {`Connect ${instanceLabel} device`} + + + +)); + +RowDiscoveryStatus.propTypes = { + instanceLabel: PropTypes.number.isRequired, +}; + const DiscoveryLoadingWrapper = styled.div` display: flex; - flex-direction: row; align-items: center; + padding: ${LEFT_NAVIGATION_ROW.PADDING}; font-size: ${FONT_SIZE.SMALL}; - padding: 8px 0 8px 22px; white-space: nowrap; color: ${colors.TEXT_SECONDARY}; `; @@ -133,27 +175,16 @@ const DiscoveryLoadingText = styled.span` margin-left: 14px; `; -// class AccountMenu extends Component { -// constructor(props: Props) { -// super(props); -// this.state = { -// selectedAccounts: null, -// selectedCoin: null, -// }; -// } - -// componentWillReceiveProps(nextProps) { - -// } - -// render() { -// return ( -//
-// Hello -//
-// ); -// } -// } +const RowDiscoveryLoading = (() => ( + + + + + Loading... + + + +)); const AccountMenu = (props: Props): ?React$Element => { const selected = props.wallet.selectedDevice; @@ -198,6 +229,7 @@ const AccountMenu = (props: Props): ?React$Element => { url={url} balance={balance} isSelected={urlAccountIndex === account.index} + borderTop={account.index === 0} /> ); @@ -214,6 +246,7 @@ const AccountMenu = (props: Props): ?React$Element => { accountIndex={0} url={url} isSelected + borderTop /> ); @@ -229,20 +262,7 @@ const AccountMenu = (props: Props): ?React$Element => { //if (selectedAccounts.length > 0 && selectedAccounts[selectedAccounts.length - 1]) const lastAccount = deviceAccounts[deviceAccounts.length - 1]; if (lastAccount && (new BigNumber(lastAccount.balance).greaterThan(0) || lastAccount.nonce > 0)) { - discoveryStatus = ( - - - - - Add account - - ); + discoveryStatus = ; } else { const tooltip = (
@@ -253,41 +273,17 @@ const AccountMenu = (props: Props): ?React$Element => { } overlay={tooltip} - placement="top" + placement="bottom" > - - - - - Add account - + ); } } else if (!selected.connected || !selected.available) { - discoveryStatus = ( - - Accounts could not be loaded - - {`Connect ${selected.instanceLabel} device`} - - - ); + discoveryStatus = ; } else { discoveryStatus = ( - - - - Loading accounts... - - + ); } } diff --git a/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js b/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js index c0f27b06..403490e3 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js @@ -6,21 +6,27 @@ import { TRANSITION_TIME } from 'config/variables'; const Wrapper = styled.div` height: 100%; + width: 100%; display: flex; - flex-direction: row; align-items: center; justify-content: space-between; - cursor: pointer; - transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE}; + transition: background-color ${TRANSITION_TIME.BASE} ease-in-out, color ${TRANSITION_TIME.BASE} ease-in-out, border-color ${TRANSITION_TIME.BASE} ease-in-out; - ${props => props.column && css` - flex-direction: column; - align-items: flex-start; + ${props => props.disabled && css` + cursor: not-allowed; `} `; -const Row = ({ children, column = false }) => ( - +const Row = ({ + children, disabled = false, onClick, onMouseEnter, onMouseLeave, onFocus, +}) => ( + {children} ); @@ -30,7 +36,11 @@ Row.propTypes = { PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]), - column: PropTypes.bool, + disabled: PropTypes.bool, + onClick: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, + onFocus: PropTypes.func, }; export default Row; diff --git a/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js b/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js index 71d0f7ac..e02eb165 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import Icon from 'components/Icon'; -import { ICON_SIZE, FONT_SIZE } from 'config/variables'; +import { ICON_SIZE, FONT_SIZE, LEFT_NAVIGATION_ROW } from 'config/variables'; import colors from 'config/colors'; import Row from '../Row'; @@ -23,7 +23,7 @@ const Logo = styled.div` `; const RowCoinWrapper = styled.div` - padding: 16px 24px; + padding: ${LEFT_NAVIGATION_ROW.PADDING}; height: 50px; display: block; font-size: ${FONT_SIZE.BASE};