refactor: remove unused nft css (#5241)
* refactor: remove unused nft css * unused * unused
This commit is contained in:
vignesh mohankumar
GitHub
parent
78b6ef60ac
commit
ef9a59a96b
@ -17,22 +17,6 @@ export const footer = style([
|
||||
}),
|
||||
])
|
||||
|
||||
export const warningContainer = style([
|
||||
sprinkles({
|
||||
paddingY: '12',
|
||||
borderTopLeftRadius: '12',
|
||||
borderTopRightRadius: '12',
|
||||
justifyContent: 'center',
|
||||
fontSize: '12',
|
||||
fontWeight: 'semibold',
|
||||
}),
|
||||
{
|
||||
color: '#EEB317',
|
||||
background: '#EEB3173D',
|
||||
lineHeight: '12px',
|
||||
},
|
||||
])
|
||||
|
||||
export const payButton = style([
|
||||
body,
|
||||
sprinkles({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { style } from '@vanilla-extract/css'
|
||||
import { bodySmall } from 'nft/css/common.css'
|
||||
import { sprinkles, themeVars, vars } from 'nft/css/sprinkles.css'
|
||||
import { sprinkles, themeVars } from 'nft/css/sprinkles.css'
|
||||
|
||||
export const bagRow = style([
|
||||
sprinkles({
|
||||
@ -57,61 +57,6 @@ export const priceChangeRow = style([
|
||||
}),
|
||||
])
|
||||
|
||||
export const unavailableAssetRow = style([
|
||||
sprinkles({
|
||||
gap: '12',
|
||||
color: 'textPrimary',
|
||||
paddingX: '12',
|
||||
paddingY: '4',
|
||||
}),
|
||||
{
|
||||
':hover': {
|
||||
background: themeVars.colors.backgroundInteractive,
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
export const priceChangeButton = style([
|
||||
bodySmall,
|
||||
sprinkles({
|
||||
width: 'full',
|
||||
paddingY: '8',
|
||||
color: 'explicitWhite',
|
||||
fontWeight: 'semibold',
|
||||
textAlign: 'center',
|
||||
borderRadius: '12',
|
||||
}),
|
||||
{
|
||||
':hover': {
|
||||
color: themeVars.colors.textTertiary,
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
export const keepButton = style([
|
||||
priceChangeButton,
|
||||
sprinkles({
|
||||
backgroundColor: 'blue400',
|
||||
}),
|
||||
{
|
||||
':hover': {
|
||||
background: `linear-gradient(rgba(76, 130, 251, 0.24), rgba(76, 130, 251, .24)), linear-gradient(${vars.color.blue400}, ${vars.color.blue400})`,
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
export const removeButton = style([
|
||||
priceChangeButton,
|
||||
sprinkles({
|
||||
backgroundColor: 'backgroundInteractive',
|
||||
}),
|
||||
{
|
||||
':hover': {
|
||||
background: `linear-gradient(rgba(76, 130, 251, 0.24), rgba(76, 130, 251, .24)), linear-gradient(${vars.color.backgroundInteractive}, ${vars.color.backgroundInteractive})`,
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
export const bagRowImage = sprinkles({
|
||||
width: '56',
|
||||
height: '56',
|
||||
@ -123,15 +68,6 @@ export const grayscaleImage = style({
|
||||
filter: 'grayscale(100%)',
|
||||
})
|
||||
|
||||
export const unavailableImage = style([
|
||||
grayscaleImage,
|
||||
sprinkles({
|
||||
width: '44',
|
||||
height: '44',
|
||||
borderRadius: '8',
|
||||
}),
|
||||
])
|
||||
|
||||
export const bagRowPrice = style([
|
||||
sprinkles({
|
||||
gap: '4',
|
||||
@ -171,21 +107,6 @@ export const icon = sprinkles({
|
||||
flexShrink: '0',
|
||||
})
|
||||
|
||||
export const previewImageGrid = style([
|
||||
sprinkles({
|
||||
display: 'grid',
|
||||
}),
|
||||
{
|
||||
gridTemplateColumns: 'repeat(5, 13px)',
|
||||
},
|
||||
])
|
||||
|
||||
export const toolTip = sprinkles({
|
||||
color: 'textSecondary',
|
||||
display: 'flex',
|
||||
flexShrink: '0',
|
||||
})
|
||||
|
||||
export const removeAssetOverlay = style([
|
||||
sprinkles({
|
||||
position: 'absolute',
|
||||
|
||||
@ -191,10 +191,6 @@ export const marketplaceIcon = style([
|
||||
}),
|
||||
])
|
||||
|
||||
export const ensNameContainer = sprinkles({
|
||||
width: 'max',
|
||||
})
|
||||
|
||||
export const rarityInfo = style([
|
||||
sprinkles({
|
||||
display: 'flex',
|
||||
|
||||
@ -86,62 +86,6 @@ export const marketplaceIcon = style([
|
||||
},
|
||||
])
|
||||
|
||||
export const erc1155ButtonRow = sprinkles({
|
||||
flexShrink: '0',
|
||||
gap: '12',
|
||||
marginTop: { sm: '8', md: '10' },
|
||||
marginBottom: '12',
|
||||
})
|
||||
|
||||
export const erc1155QuantityText = style([
|
||||
sprinkles({
|
||||
color: 'textPrimary',
|
||||
}),
|
||||
{
|
||||
lineHeight: '20px',
|
||||
userSelect: 'none',
|
||||
},
|
||||
])
|
||||
|
||||
export const erc1155Button = sprinkles({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'accentActionSoft',
|
||||
textAlign: 'center',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
borderRadius: 'round',
|
||||
cursor: 'pointer',
|
||||
padding: '0',
|
||||
transition: '250',
|
||||
})
|
||||
|
||||
export const erc1155PlusButton = style([
|
||||
erc1155Button,
|
||||
sprinkles({
|
||||
color: 'backgroundSurface',
|
||||
}),
|
||||
{
|
||||
':hover': {
|
||||
backgroundColor: themeVars.colors.accentAction,
|
||||
color: themeVars.colors.textPrimary,
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
export const erc1155MinusButton = style([
|
||||
erc1155Button,
|
||||
sprinkles({
|
||||
color: 'accentFailure',
|
||||
}),
|
||||
{
|
||||
':hover': {
|
||||
backgroundColor: themeVars.colors.accentFailure,
|
||||
color: themeVars.colors.textPrimary,
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
export const rarityInfo = style([
|
||||
sprinkles({
|
||||
display: 'flex',
|
||||
|
||||
@ -1,32 +1,6 @@
|
||||
import { style } from '@vanilla-extract/css'
|
||||
|
||||
import { sprinkles, vars } from '../../css/sprinkles.css'
|
||||
|
||||
export const assetInnerStyle = style([
|
||||
sprinkles({
|
||||
borderRadius: '20',
|
||||
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
}),
|
||||
{
|
||||
border: `4px solid ${vars.color.backgroundSurface}`,
|
||||
},
|
||||
])
|
||||
|
||||
export const hoverAsset = style({
|
||||
border: `4px solid ${vars.color.genieBlue}`,
|
||||
boxShadow: '0 4px 16px rgba(70,115,250,0.4)',
|
||||
})
|
||||
|
||||
export const assetSelected = style([
|
||||
sprinkles({
|
||||
borderRadius: '20',
|
||||
}),
|
||||
{
|
||||
border: `4px solid ${vars.color.genieBlue}`,
|
||||
},
|
||||
])
|
||||
import { sprinkles } from '../../css/sprinkles.css'
|
||||
|
||||
export const buy = style([
|
||||
{
|
||||
@ -37,74 +11,6 @@ export const buy = style([
|
||||
sprinkles({ color: 'backgroundSurface', position: 'absolute', borderRadius: 'round' }),
|
||||
])
|
||||
|
||||
export const tokenQuantityHovered = style([
|
||||
{
|
||||
border: `4px solid ${vars.color.backgroundSurface}`,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
sprinkles({
|
||||
backgroundColor: 'genieBlue',
|
||||
borderRadius: 'round',
|
||||
}),
|
||||
])
|
||||
|
||||
export const tokenQuantity = style([
|
||||
{
|
||||
padding: '10px 17px',
|
||||
border: `4px solid ${vars.color.backgroundSurface}`,
|
||||
},
|
||||
sprinkles({
|
||||
color: 'genieBlue',
|
||||
backgroundColor: 'backgroundSurface',
|
||||
borderRadius: 'round',
|
||||
textAlign: 'center',
|
||||
}),
|
||||
])
|
||||
|
||||
export const plusIcon = style([
|
||||
{
|
||||
padding: '10px',
|
||||
border: `4px solid ${vars.color.backgroundSurface}`,
|
||||
},
|
||||
sprinkles({
|
||||
width: '28',
|
||||
backgroundColor: 'genieBlue',
|
||||
borderRadius: 'round',
|
||||
}),
|
||||
])
|
||||
|
||||
export const bagIcon = style([
|
||||
{
|
||||
width: '42px',
|
||||
padding: '9px',
|
||||
},
|
||||
sprinkles({
|
||||
borderRadius: 'round',
|
||||
backgroundColor: 'backgroundSurface',
|
||||
}),
|
||||
])
|
||||
|
||||
export const minusIcon = style([
|
||||
{
|
||||
width: '11px',
|
||||
padding: '19px 14px 8px 16px',
|
||||
},
|
||||
sprinkles({
|
||||
position: 'relative',
|
||||
}),
|
||||
])
|
||||
|
||||
export const plusQuantityIcon = style([
|
||||
{
|
||||
width: '12px',
|
||||
padding: '11px 16px 8px 12px',
|
||||
},
|
||||
sprinkles({
|
||||
position: 'relative',
|
||||
}),
|
||||
])
|
||||
|
||||
export const quantity = style([
|
||||
{
|
||||
padding: '9px 4px 8px',
|
||||
@ -122,21 +28,9 @@ export const marketplace = style({
|
||||
bottom: '12px',
|
||||
})
|
||||
|
||||
export const placeholderImage = style({ width: '50%', padding: '25%' })
|
||||
export const ethIcon = style({ display: 'inline-block', marginBottom: '-3px', overflow: 'auto' })
|
||||
|
||||
export const rarityInfo = style({
|
||||
background: 'rgba(255, 255, 255, 0.6)',
|
||||
backdropFilter: 'blur(6px)',
|
||||
})
|
||||
|
||||
export const iconToolTip = style([
|
||||
sprinkles({
|
||||
display: 'inline-block',
|
||||
overflow: 'auto',
|
||||
marginRight: '4',
|
||||
}),
|
||||
{
|
||||
marginBottom: '-3px',
|
||||
},
|
||||
])
|
||||
|
||||
@ -4,7 +4,6 @@ import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
|
||||
import { useWeb3React } from '@web3-react/core'
|
||||
import clsx from 'clsx'
|
||||
import { OpacityHoverState } from 'components/Common'
|
||||
import { loadingAnimation } from 'components/Loader/styled'
|
||||
import { parseEther } from 'ethers/lib/utils'
|
||||
import { NftAssetTraitInput, NftMarketplace } from 'graphql/data/nft/__generated__/AssetQuery.graphql'
|
||||
import {
|
||||
@ -139,22 +138,6 @@ const SweepText = styled(ThemedText.BodyPrimary)`
|
||||
}
|
||||
`
|
||||
|
||||
export const LoadingButton = styled.div`
|
||||
border-radius: 12px;
|
||||
height: 44px;
|
||||
width: 114px;
|
||||
animation: ${loadingAnimation} 1.5s infinite;
|
||||
animation-fill-mode: both;
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
${({ theme }) => theme.backgroundInteractive} 25%,
|
||||
${({ theme }) => theme.backgroundOutline} 50%,
|
||||
${({ theme }) => theme.backgroundInteractive} 75%
|
||||
);
|
||||
will-change: background-position;
|
||||
background-size: 400%;
|
||||
`
|
||||
|
||||
const MarketNameWrapper = styled(Row)`
|
||||
gap: 8px;
|
||||
`
|
||||
|
||||
@ -18,12 +18,6 @@ export const statsText = style([
|
||||
},
|
||||
])
|
||||
|
||||
export const smallStatsText = style({
|
||||
marginLeft: '84px',
|
||||
})
|
||||
|
||||
export const statsRowItem = sprinkles({ paddingRight: '12' })
|
||||
|
||||
export const baseCollectionImage = sprinkles({
|
||||
left: '0',
|
||||
borderStyle: 'solid',
|
||||
|
||||
@ -12,17 +12,6 @@ export const filterButtonExpanded = style({
|
||||
color: themeVars.colors.textPrimary,
|
||||
})
|
||||
|
||||
export const filterBadge = style([
|
||||
sprinkles({
|
||||
position: 'absolute',
|
||||
left: '18',
|
||||
fontSize: '28',
|
||||
}),
|
||||
{
|
||||
top: '-3px',
|
||||
},
|
||||
])
|
||||
|
||||
export const filterButtonLoading = style([
|
||||
loadingAsset,
|
||||
sprinkles({
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css'
|
||||
import { center } from 'nft/css/common.css'
|
||||
import { sprinkles, themeVars, vars } from 'nft/css/sprinkles.css'
|
||||
|
||||
export const modalContainer = style([
|
||||
@ -163,24 +162,6 @@ export const overflowFade = style({
|
||||
marginTop: '-20px',
|
||||
})
|
||||
|
||||
export const successfulNftCount = style([
|
||||
sprinkles({
|
||||
fontWeight: 'normal',
|
||||
fontSize: '14',
|
||||
color: 'textPrimary',
|
||||
marginTop: '0',
|
||||
marginRight: '16',
|
||||
marginBottom: '0',
|
||||
}),
|
||||
{
|
||||
lineHeight: '20px',
|
||||
// TODO: find a way to download the success modal with webkit text gradients
|
||||
// background: 'magicGradient',
|
||||
// backgroundClip: 'text',
|
||||
// color: 'transparent',
|
||||
},
|
||||
])
|
||||
|
||||
export const totalEthCost = style([
|
||||
sprinkles({
|
||||
fontSize: '14',
|
||||
@ -200,19 +181,6 @@ export const bottomBar = style([
|
||||
}),
|
||||
])
|
||||
|
||||
export const refundTextEthIcon = style([
|
||||
sprinkles({
|
||||
height: '16',
|
||||
width: '16',
|
||||
fill: 'textSecondary',
|
||||
}),
|
||||
{
|
||||
marginLeft: '-2px',
|
||||
marginBottom: '-3px',
|
||||
marginRight: '-3px',
|
||||
},
|
||||
])
|
||||
|
||||
export const button = style([
|
||||
sprinkles({
|
||||
height: '40',
|
||||
@ -235,31 +203,6 @@ export const button = style([
|
||||
},
|
||||
])
|
||||
|
||||
export const backArrow = style([
|
||||
sprinkles({
|
||||
fill: 'genieBlue',
|
||||
marginLeft: '6',
|
||||
marginRight: '1',
|
||||
}),
|
||||
])
|
||||
|
||||
export const circleButton = style([
|
||||
center,
|
||||
sprinkles({
|
||||
marginRight: '8',
|
||||
marginTop: '16',
|
||||
marginBottom: 'auto',
|
||||
borderRadius: 'round',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: 'white',
|
||||
border: 'none',
|
||||
}),
|
||||
{
|
||||
height: '44px',
|
||||
width: '44px',
|
||||
},
|
||||
])
|
||||
|
||||
export const mixedRefundModal = style([
|
||||
sprinkles({
|
||||
background: 'backgroundSurface',
|
||||
@ -365,33 +308,6 @@ export const refundAssetImage = style([
|
||||
},
|
||||
])
|
||||
|
||||
export const refundEthCost = style([
|
||||
sprinkles({
|
||||
fontSize: '12',
|
||||
color: 'textPrimary',
|
||||
marginTop: '0',
|
||||
marginLeft: 'auto',
|
||||
marginRight: '0',
|
||||
textAlign: 'right',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
width: '36',
|
||||
}),
|
||||
{
|
||||
lineHeight: '15px',
|
||||
marginBottom: '9px',
|
||||
textOverflow: 'ellipsis ".."',
|
||||
},
|
||||
])
|
||||
|
||||
export const refundEthIcon = style({
|
||||
height: '14px',
|
||||
width: '14px',
|
||||
marginTop: '0px',
|
||||
marginLeft: '-2px',
|
||||
marginRight: '2px',
|
||||
})
|
||||
|
||||
export const refundOverflowFade = style([
|
||||
sprinkles({
|
||||
width: { sm: 'full', md: 'half' },
|
||||
|
||||
@ -18,12 +18,6 @@ export const title = style([
|
||||
}),
|
||||
])
|
||||
|
||||
export const openAddress = sprinkles({
|
||||
minWidth: '20',
|
||||
height: '20',
|
||||
width: '20',
|
||||
})
|
||||
|
||||
export const address = style([
|
||||
title,
|
||||
sprinkles({
|
||||
|
||||
@ -8,9 +8,6 @@ import styled from 'styled-components/macro'
|
||||
import { ThemedText } from 'theme'
|
||||
|
||||
import { ethNumberStandardFormatter, formatWeiToDecimal } from '../../../utils/currency'
|
||||
import { formatChange } from '../../../utils/toSignificant'
|
||||
import { Box } from '../../Box'
|
||||
import { Column, Row } from '../../Flex'
|
||||
import * as styles from './Cells.css'
|
||||
|
||||
const TruncatedText = styled.div`
|
||||
@ -168,23 +165,3 @@ export const ChangeCell = ({ change, children }: { children?: ReactNode; change?
|
||||
</ThemedText.BodyPrimary>
|
||||
</ChangeCellContainer>
|
||||
)
|
||||
|
||||
export const WeiWithDayChange = ({ value }: CellProps) => (
|
||||
<Column gap="4">
|
||||
<Row justifyContent="flex-end" color="textPrimary">
|
||||
{value && value.value ? <>{formatWeiToDecimal(value.value.toString(), true)} ETH</> : '-'}
|
||||
</Row>
|
||||
{value.change ? (
|
||||
<Box
|
||||
as="span"
|
||||
color={value.change > 0 ? 'green' : 'accentFailure'}
|
||||
fontWeight="normal"
|
||||
fontSize="12"
|
||||
position="relative"
|
||||
>
|
||||
{value.change > 0 && '+'}
|
||||
{formatChange(value.change)}%
|
||||
</Box>
|
||||
) : null}
|
||||
</Column>
|
||||
)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { style } from '@vanilla-extract/css'
|
||||
import { body, caption } from 'nft/css/common.css'
|
||||
import { breakpoints, sprinkles } from 'nft/css/sprinkles.css'
|
||||
import { sprinkles } from 'nft/css/sprinkles.css'
|
||||
|
||||
export const section = style([
|
||||
sprinkles({
|
||||
@ -17,45 +17,6 @@ export const section = style([
|
||||
},
|
||||
])
|
||||
|
||||
export const bannerWrap = style([
|
||||
sprinkles({
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
height: '386',
|
||||
}),
|
||||
{
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: 'cover',
|
||||
},
|
||||
])
|
||||
|
||||
export const bannerOverlay = style([
|
||||
{
|
||||
height: '386px',
|
||||
},
|
||||
sprinkles({
|
||||
position: 'absolute',
|
||||
opacity: '0.7',
|
||||
width: 'full',
|
||||
backgroundColor: 'gray900',
|
||||
left: '0',
|
||||
top: '0',
|
||||
}),
|
||||
])
|
||||
|
||||
export const collectionDetails = style([
|
||||
sprinkles({
|
||||
width: 'full',
|
||||
}),
|
||||
{
|
||||
'@media': {
|
||||
[`(min-width: ${breakpoints.lg}px)`]: {
|
||||
width: '40%',
|
||||
},
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
/* Activity Feed Styles */
|
||||
export const activityRow = style([
|
||||
sprinkles({
|
||||
@ -167,31 +128,3 @@ export const loadingTd = style([
|
||||
position: 'relative',
|
||||
}),
|
||||
])
|
||||
|
||||
export const trendingOptions = sprinkles({
|
||||
marginTop: '36',
|
||||
marginBottom: '20',
|
||||
height: '44',
|
||||
borderRadius: '12',
|
||||
borderWidth: '2px',
|
||||
borderStyle: 'solid',
|
||||
borderColor: 'outline',
|
||||
})
|
||||
|
||||
/* Trending Colletion styles */
|
||||
export const trendingOption = style([
|
||||
{
|
||||
marginTop: '-1px',
|
||||
marginLeft: '-1px',
|
||||
},
|
||||
sprinkles({
|
||||
paddingY: '14',
|
||||
paddingX: '16',
|
||||
borderRadius: '12',
|
||||
fontSize: '12',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer',
|
||||
}),
|
||||
])
|
||||
|
||||
export const trendingOptionActive = sprinkles({ backgroundColor: 'accentActiveSoft' })
|
||||
|
||||
@ -20,28 +20,6 @@ export const nftDivider = style([
|
||||
}),
|
||||
])
|
||||
|
||||
export const priceChevron = style([
|
||||
sprinkles({
|
||||
height: '20',
|
||||
width: '20',
|
||||
transition: '250',
|
||||
}),
|
||||
{
|
||||
marginBottom: '-6px',
|
||||
},
|
||||
])
|
||||
|
||||
export const durationChevron = style([
|
||||
sprinkles({
|
||||
height: '16',
|
||||
width: '16',
|
||||
transition: '250',
|
||||
}),
|
||||
{
|
||||
marginBottom: '-4px',
|
||||
},
|
||||
])
|
||||
|
||||
export const chevronDown = style({
|
||||
transform: 'rotate(180deg)',
|
||||
})
|
||||
|
||||
@ -11,8 +11,6 @@ export const section = style([
|
||||
{ maxWidth: '1000px', margin: '0 auto' },
|
||||
])
|
||||
|
||||
export const filterRowIcon = sprinkles({ color: { default: 'textSecondary', hover: 'blue' } })
|
||||
|
||||
export const buttonSelected = style({
|
||||
border: `2px solid ${vars.color.genieBlue}`,
|
||||
})
|
||||
|
||||
@ -58,12 +58,6 @@ const SellButtonSkeleton = styled.div`
|
||||
border-radius: 12px;
|
||||
`
|
||||
|
||||
export const ProfileAssetsWrapperSkeleton = styled(SkeletonRowWrapper)`
|
||||
flex-wrap: wrap;
|
||||
gap: 26px;
|
||||
margin-bottom: 20px;
|
||||
`
|
||||
|
||||
export const ProfileAssetCardSkeleton = styled.div`
|
||||
width: 100%;
|
||||
height: 330px;
|
||||
|
||||
@ -10,8 +10,6 @@ import { css } from 'styled-components/macro'
|
||||
|
||||
import { sprinkles, vars } from '../../css/sprinkles.css'
|
||||
|
||||
export const bannerContainerNoBanner = style({ height: '0', marginTop: '0px' })
|
||||
|
||||
export const bannerImage = style({ objectFit: 'cover' })
|
||||
|
||||
export const baseActivitySwitcherToggle = style([
|
||||
|
||||
Loading…
Reference in New Issue
Block a user