ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove unused nft css (#5241)

Browse Source 
* refactor: remove unused nft css

* unused

* unused
This commit is contained in:
vignesh mohankumar 2022-11-16 11:23:10 -05:00 committed by GitHub
parent 78b6ef60ac
commit ef9a59a96b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 3 additions and 510 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/nft/components/bag/BagFooter.css.ts
View File

@ -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([ export const payButton = style([
body, body,
sprinkles({ sprinkles({

81
src/nft/components/bag/BagRow.css.ts
View File

@ -1,6 +1,6 @@
import { style } from '@vanilla-extract/css' import { style } from '@vanilla-extract/css'
import { bodySmall } from 'nft/css/common.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([ export const bagRow = style([
sprinkles({ 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({ export const bagRowImage = sprinkles({
width: '56', width: '56',
height: '56', height: '56',
@ -123,15 +68,6 @@ export const grayscaleImage = style({
filter: 'grayscale(100%)', filter: 'grayscale(100%)',
}) })
export const unavailableImage = style([
grayscaleImage,
sprinkles({
width: '44',
height: '44',
borderRadius: '8',
}),
])
export const bagRowPrice = style([ export const bagRowPrice = style([
sprinkles({ sprinkles({
gap: '4', gap: '4',
@ -171,21 +107,6 @@ export const icon = sprinkles({
flexShrink: '0', 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([ export const removeAssetOverlay = style([
sprinkles({ sprinkles({
position: 'absolute', position: 'absolute',

4
src/nft/components/collection/Activity.css.ts
View File

@ -191,10 +191,6 @@ export const marketplaceIcon = style([
}), }),
]) ])
export const ensNameContainer = sprinkles({
width: 'max',
})
export const rarityInfo = style([ export const rarityInfo = style([
sprinkles({ sprinkles({
display: 'flex', display: 'flex',

56
src/nft/components/collection/Card.css.ts
View File

@ -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([ export const rarityInfo = style([
sprinkles({ sprinkles({
display: 'flex', display: 'flex',

108
src/nft/components/collection/CollectionAsset.css.ts
View File

@ -1,32 +1,6 @@
import { style } from '@vanilla-extract/css' import { style } from '@vanilla-extract/css'
import { sprinkles, vars } from '../../css/sprinkles.css' import { sprinkles } 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}`,
},
])
export const buy = style([ export const buy = style([
{ {
@ -37,74 +11,6 @@ export const buy = style([
sprinkles({ color: 'backgroundSurface', position: 'absolute', borderRadius: 'round' }), 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([ export const quantity = style([
{ {
padding: '9px 4px 8px', padding: '9px 4px 8px',
@ -122,21 +28,9 @@ export const marketplace = style({
bottom: '12px', bottom: '12px',
}) })
export const placeholderImage = style({ width: '50%', padding: '25%' })
export const ethIcon = style({ display: 'inline-block', marginBottom: '-3px', overflow: 'auto' }) export const ethIcon = style({ display: 'inline-block', marginBottom: '-3px', overflow: 'auto' })
export const rarityInfo = style({ export const rarityInfo = style({
background: 'rgba(255, 255, 255, 0.6)', background: 'rgba(255, 255, 255, 0.6)',
backdropFilter: 'blur(6px)', backdropFilter: 'blur(6px)',
}) })
export const iconToolTip = style([
sprinkles({
display: 'inline-block',
overflow: 'auto',
marginRight: '4',
}),
{
marginBottom: '-3px',
},
])

17
src/nft/components/collection/CollectionNfts.tsx
View File

@ -4,7 +4,6 @@ import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import clsx from 'clsx' import clsx from 'clsx'
import { OpacityHoverState } from 'components/Common' import { OpacityHoverState } from 'components/Common'
import { loadingAnimation } from 'components/Loader/styled'
import { parseEther } from 'ethers/lib/utils' import { parseEther } from 'ethers/lib/utils'
import { NftAssetTraitInput, NftMarketplace } from 'graphql/data/nft/__generated__/AssetQuery.graphql' import { NftAssetTraitInput, NftMarketplace } from 'graphql/data/nft/__generated__/AssetQuery.graphql'
import { 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)` const MarketNameWrapper = styled(Row)`
gap: 8px; gap: 8px;
` `

6
src/nft/components/collection/CollectionStats.css.ts
View File

@ -18,12 +18,6 @@ export const statsText = style([
}, },
]) ])
export const smallStatsText = style({
marginLeft: '84px',
})
export const statsRowItem = sprinkles({ paddingRight: '12' })
export const baseCollectionImage = sprinkles({ export const baseCollectionImage = sprinkles({
left: '0', left: '0',
borderStyle: 'solid', borderStyle: 'solid',

11
src/nft/components/collection/FilterButton.css.ts
View File

@ -12,17 +12,6 @@ export const filterButtonExpanded = style({
color: themeVars.colors.textPrimary, color: themeVars.colors.textPrimary,
}) })
export const filterBadge = style([
sprinkles({
position: 'absolute',
left: '18',
fontSize: '28',
}),
{
top: '-3px',
},
])
export const filterButtonLoading = style([ export const filterButtonLoading = style([
loadingAsset, loadingAsset,
sprinkles({ sprinkles({

84
src/nft/components/collection/TransactionCompleteModal.css.ts
View File

@ -1,5 +1,4 @@
import { style } from '@vanilla-extract/css' import { style } from '@vanilla-extract/css'
import { center } from 'nft/css/common.css'
import { sprinkles, themeVars, vars } from 'nft/css/sprinkles.css' import { sprinkles, themeVars, vars } from 'nft/css/sprinkles.css'
export const modalContainer = style([ export const modalContainer = style([
@ -163,24 +162,6 @@ export const overflowFade = style({
marginTop: '-20px', 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([ export const totalEthCost = style([
sprinkles({ sprinkles({
fontSize: '14', 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([ export const button = style([
sprinkles({ sprinkles({
height: '40', 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([ export const mixedRefundModal = style([
sprinkles({ sprinkles({
background: 'backgroundSurface', 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([ export const refundOverflowFade = style([
sprinkles({ sprinkles({
width: { sm: 'full', md: 'half' }, width: { sm: 'full', md: 'half' },

6
src/nft/components/explore/Cells/Cells.css.ts
View File

@ -18,12 +18,6 @@ export const title = style([
}), }),
]) ])
export const openAddress = sprinkles({
minWidth: '20',
height: '20',
width: '20',
})
export const address = style([ export const address = style([
title, title,
sprinkles({ sprinkles({

23
src/nft/components/explore/Cells/Cells.tsx
View File

@ -8,9 +8,6 @@ import styled from 'styled-components/macro'
import { ThemedText } from 'theme' import { ThemedText } from 'theme'
import { ethNumberStandardFormatter, formatWeiToDecimal } from '../../../utils/currency' 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' import * as styles from './Cells.css'
const TruncatedText = styled.div` const TruncatedText = styled.div`
@ -168,23 +165,3 @@ export const ChangeCell = ({ change, children }: { children?: ReactNode; change?
</ThemedText.BodyPrimary> </ThemedText.BodyPrimary>
</ChangeCellContainer> </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>
)

69
src/nft/components/explore/Explore.css.ts
View File

@ -1,6 +1,6 @@
import { style } from '@vanilla-extract/css' import { style } from '@vanilla-extract/css'
import { body, caption } from 'nft/css/common.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([ export const section = style([
sprinkles({ 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 */ /* Activity Feed Styles */
export const activityRow = style([ export const activityRow = style([
sprinkles({ sprinkles({
@ -167,31 +128,3 @@ export const loadingTd = style([
position: 'relative', 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' })

22
src/nft/components/profile/list/ListPage.css.ts
View File

@ -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({ export const chevronDown = style({
transform: 'rotate(180deg)', transform: 'rotate(180deg)',
}) })

2
src/nft/components/profile/view/ProfilePage.css.ts
View File

@ -11,8 +11,6 @@ export const section = style([
{ maxWidth: '1000px', margin: '0 auto' }, { maxWidth: '1000px', margin: '0 auto' },
]) ])
export const filterRowIcon = sprinkles({ color: { default: 'textSecondary', hover: 'blue' } })
export const buttonSelected = style({ export const buttonSelected = style({
border: `2px solid ${vars.color.genieBlue}`, border: `2px solid ${vars.color.genieBlue}`,
}) })

6
src/nft/components/profile/view/ProfilePageLoadingSkeleton.tsx
View File

@ -58,12 +58,6 @@ const SellButtonSkeleton = styled.div`
border-radius: 12px; border-radius: 12px;
` `
export const ProfileAssetsWrapperSkeleton = styled(SkeletonRowWrapper)`
flex-wrap: wrap;
gap: 26px;
margin-bottom: 20px;
`
export const ProfileAssetCardSkeleton = styled.div` export const ProfileAssetCardSkeleton = styled.div`
width: 100%; width: 100%;
height: 330px; height: 330px;

2
src/nft/pages/collection/index.css.ts
View File

@ -10,8 +10,6 @@ import { css } from 'styled-components/macro'
import { sprinkles, vars } from '../../css/sprinkles.css' import { sprinkles, vars } from '../../css/sprinkles.css'
export const bannerContainerNoBanner = style({ height: '0', marginTop: '0px' })
export const bannerImage = style({ objectFit: 'cover' }) export const bannerImage = style({ objectFit: 'cover' })
export const baseActivitySwitcherToggle = style([ export const baseActivitySwitcherToggle = style([