diff --git a/src/js/components/wallet/aside/AsideRow.js b/src/js/components/wallet/aside/AsideRow.js index 4343ddea..45a18db4 100644 --- a/src/js/components/wallet/aside/AsideRow.js +++ b/src/js/components/wallet/aside/AsideRow.js @@ -1,30 +1,39 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import React from 'react'; +import PropTypes from 'prop-types'; import colors from 'config/colors'; -import { FONT_SIZE, TRANSITION_TIME } from 'config/variables'; +import { TRANSITION_TIME } from 'config/variables'; const Wrapper = styled.div` + padding: 16px 24px; + display: flex; + flex-direction: row; align-items: center; justify-content: space-between; - - padding: 16px 24px; + ${props => props.column && css` + flex-direction: column; + align-items: flex-start; + `} cursor: pointer; - font-size: ${FONT_SIZE.BASE}; - transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE}; - - &:hover { - background-color: ${colors.GRAY_LIGHT}; - } `; -const AsideRow = (props) => ( - - {props.children} +const AsideRow = ({ children, column }) => ( + {children} ); +AsideRow.propTypes = { + column: PropTypes.bool, +}; + +AsideRow.defaultProps = { + column: false, +} + export default AsideRow; diff --git a/src/js/components/wallet/aside/AsideRowCoin.js b/src/js/components/wallet/aside/AsideRowCoin.js new file mode 100644 index 00000000..33d072a9 --- /dev/null +++ b/src/js/components/wallet/aside/AsideRowCoin.js @@ -0,0 +1,24 @@ + +import styled from 'styled-components'; +import React from 'react'; +import colors from 'config/colors'; +import { FONT_SIZE } from 'config/variables'; + +const Wrapper = styled.div` + display: block; + height: 50px; + + font-size: ${FONT_SIZE.BASE}; + color: ${colors.TEXT_PRIMARY}; + &:hover { + background-color: ${colors.GRAY_LIGHT}; + } +`; + +const AsideRowCoin = ({ children }) => ( + + {children} + +); + +export default AsideRowCoin; diff --git a/src/js/components/wallet/aside/AsideRowCoinExternal.js b/src/js/components/wallet/aside/AsideRowCoinExternal.js index 2039e297..20e5cde4 100644 --- a/src/js/components/wallet/aside/AsideRowCoinExternal.js +++ b/src/js/components/wallet/aside/AsideRowCoinExternal.js @@ -4,29 +4,28 @@ import PropTypes from 'prop-types'; import Icon from 'components/common/Icon'; import AsideRow from './AsideRow'; +import AsideRowCoin from './AsideRowCoin'; import CoinName from './CoinName'; import ICONS from 'constants/icons'; import colors from 'config/colors'; import { coinProp } from './common'; -const A = styled.a` - display: block; -`; - const AsideRowCoinExternal = ({ coin, url }) => ( - - - - - - + + + + + + + + ); AsideRowCoinExternal.propTypes = { diff --git a/src/js/components/wallet/aside/AsideRowCoinWallet.js b/src/js/components/wallet/aside/AsideRowCoinWallet.js index 9a07a2cf..390fc39e 100644 --- a/src/js/components/wallet/aside/AsideRowCoinWallet.js +++ b/src/js/components/wallet/aside/AsideRowCoinWallet.js @@ -4,23 +4,23 @@ import PropTypes from 'prop-types'; import { NavLink } from 'react-router-dom'; import AsideRow from './AsideRow'; +import AsideRowCoin from './AsideRowCoin'; import CoinName from './CoinName'; +import colors from 'config/colors'; import { coinProp } from './common'; -const Wrapper = styled(NavLink)` - display: block; -`; - const AsideRowCoinWallet = ({ coin, url }) => ( - - - - - + + + + + + + ); AsideRowCoinWallet.propTypes = { diff --git a/src/js/components/wallet/aside/CoinName.js b/src/js/components/wallet/aside/CoinName.js index 15b119e2..22b5dbc3 100644 --- a/src/js/components/wallet/aside/CoinName.js +++ b/src/js/components/wallet/aside/CoinName.js @@ -9,10 +9,6 @@ const Wrapper = styled.div` display: flex; align-items: center; justify-content: space-between; - - p { - color: ${colors.TEXT_PRIMARY}; - } `; const Logo = styled.div`