Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Wallet/TokenListItem.js
Show All 13 Lines | const BalanceAndTicker = styled.div` | ||||
font-size: 1rem; | font-size: 1rem; | ||||
`; | `; | ||||
const Wrapper = styled.div` | const Wrapper = styled.div` | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
align-items: center; | align-items: center; | ||||
padding: 15px 25px; | padding: 15px 25px; | ||||
border-radius: 3px; | border-radius: 16px; | ||||
background: ${props => props.theme.tokenListItem.background}; | background: ${props => props.theme.tokenListItem.background}; | ||||
margin-bottom: 3px; | margin-bottom: 10px; | ||||
box-shadow: ${props => props.theme.tokenListItem.boxShadow}; | box-shadow: ${props => props.theme.tokenListItem.boxShadow}; | ||||
border: 1px solid ${props => props.theme.tokenListItem.border}; | border: 1px solid ${props => props.theme.tokenListItem.border}; | ||||
:hover { | :hover { | ||||
border-color: ${props => props.theme.tokenListItem.hoverBorder}; | transform: translateY(-2px); | ||||
box-shadow: rgb(136 172 243 / 25%) 0px 10px 30px, | |||||
rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px; | |||||
transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; | |||||
} | } | ||||
`; | `; | ||||
const TokenListItem = ({ ticker, balance, tokenId }) => { | const TokenListItem = ({ ticker, balance, tokenId }) => { | ||||
return ( | return ( | ||||
<Wrapper> | <Wrapper> | ||||
<TokenIcon> | <TokenIcon> | ||||
{currency.tokenIconsUrl !== '' ? ( | {currency.tokenIconsUrl !== '' ? ( | ||||
▲ Show 20 Lines • Show All 44 Lines • Show Last 20 Lines |