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