same height icons, center with flexbox

pull/458/head
slowbackspace 5 years ago
parent 5fb9656f2b
commit 56a14f0aa7

@ -5,35 +5,22 @@ import PropTypes from 'prop-types';
const Wrapper = styled.div` const Wrapper = styled.div`
padding-right: 20px; padding-right: 20px;
width: 40px; width: 40px;
display: flex;
justify-content: center;
`; `;
const Logo = styled.img` const Logo = styled.img`
width: ${props => (props.hasLongIcon ? '15px' : '23px')}; height: 23px;
margin-left: ${props => (props.hasLongIcon ? '3px' : '0px')};
display: block; display: block;
`; `;
class CoinLogo extends PureComponent { class CoinLogo extends PureComponent {
constructor() {
super();
this.longIcons = ['etc', 'eth', 'trop'];
}
hasLongIcon(network) {
let hasLongIcon = false;
if (this.longIcons.includes(network)) {
hasLongIcon = true;
}
return hasLongIcon;
}
render() { render() {
const { network, className, standalone } = this.props; const { network, className, standalone } = this.props;
const logo = ( const logo = (
<Logo <Logo
className={className} className={className}
hasLongIcon={this.hasLongIcon(network)}
src={require(`images/coins/${network}.png`)} // eslint-disable-line src={require(`images/coins/${network}.png`)} // eslint-disable-line
/> />
); );

Loading…
Cancel
Save