refactor: remove unused nft css (#5241)

* refactor: remove unused nft css

* unused

* unused

src/nft/components/bag/BagFooter.css.ts

@@ -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({

src/nft/components/bag/BagRow.css.ts

 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',

src/nft/components/collection/Activity.css.ts

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

src/nft/components/collection/Card.css.ts

@@ -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',

src/nft/components/collection/CollectionAsset.css.ts

 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',
-  },
-])

src/nft/components/collection/CollectionNfts.tsx

@@ -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;
 `

src/nft/components/collection/CollectionStats.css.ts

@@ -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',

src/nft/components/collection/FilterButton.css.ts

@@ -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({

src/nft/components/collection/TransactionCompleteModal.css.ts

 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' },

src/nft/components/explore/Cells/Cells.css.ts

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

src/nft/components/explore/Cells/Cells.tsx

@@ -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>
-)

src/nft/components/explore/Explore.css.ts

 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' })

src/nft/components/profile/list/ListPage.css.ts

@@ -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)',
 })

src/nft/components/profile/view/ProfilePage.css.ts

@@ -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}`,
 })

src/nft/components/profile/view/ProfilePageLoadingSkeleton.tsx

@@ -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;

src/nft/pages/collection/index.css.ts

@@ -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([