feat: Sell bag styling (#5297)

match buy bag styles
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/bag/BagRow.tsx

@@ -24,7 +24,7 @@ import styled from 'styled-components/macro'
 
 import * as styles from './BagRow.css'
 
-const RemoveButton = styled(ThemeButton)`
+export const RemoveButton = styled(ThemeButton)`
   border-radius: 12px;
   font-size: 14px;
   line-height: 16px;

src/nft/components/bag/profile/ProfileAssetRow.tsx

+import { ButtonEmphasis, ButtonSize } from 'components/Button'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
-import { bodySmall, subhead } from 'nft/css/common.css'
+import { CircularCloseIcon, VerifiedIcon } from 'nft/components/icons'
 import { useIsMobile, useSellAsset } from 'nft/hooks'
 import { WalletAsset } from 'nft/types'
 import { useState } from 'react'
+import { colors } from 'theme/colors'
 
-import * as styles from './ProfileAssetRow.css'
+import { RemoveButton } from '../BagRow'
+import * as styles from '../BagRow.css'
 
 const ProfileAssetRow = ({ asset }: { asset: WalletAsset }) => {
   const removeAsset = useSellAsset((state) => state.removeSellAsset)
@@ -13,43 +16,39 @@ const ProfileAssetRow = ({ asset }: { asset: WalletAsset }) => {
   const [hovered, setHovered] = useState(false)
   const handleHover = () => setHovered(!hovered)
 
+  const handleRemoveAsset: React.MouseEventHandler<HTMLElement> = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    removeAsset(asset)
+  }
+
   return (
-    <Row paddingY="8" position="relative" onMouseEnter={handleHover} onMouseLeave={handleHover}>
-      <div>
+    <Row className={styles.bagRow} onMouseEnter={handleHover} onMouseLeave={handleHover}>
+      <Box position="relative" display="flex">
         <Box
-          display={isMobile ? 'flex' : 'none'}
-          className={styles.removeAsset}
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            removeAsset(asset)
-          }}
+          display={isMobile ? 'block' : 'none'}
+          className={styles.removeAssetOverlay}
+          onClick={handleRemoveAsset}
+          transition="250"
+          zIndex="1"
         >
-          <img className={styles.removeIcon} src="/nft/svgs/minusCircle.svg" alt="Remove item" />
-        </Box>
-        <img className={styles.tagAssetImage} src={asset.imageUrl} alt={asset.name} />
-      </div>
-      <Column gap="4" overflow="hidden" flexWrap="nowrap">
-        <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" className={subhead}>
-          {asset.name ?? `#${asset.tokenId}`}
-        </Box>
-        <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" className={bodySmall}>
-          {asset.collection?.name}
+          <CircularCloseIcon />
         </Box>
+        <img src={asset.smallImageUrl} alt={asset.name} className={styles.bagRowImage} />
+      </Box>
+      <Column overflow="hidden" width="full" color="textPrimary">
+        <Row overflow="hidden" width="full" justifyContent="space-between" whiteSpace="nowrap" gap="16">
+          <Box className={styles.assetName}>{asset.name || `#${asset.tokenId}`}</Box>
+        </Row>
+        <Row overflow="hidden" whiteSpace="nowrap" gap="2">
+          <Box className={styles.collectionName}>{asset.asset_contract.name}</Box>
+          {asset.collectionIsVerified && <VerifiedIcon className={styles.icon} fill={colors.magentaVibrant} />}
+        </Row>
       </Column>
       {hovered && !isMobile && (
-        <Box
-          marginLeft="auto"
-          marginRight="0"
-          className={styles.removeBagRowButton}
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            removeAsset(asset)
-          }}
-        >
+        <RemoveButton onClick={handleRemoveAsset} emphasis={ButtonEmphasis.medium} size={ButtonSize.medium}>
           Remove
-        </Box>
+        </RemoveButton>
       )}
     </Row>
   )

src/nft/components/profile/list/ListPage.tsx

@@ -605,10 +605,10 @@ const NFTListRow = ({ asset, globalPriceMethod, globalPrice, setGlobalPrice, sel
           />
         </Box>
         <Column gap="4" minWidth="0">
-          <Box paddingRight="8" overflow="hidden" textOverflow="ellipsis" className={subheadSmall}>
+          <Box paddingRight="8" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" className={subheadSmall}>
             {asset.name ? asset.name : `#${asset.tokenId}`}
           </Box>
-          <Box paddingRight="8" overflow="hidden" textOverflow="ellipsis" className={bodySmall}>
+          <Box paddingRight="8" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" className={bodySmall}>
             {asset.collection?.name}
             {asset.collectionIsVerified && <VerifiedIcon style={{ marginBottom: '-5px' }} />}
           </Box>