diff --git a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx b/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx index eb4edc32df..464164b3f6 100644 --- a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx +++ b/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx @@ -9,6 +9,8 @@ import { SortButton } from '../SortButton' import { sortTokens } from './sortTokens' import { TokenListItem } from './TokenListItem' +export const COLUMN_GAPS = '250px 180px 150px 180px' + export const InvestedTokens = () => { const { search } = useLocation() @@ -45,7 +47,7 @@ export const InvestedTokens = () => { - + Token diff --git a/centrifuge-app/src/components/Portfolio/TokenListItem.tsx b/centrifuge-app/src/components/Portfolio/TokenListItem.tsx index 271bc96f0b..6903b388c9 100644 --- a/centrifuge-app/src/components/Portfolio/TokenListItem.tsx +++ b/centrifuge-app/src/components/Portfolio/TokenListItem.tsx @@ -12,13 +12,18 @@ import { Text, Thumbnail, } from '@centrifuge/fabric' -import { useTheme } from 'styled-components' +import styled, { useTheme } from 'styled-components' import { usePool } from '../../utils/usePools' import { Eththumbnail } from '../EthThumbnail' import { Root } from '../ListItemCardStyles' +import { COLUMN_GAPS } from './InvestedTokens' export type TokenCardProps = AccountTokenBalance +const TokenName = styled(Text)` + text-wrap: nowrap; +` + export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCardProps) { const { sizes } = useTheme() const pool = usePool(poolId, false) @@ -29,8 +34,8 @@ export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCar const icon = (trancheInfo?.poolMetadata as PoolMetadata).tranches?.[trancheId].icon?.uri return ( - - + + {icon ? ( @@ -40,9 +45,9 @@ export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCar )} - + {currency.name} - +