fix: disabled treatment for unlisted collection page card + tooltip styling fixes (#5507)

init
This commit is contained in:
lynn 2022-12-01 16:56:59 -05:00 committed by GitHub
parent 3be5e9b5fe
commit e903a335d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 9 deletions

@ -2,6 +2,7 @@ import { BigNumber } from '@ethersproject/bignumber'
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics' import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
import { EventName, PageName } from '@uniswap/analytics-events' import { EventName, PageName } from '@uniswap/analytics-events'
import { MouseoverTooltip } from 'components/Tooltip'
import Tooltip from 'components/Tooltip' import Tooltip from 'components/Tooltip'
import { Box } from 'nft/components/Box' import { Box } from 'nft/components/Box'
import { bodySmall } from 'nft/css/common.css' import { bodySmall } from 'nft/css/common.css'
@ -120,7 +121,7 @@ export const CollectionAsset = ({
addAssetToBag={handleAddAssetToBag} addAssetToBag={handleAddAssetToBag}
removeAssetFromBag={handleRemoveAssetFromBag} removeAssetFromBag={handleRemoveAssetFromBag}
> >
<Card.ImageContainer> <Card.ImageContainer isDisabled={asset.notForSale}>
<StyledContainer> <StyledContainer>
<Tooltip <Tooltip
text={ text={
@ -145,13 +146,28 @@ export const CollectionAsset = ({
rarityLogo={rarityLogo} rarityLogo={rarityLogo}
/> />
)} )}
{assetMediaType === AssetMediaType.Image ? ( <MouseoverTooltip
<Card.Image /> text={
) : assetMediaType === AssetMediaType.Video ? ( <Box as="span" className={bodySmall} color="textPrimary">
<Card.Video shouldPlay={mediaShouldBePlaying} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} /> <Trans>This item is not for sale</Trans>
) : ( </Box>
<Card.Audio shouldPlay={mediaShouldBePlaying} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} /> }
)} placement="bottom"
offsetX={0}
offsetY={-50}
style={{ display: 'block' }}
hideArrow={true}
disableHover={!asset.notForSale}
timeout={isMobile ? TOOLTIP_TIMEOUT : undefined}
>
{assetMediaType === AssetMediaType.Image ? (
<Card.Image />
) : assetMediaType === AssetMediaType.Video ? (
<Card.Video shouldPlay={mediaShouldBePlaying} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} />
) : (
<Card.Audio shouldPlay={mediaShouldBePlaying} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} />
)}
</MouseoverTooltip>
</Card.ImageContainer> </Card.ImageContainer>
<Card.DetailsContainer> <Card.DetailsContainer>
<Card.InfoContainer> <Card.InfoContainer>

@ -126,7 +126,8 @@ export const ViewMyNftsAsset = ({
text={getUnsupportedNftTextComponent(asset)} text={getUnsupportedNftTextComponent(asset)}
placement="bottom" placement="bottom"
offsetX={0} offsetX={0}
offsetY={-100} offsetY={-60}
hideArrow={true}
style={{ display: 'block' }} style={{ display: 'block' }}
disableHover={!isDisabled} disableHover={!isDisabled}
timeout={isMobile ? TOOLTIP_TIMEOUT : undefined} timeout={isMobile ? TOOLTIP_TIMEOUT : undefined}