style: updated collection cards (#5047)

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

@@ -7,6 +7,8 @@ export const card = style([
     overflow: 'hidden',
     borderStyle: 'solid',
     borderWidth: '1px',
+    paddingBottom: '12',
+    boxShadow: 'shallow',
   }),
   {
     boxSizing: 'border-box',
@@ -20,9 +22,6 @@ export const card = style([
         },
       },
     },
-    ':hover': {
-      boxShadow: themeVars.shadows.deep,
-    },
   },
 ])
 
@@ -34,8 +33,13 @@ export const notSelectedCard = style([
   card,
   sprinkles({
     backgroundColor: 'backgroundSurface',
-    borderColor: 'transparent',
+    borderColor: 'backgroundOutline',
   }),
+  {
+    ':hover': {
+      backgroundColor: themeVars.colors.stateOverlayHover,
+    },
+  },
 ])
 
 export const cardImageHover = style({
@@ -45,9 +49,15 @@ export const cardImageHover = style({
 export const selectedCard = style([
   card,
   sprinkles({
-    background: 'lightGrayOverlay',
-    borderColor: 'backgroundOutline',
+    background: 'backgroundSurface',
+    borderColor: 'accentAction',
+    borderWidth: '3px',
   }),
+  {
+    ':hover': {
+      backgroundColor: themeVars.colors.stateOverlayHover,
+    },
+  },
 ])
 
 export const button = style([

src/nft/components/collection/CollectionAsset.tsx

@@ -2,7 +2,7 @@ import { BigNumber } from '@ethersproject/bignumber'
 import { useBag } from 'nft/hooks'
 import { GenieAsset, Markets, UniformHeight } from 'nft/types'
 import { formatWeiToDecimal, isAudio, isVideo, rarityProviderLogo } from 'nft/utils'
-import { MouseEvent, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import * as Card from './Card'
 
@@ -73,24 +73,45 @@ export const CollectionAsset = ({
   }, [asset])
 
   return (
-    <Card.Container asset={asset} selected={isSelected}>
-      {assetMediaType === AssetMediaType.Image ? (
-        <Card.Image uniformHeight={uniformHeight} setUniformHeight={setUniformHeight} />
-      ) : assetMediaType === AssetMediaType.Video ? (
-        <Card.Video
-          uniformHeight={uniformHeight}
-          setUniformHeight={setUniformHeight}
-          shouldPlay={mediaShouldBePlaying}
-          setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
-        />
-      ) : (
-        <Card.Audio
-          uniformHeight={uniformHeight}
-          setUniformHeight={setUniformHeight}
-          shouldPlay={mediaShouldBePlaying}
-          setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
-        />
-      )}
+    <Card.Container
+      asset={asset}
+      selected={isSelected}
+      addAssetToBag={() => {
+        addAssetsToBag([asset])
+        !bagExpanded && !isMobile && toggleBag()
+      }}
+      removeAssetFromBag={() => {
+        removeAssetsFromBag([asset])
+      }}
+    >
+      <Card.ImageContainer>
+        {asset.tokenType === 'ERC1155' && quantity > 0 && <Card.Erc1155Controls quantity={quantity.toString()} />}
+        {asset.rarity && provider && provider.rank && (
+          <Card.Ranking
+            rarity={asset.rarity}
+            provider={provider}
+            rarityVerified={!!rarityVerified}
+            rarityLogo={rarityLogo}
+          />
+        )}
+        {assetMediaType === AssetMediaType.Image ? (
+          <Card.Image uniformHeight={uniformHeight} setUniformHeight={setUniformHeight} />
+        ) : assetMediaType === AssetMediaType.Video ? (
+          <Card.Video
+            uniformHeight={uniformHeight}
+            setUniformHeight={setUniformHeight}
+            shouldPlay={mediaShouldBePlaying}
+            setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
+          />
+        ) : (
+          <Card.Audio
+            uniformHeight={uniformHeight}
+            setUniformHeight={setUniformHeight}
+            shouldPlay={mediaShouldBePlaying}
+            setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
+          />
+        )}
+      </Card.ImageContainer>
       <Card.DetailsContainer>
         <Card.InfoContainer>
           <Card.PrimaryRow>
@@ -98,14 +119,7 @@ export const CollectionAsset = ({
               <Card.PrimaryInfo>{asset.name ? asset.name : `#${asset.tokenId}`}</Card.PrimaryInfo>
               {asset.susFlag && <Card.Suspicious />}
             </Card.PrimaryDetails>
-            {asset.rarity && provider && provider.rank && (
-              <Card.Ranking
-                rarity={asset.rarity}
-                provider={provider}
-                rarityVerified={!!rarityVerified}
-                rarityLogo={rarityLogo}
-              />
-            )}
+            <Card.DetailsLink />
           </Card.PrimaryRow>
           <Card.SecondaryRow>
             <Card.SecondaryDetails>
@@ -119,21 +133,6 @@ export const CollectionAsset = ({
             )}
           </Card.SecondaryRow>
         </Card.InfoContainer>
-        <Card.Button
-          quantity={quantity}
-          selectedChildren={'Remove'}
-          onClick={(e: MouseEvent) => {
-            e.preventDefault()
-            addAssetsToBag([asset])
-            !bagExpanded && !isMobile && toggleBag()
-          }}
-          onSelectedClick={(e: MouseEvent) => {
-            e.preventDefault()
-            removeAssetsFromBag([asset])
-          }}
-        >
-          {'Buy now'}
-        </Card.Button>
       </Card.DetailsContainer>
     </Card.Container>
   )

src/nft/components/collection/CollectionAssetLoading.tsx

@@ -14,14 +14,9 @@ export const CollectionAssetLoading = () => {
       </Box>
       <Row justifyContent="space-between" marginTop="12" paddingLeft="12" paddingRight="12">
         <Box as="div" className={loadingAsset} height="12" width="120"></Box>
-        <Box as="div" className={loadingAsset} width="36" height="12"></Box>
       </Row>
       <Row justifyContent="space-between" marginTop="12" paddingLeft="12" paddingRight="12">
         <Box as="div" className={loadingAsset} height="16" width="80"></Box>
-        <Box as="div" className={loadingAsset} width="16" height="16" borderRadius="4"></Box>
-      </Row>
-      <Row marginTop="12" paddingLeft="12" paddingRight="12">
-        <Box as="div" className={loadingAsset} width="full" height="32"></Box>
       </Row>
     </Box>
   )

src/nft/components/icons.tsx

@@ -1239,20 +1239,15 @@ export const SuspiciousIcon20 = (props: SVGProps) => (
 )
 
 export const MinusIconLarge = (props: SVGProps) => (
-  <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M8.72879 16.7601H23.2734C23.8862 16.7601 24.4085 16.2478 24.4085 15.615C24.4085 14.9922 23.8862 14.4699 23.2734 14.4699H8.72879C8.13616 14.4699 7.59375 14.9922 7.59375 15.615C7.59375 16.2478 8.13616 16.7601 8.72879 16.7601Z"
-      fill="currentColor"
-    />
+  <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 12H19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 )
 
 export const PlusIconLarge = (props: SVGProps) => (
-  <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M8.72712 16.75H14.8544V22.8772C14.8544 23.5 15.3666 24.0223 15.9994 24.0223C16.6323 24.0223 17.1445 23.5 17.1445 22.8772V16.75H23.2718C23.8945 16.75 24.4169 16.2377 24.4169 15.6049C24.4169 14.9721 23.8945 14.4598 23.2718 14.4598H17.1445V8.33259C17.1445 7.70982 16.6323 7.1875 15.9994 7.1875C15.3666 7.1875 14.8544 7.70982 14.8544 8.33259V14.4598H8.72712C8.10435 14.4598 7.58203 14.9721 7.58203 15.6049C7.58203 16.2377 8.10435 16.75 8.72712 16.75Z"
-      fill="currentColor"
-    />
+  <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 5V19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5 12H19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 )
 

src/nft/css/sprinkles.css.ts

@@ -265,7 +265,7 @@ const flexAlignment = [
 
 const overflow = ['hidden', 'inherit', 'scroll', 'visible', 'auto'] as const
 
-const borderWidth = ['0px', '0.5px', '1px', '1.5px', '2px', '4px']
+const borderWidth = ['0px', '0.5px', '1px', '1.5px', '2px', '3px', '4px']
 
 const borderStyle = ['none', 'solid'] as const