feat: increase hit-target for remove button (#5412)

* feat: increase hit-target for remove button

* chore: add conditional back

* update

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

@@ -106,11 +106,3 @@ export const collectionName = style([
 export const icon = sprinkles({
   flexShrink: '0',
 })
-
-export const removeAssetOverlay = style([
-  sprinkles({
-    position: 'absolute',
-    right: '4',
-    top: '4',
-  }),
-])

src/nft/components/bag/BagRow.tsx

@@ -39,6 +39,25 @@ const ReviewButton = styled(ThemeButton)`
   padding: 8px;
   width: 50%;
 `
+const RemoveAssetOverlay = styled.div`
+  position: absolute;
+  display: block;
+  right: -11px;
+  top: -11px;
+  z-index: 1;
+  transition: 250ms;
+  width: 45px;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const RemoveAssetButton = ({ onClick }: { onClick: (e: MouseEvent<HTMLDivElement>) => void }) => (
+  <RemoveAssetOverlay onClick={onClick}>
+    <CircularCloseIcon />
+  </RemoveAssetOverlay>
+)
 
 const NoContentContainer = () => (
   <Box position="relative" background="loadingBackground" className={styles.bagRowImage}>
@@ -87,7 +106,7 @@ export const BagRow = ({ asset, usdPrice, removeAsset, showRemove, grayscale, is
   )
 
   const handleRemoveClick = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
+    (e: MouseEvent<HTMLElement>) => {
       e.preventDefault()
       e.stopPropagation()
       removeAsset([asset])
@@ -99,15 +118,7 @@ export const BagRow = ({ asset, usdPrice, removeAsset, showRemove, grayscale, is
     <Link to={getAssetHref(asset)} style={{ textDecoration: 'none' }}>
       <Row className={styles.bagRow} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
         <Box position="relative" display="flex">
-          <Box
+          {showRemove && isMobile && <RemoveAssetButton onClick={handleRemoveClick} />}
-            display={showRemove && isMobile ? 'block' : 'none'}
-            className={styles.removeAssetOverlay}
-            onClick={handleRemoveClick}
-            transition="250"
-            zIndex="1"
-          >
-            <CircularCloseIcon />
-          </Box>
           {!noImageAvailable && (
             <Box
               as="img"

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

@@ -1,12 +1,12 @@
 import { ButtonEmphasis, ButtonSize } from 'components/Button'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
-import { CircularCloseIcon, VerifiedIcon } from 'nft/components/icons'
+import { VerifiedIcon } from 'nft/components/icons'
 import { useIsMobile, useSellAsset } from 'nft/hooks'
 import { WalletAsset } from 'nft/types'
 import { useState } from 'react'
 
-import { RemoveButton } from '../BagRow'
+import { RemoveAssetButton, RemoveButton } from '../BagRow'
 import * as styles from '../BagRow.css'
 
 const ProfileAssetRow = ({ asset }: { asset: WalletAsset }) => {
@@ -24,15 +24,7 @@ const ProfileAssetRow = ({ asset }: { asset: WalletAsset }) => {
   return (
     <Row className={styles.bagRow} onMouseEnter={handleHover} onMouseLeave={handleHover}>
       <Box position="relative" display="flex">
-        <Box
+        {isMobile && <RemoveAssetButton onClick={handleRemoveAsset} />}
-          display={isMobile ? 'block' : 'none'}
-          className={styles.removeAssetOverlay}
-          onClick={handleRemoveAsset}
-          transition="250"
-          zIndex="1"
-        >
-          <CircularCloseIcon />
-        </Box>
         <img src={asset.smallImageUrl} alt={asset.name} className={styles.bagRowImage} />
       </Box>
       <Column overflow="hidden" width="full" color="textPrimary">