diff --git a/src/nft/components/bag/BagFooter.css.ts b/src/nft/components/bag/BagFooter.css.ts index a28b9f1242..fe646b7d00 100644 --- a/src/nft/components/bag/BagFooter.css.ts +++ b/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({ diff --git a/src/nft/components/bag/BagRow.css.ts b/src/nft/components/bag/BagRow.css.ts index cb86c65621..072a2d59ed 100644 --- a/src/nft/components/bag/BagRow.css.ts +++ b/src/nft/components/bag/BagRow.css.ts @@ -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', diff --git a/src/nft/components/collection/Activity.css.ts b/src/nft/components/collection/Activity.css.ts index ecb5fa8f98..464fa6a82e 100644 --- a/src/nft/components/collection/Activity.css.ts +++ b/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', diff --git a/src/nft/components/collection/Card.css.ts b/src/nft/components/collection/Card.css.ts index 1329841142..8fa4ef148e 100644 --- a/src/nft/components/collection/Card.css.ts +++ b/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', diff --git a/src/nft/components/collection/CollectionAsset.css.ts b/src/nft/components/collection/CollectionAsset.css.ts index 03b29e075f..f18876525b 100644 --- a/src/nft/components/collection/CollectionAsset.css.ts +++ b/src/nft/components/collection/CollectionAsset.css.ts @@ -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', - }, -]) diff --git a/src/nft/components/collection/CollectionNfts.tsx b/src/nft/components/collection/CollectionNfts.tsx index 3087148ea8..9dff79625e 100644 --- a/src/nft/components/collection/CollectionNfts.tsx +++ b/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; ` diff --git a/src/nft/components/collection/CollectionStats.css.ts b/src/nft/components/collection/CollectionStats.css.ts index 5684b130a4..5e89986fae 100644 --- a/src/nft/components/collection/CollectionStats.css.ts +++ b/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', diff --git a/src/nft/components/collection/FilterButton.css.ts b/src/nft/components/collection/FilterButton.css.ts index b9b66bf67b..11eaa9ec7a 100644 --- a/src/nft/components/collection/FilterButton.css.ts +++ b/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({ diff --git a/src/nft/components/collection/TransactionCompleteModal.css.ts b/src/nft/components/collection/TransactionCompleteModal.css.ts index d1e267ed4c..b6205625a4 100644 --- a/src/nft/components/collection/TransactionCompleteModal.css.ts +++ b/src/nft/components/collection/TransactionCompleteModal.css.ts @@ -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' }, diff --git a/src/nft/components/explore/Cells/Cells.css.ts b/src/nft/components/explore/Cells/Cells.css.ts index af9503f878..b8f451bab7 100644 --- a/src/nft/components/explore/Cells/Cells.css.ts +++ b/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({ diff --git a/src/nft/components/explore/Cells/Cells.tsx b/src/nft/components/explore/Cells/Cells.tsx index ecd8b4923b..f10f66b4cd 100644 --- a/src/nft/components/explore/Cells/Cells.tsx +++ b/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? ) - -export const WeiWithDayChange = ({ value }: CellProps) => ( - - - {value && value.value ? <>{formatWeiToDecimal(value.value.toString(), true)} ETH : '-'} - - {value.change ? ( - 0 ? 'green' : 'accentFailure'} - fontWeight="normal" - fontSize="12" - position="relative" - > - {value.change > 0 && '+'} - {formatChange(value.change)}% - - ) : null} - -) diff --git a/src/nft/components/explore/Explore.css.ts b/src/nft/components/explore/Explore.css.ts index 5233b18ca8..09af49e868 100644 --- a/src/nft/components/explore/Explore.css.ts +++ b/src/nft/components/explore/Explore.css.ts @@ -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' }) diff --git a/src/nft/components/profile/list/ListPage.css.ts b/src/nft/components/profile/list/ListPage.css.ts index f237ee9ea2..d09554575e 100644 --- a/src/nft/components/profile/list/ListPage.css.ts +++ b/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)', }) diff --git a/src/nft/components/profile/view/ProfilePage.css.ts b/src/nft/components/profile/view/ProfilePage.css.ts index cb6d79514d..587a9a0754 100644 --- a/src/nft/components/profile/view/ProfilePage.css.ts +++ b/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}`, }) diff --git a/src/nft/components/profile/view/ProfilePageLoadingSkeleton.tsx b/src/nft/components/profile/view/ProfilePageLoadingSkeleton.tsx index 09747fdd60..4eb10cce7f 100644 --- a/src/nft/components/profile/view/ProfilePageLoadingSkeleton.tsx +++ b/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; diff --git a/src/nft/pages/collection/index.css.ts b/src/nft/pages/collection/index.css.ts index a864663601..06b439f658 100644 --- a/src/nft/pages/collection/index.css.ts +++ b/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([