arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-26 00:48:35 +00:00
Code Issues Releases Wiki Activity

Move 'CoinName' component inside 'RowCoin'

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-17 13:08:42 +02:00
parent 5eebb76e27
commit 95fb87d17f
3 changed files with 22 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
View File

@ -19,7 +19,7 @@ import Row from '../Row';
import RowCoin from '../RowCoin'; import RowCoin from '../RowCoin';
const Wrapper = style.div``; const Wrapper = styled.div``;
const Text = styled.span` const Text = styled.span`
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALLER};

35
src/js/views/Wallet/components/LeftNavigation/components/RowCoin/components/CoinName/index.js
View File

@ -1,35 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components';
import { ICON_SIZE } from 'config/variables';
const CoinNameWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;
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 CoinName = ({
coinImg, text,
}) => (
<CoinNameWrapper>
{coinImg && <Logo coinImg={coinImg} />}
<p>{text}</p>
</CoinNameWrapper>
);
CoinName.propTypes = {
coinImg: PropTypes.string,
text: PropTypes.string.isRequired,
};
export default CoinName;

27
src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
View File

@ -2,10 +2,25 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import { FONT_SIZE } from 'config/variables'; import { ICON_SIZE, FONT_SIZE } from 'config/variables';
import colors from 'config/colors'; import colors from 'config/colors';
import Row from '../Row'; import Row from '../Row';
import CoinName from './components/CoinName';
const CoinNameWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;
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 RowCoinWrapper = styled.div` const RowCoinWrapper = styled.div`
padding: 16px 24px; padding: 16px 24px;
@ -43,10 +58,10 @@ const RowCoin = ({
/> />
</IconWrapper> </IconWrapper>
)} )}
<CoinName <CoinNameWrapper>
coinImg={coin.img} <Logo coinImg={coin.img} />
text={coin.name} <p>{coin.name}</p>
/> </CoinNameWrapper>
</Left> </Left>
{iconRight && ( {iconRight && (
<Icon <Icon