arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 00:18:07 +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';
const Wrapper = style.div``;
const Wrapper = styled.div``;
const Text = styled.span`
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 styled from 'styled-components';
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 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`
padding: 16px 24px;
@ -43,10 +58,10 @@ const RowCoin = ({
/>
</IconWrapper>
)}
<CoinName
coinImg={coin.img}
text={coin.name}
/>
<CoinNameWrapper>
<Logo coinImg={coin.img} />
<p>{coin.name}</p>
</CoinNameWrapper>
</Left>
{iconRight && (
<Icon