1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00

Add folder structure

This commit is contained in:
Vasek Mlejnsky 2018-08-16 11:27:30 +02:00
parent 779bb84c01
commit 82c215dc81
3 changed files with 14 additions and 11 deletions

View File

@ -7,6 +7,7 @@ import { TRANSITION_TIME } from 'config/variables';
const Wrapper = styled.div` const Wrapper = styled.div`
padding: 16px 24px; padding: 16px 24px;
height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -29,6 +30,10 @@ const AsideRow = ({ children, column = false }) => (
); );
AsideRow.propTypes = { AsideRow.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
column: PropTypes.bool, column: PropTypes.bool,
}; };

View File

@ -3,14 +3,16 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import AsideRow from './AsideRow'; import AsideRow from '../AsideRow';
import colors from 'config/colors'; import colors from 'config/colors';
import { FONT_SIZE, BORDER_WIDTH } from 'config/variables'; import { FONT_SIZE, BORDER_WIDTH } from 'config/variables';
const Wrapper = styled.div` const Wrapper = styled.div`
height: 64px; height: 64px;
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
color: ${colors.TEXT_PRIMARY};
border-top: 1px solid ${colors.DIVIDER}; border-top: 1px solid ${colors.DIVIDER};
span { span {
@ -18,7 +20,7 @@ const Wrapper = styled.div`
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
} }
${props => props.selected && css` ${props => props.isSelected && css`
border-left: ${BORDER_WIDTH.SELECTED} solid ${colors.GREEN_PRIMARY}; border-left: ${BORDER_WIDTH.SELECTED} solid ${colors.GREEN_PRIMARY};
background: ${colors.WHITE}; background: ${colors.WHITE};
@ -32,11 +34,11 @@ const Wrapper = styled.div`
`} `}
`; `;
const AsideRowAccount = ({ accountIndex, balance, url, selected }) => ( const AsideRowAccount = ({ accountIndex, balance, url, isSelected = false }) => (
<NavLink to={url}> <NavLink to={url}>
<Wrapper <Wrapper
to={url} to={url}
selected={selected} isSelected={isSelected}
> >
<AsideRow column> <AsideRow column>
Account #{accountIndex + 1} Account #{accountIndex + 1}
@ -52,13 +54,9 @@ const AsideRowAccount = ({ accountIndex, balance, url, selected }) => (
AsideRowAccount.propTypes = { AsideRowAccount.propTypes = {
accountIndex: PropTypes.number.isRequired, accountIndex: PropTypes.number.isRequired,
balance: PropTypes.string,
url: PropTypes.string.isRequired, url: PropTypes.string.isRequired,
selected: PropTypes.bool, balance: PropTypes.string,
}; isSelected: PropTypes.bool,
AsideRowAccount.defaultProps = {
selected: true,
}; };
export default AsideRowAccount; export default AsideRowAccount;

View File

@ -19,7 +19,7 @@ const Logo = styled.div`
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: auto ${ICON_SIZE.BASE}; background-size: auto ${ICON_SIZE.BASE};
background-image: url('images/${props => props.coinImg}-logo.png'); background-image: url('${props => props.coinImg}');
`; `;
const CoinName = ({ coinImg, text }) => ( const CoinName = ({ coinImg, text }) => (