mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-24 09:18:09 +00:00
Style RowAccount & add selection
This commit is contained in:
parent
f534e76f64
commit
18425310de
@ -1,5 +1,5 @@
|
||||
/* @flow */
|
||||
import React, { components } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import BigNumber from 'bignumber.js';
|
||||
import colors from 'config/colors';
|
||||
import Loader from 'components/LoaderCircle';
|
||||
@ -26,12 +26,13 @@ const Text = styled.span`
|
||||
|
||||
const RowAccountWrapper = styled.div`
|
||||
height: 64px;
|
||||
|
||||
padding: 16px 0 16px 24px;
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
|
||||
border-top: 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};
|
||||
@ -47,27 +48,24 @@ const RowAccountWrapper = styled.div`
|
||||
`;
|
||||
|
||||
const RowAccount = ({
|
||||
accountIndex, balance, url, isSelected = false,
|
||||
accountIndex, balance, isSelected = false,
|
||||
}) => (
|
||||
<NavLink to={url}>
|
||||
<RowAccountWrapper
|
||||
to={url}
|
||||
isSelected={isSelected}
|
||||
>
|
||||
<Row column>
|
||||
Account #{accountIndex + 1}
|
||||
{balance ? (
|
||||
<Text>{balance}</Text>
|
||||
) : (
|
||||
<Text>Loading...</Text>
|
||||
)}
|
||||
</Row>
|
||||
</RowAccountWrapper>
|
||||
</NavLink>
|
||||
<RowAccountWrapper
|
||||
isSelected={isSelected}
|
||||
>
|
||||
<Row column>
|
||||
Account #{accountIndex + 1}
|
||||
{balance ? (
|
||||
<Text>{balance}</Text>
|
||||
) : (
|
||||
<Text>Loading...</Text>
|
||||
)}
|
||||
</Row>
|
||||
</RowAccountWrapper>
|
||||
);
|
||||
|
||||
RowAccount.propTypes = {
|
||||
accountIndex: PropTypes.number.isRequired,
|
||||
url: PropTypes.string.isRequired,
|
||||
balance: PropTypes.string,
|
||||
isSelected: PropTypes.bool,
|
||||
};
|
||||
@ -104,18 +102,19 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
|
||||
}
|
||||
}
|
||||
|
||||
const urlAccountIndex = parseInt(props.location.state.account);
|
||||
return (
|
||||
<RowAccount
|
||||
<NavLink
|
||||
to={url}
|
||||
key={account.index}
|
||||
accountIndex={account.index}
|
||||
balance={balance}
|
||||
url={url}
|
||||
/>
|
||||
|
||||
// <NavLink key={i} activeClassName="selected" className="account" to={url}>
|
||||
// { `Account #${(account.index + 1)}` }
|
||||
// <span>{ account.loaded ? balance : 'Loading...' }</span>
|
||||
// </NavLink>
|
||||
>
|
||||
<RowAccount
|
||||
accountIndex={account.index}
|
||||
url={url}
|
||||
balance={balance}
|
||||
isSelected={urlAccountIndex === account.index}
|
||||
/>
|
||||
</NavLink>
|
||||
);
|
||||
});
|
||||
|
||||
@ -123,15 +122,15 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
|
||||
if (selected.connected) {
|
||||
const url: string = location.pathname.replace(/account+\/([0-9]*)/, 'account/0');
|
||||
selectedAccounts = (
|
||||
<RowAccount
|
||||
accountIndex={0}
|
||||
url={url}
|
||||
/>
|
||||
|
||||
// <NavLink activeClassName="selected" className="account" to={url}>
|
||||
// Account #1
|
||||
// <span>Loading...</span>
|
||||
// </NavLink>
|
||||
<NavLink
|
||||
to={url}
|
||||
>
|
||||
<RowAccount
|
||||
accountIndex={0}
|
||||
url={url}
|
||||
isSelected
|
||||
/>
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -376,37 +376,37 @@ aside {
|
||||
// }
|
||||
// }
|
||||
|
||||
&.back {
|
||||
padding-left: 80px;
|
||||
// &.back {
|
||||
// padding-left: 80px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 56px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin: auto 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: auto 20px;
|
||||
}
|
||||
// &:before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// display: block;
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// left: 56px;
|
||||
// top: 0px;
|
||||
// bottom: 0px;
|
||||
// margin: auto 0;
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: center;
|
||||
// background-size: auto 20px;
|
||||
// }
|
||||
|
||||
&:after {
|
||||
.icomoon-arrow-left;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 24px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin: auto 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
// &:after {
|
||||
// .icomoon-arrow-left;
|
||||
// position: absolute;
|
||||
// display: block;
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// left: 24px;
|
||||
// top: 0px;
|
||||
// bottom: 0px;
|
||||
// margin: auto 0;
|
||||
// font-size: 20px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.ethereum:before,
|
||||
// &.ethereum-classic:before,
|
||||
@ -465,15 +465,15 @@ aside {
|
||||
// }
|
||||
// }
|
||||
|
||||
.device-divider {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: @color_text_secondary;
|
||||
background: @color_gray_light;
|
||||
padding: 8px 28px 8px 24px;
|
||||
border-bottom: 1px solid @color_divider;
|
||||
}
|
||||
// .device-divider {
|
||||
// font-size: 12px;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// color: @color_text_secondary;
|
||||
// background: @color_gray_light;
|
||||
// padding: 8px 28px 8px 24px;
|
||||
// border-bottom: 1px solid @color_divider;
|
||||
// }
|
||||
|
||||
.help {
|
||||
width: 319px; // - 1px border-roght; 320px;
|
||||
|
Loading…
Reference in New Issue
Block a user