feat: Web 2233 erc 1155 card redesign (#5249)

* init

* init

* remove unnecessary style changes

* ensure no pointer events on tooltip

src/components/Popover/index.tsx

@@ -8,6 +8,7 @@ import { Z_INDEX } from 'theme/zIndex'
 
 const PopoverContainer = styled.div<{ show: boolean }>`
   z-index: ${Z_INDEX.popover};
+  pointer-events: none;
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   opacity: ${(props) => (props.show ? 1 : 0)};
   transition: visibility 150ms linear, opacity 150ms linear;

src/components/Tooltip/index.tsx

@@ -6,6 +6,7 @@ import Popover, { PopoverProps } from '../Popover'
 
 export const TooltipContainer = styled.div`
   max-width: 256px;
+  cursor: default;
   padding: 0.6rem 1rem;
   font-weight: 400;
   word-break: break-word;
@@ -18,6 +19,9 @@ export const TooltipContainer = styled.div`
 
 interface TooltipProps extends Omit<PopoverProps, 'content'> {
   text: ReactNode
+  open?: () => void
+  close?: () => void
+  noOp?: () => void
   disableHover?: boolean // disable the hover and content display
 }
 
@@ -29,8 +33,19 @@ interface TooltipContentProps extends Omit<PopoverProps, 'content'> {
   disableHover?: boolean // disable the hover and content display
 }
 
-export default function Tooltip({ text, ...rest }: TooltipProps) {
-  return <Popover content={text && <TooltipContainer>{text}</TooltipContainer>} {...rest} />
+export default function Tooltip({ text, open, close, noOp, disableHover, ...rest }: TooltipProps) {
+  return (
+    <Popover
+      content={
+        text && (
+          <TooltipContainer onMouseEnter={disableHover ? noOp : open} onMouseLeave={disableHover ? noOp : close}>
+            {text}
+          </TooltipContainer>
+        )
+      }
+      {...rest}
+    />
+  )
 }
 
 function TooltipContent({ content, wrap = false, ...rest }: TooltipContentProps) {
@@ -44,7 +59,15 @@ export function MouseoverTooltip({ text, disableHover, children, ...rest }: Omit
   const close = useCallback(() => setShow(false), [setShow])
   const noOp = () => null
   return (
-    <Tooltip {...rest} show={show} text={disableHover ? null : text}>
+    <Tooltip
+      {...rest}
+      open={open}
+      close={close}
+      noOp={noOp}
+      disableHover={disableHover}
+      show={show}
+      text={disableHover ? null : text}
+    >
       <div onMouseEnter={disableHover ? noOp : open} onMouseLeave={disableHover ? noOp : close}>
         {children}
       </div>

src/nft/components/collection/Card.tsx

@@ -157,8 +157,13 @@ const RankingContainer = styled.div`
   z-index: 2;
 `
 
-const StyledImageContainer = styled.div`
+const StyledImageContainer = styled.div<{ isDisabled?: boolean }>`
   position: relative;
+  pointer-events: auto;
+  &:hover {
+    opacity: ${({ isDisabled, theme }) => (isDisabled ? theme.opacity.disabled : theme.opacity.enabled)};
+  }
+  cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
 `
 
 /* -------- ASSET CARD -------- */
@@ -222,8 +227,6 @@ const Container = ({
         onMouseEnter={() => toggleHovered()}
         onMouseLeave={() => toggleHovered()}
         transition="250"
-        opacity={isDisabled ? '0.5' : '1'}
-        cursor={isDisabled ? 'default' : 'pointer'}
         onClick={isDisabled ? () => null : onClick ?? handleAssetInBag}
       >
         {children}
@@ -232,8 +235,8 @@ const Container = ({
   )
 }
 
-const ImageContainer = ({ children }: { children: ReactNode }) => (
-  <StyledImageContainer>{children}</StyledImageContainer>
+const ImageContainer = ({ children, isDisabled = false }: { children: ReactNode; isDisabled?: boolean }) => (
+  <StyledImageContainer isDisabled={isDisabled}>{children}</StyledImageContainer>
 )
 
 /* -------- CARD IMAGE -------- */

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

@@ -98,22 +98,7 @@ export const ViewMyNftsAsset = ({
       onClick={onCardClick}
       isDisabled={isDisabled}
     >
-      <MouseoverTooltip
-        text={
-          <Box as="span" className={bodySmall} style={{ color: themeVars.colors.textPrimary }}>
-            {asset.asset_contract.tokenType === TokenType.ERC1155 ? (
-              <Trans>ERC-1155 support coming soon</Trans>
-            ) : (
-              <Trans>Blocked from trading</Trans>
-            )}
-          </Box>
-        }
-        placement="bottom"
-        offsetX={0}
-        offsetY={-100}
-        style={{ display: 'block' }}
-        disableHover={!isDisabled}
-      >
+      <Card.ImageContainer isDisabled={isDisabled}>
         <Tooltip
           text={
             <Box as="span" className={bodySmall} color="textPrimary">
@@ -123,15 +108,30 @@ export const ViewMyNftsAsset = ({
           show={showTooltip}
           style={{ display: 'block' }}
           offsetX={0}
-          offsetY={-52}
+          offsetY={-68}
           hideArrow={true}
           placement="bottom"
         >
-          <Card.ImageContainer>
+          <MouseoverTooltip
+            text={
+              <Box as="span" className={bodySmall} style={{ color: themeVars.colors.textPrimary }}>
+                {asset.asset_contract.tokenType === TokenType.ERC1155 ? (
+                  <Trans>ERC-1155 support coming soon</Trans>
+                ) : (
+                  <Trans>Blocked from trading</Trans>
+                )}
+              </Box>
+            }
+            placement="bottom"
+            offsetX={0}
+            offsetY={-100}
+            style={{ display: 'block' }}
+            disableHover={!isDisabled}
+          >
             {getNftDisplayComponent(assetMediaType, mediaShouldBePlaying, setCurrentTokenPlayingMedia)}
-          </Card.ImageContainer>
+          </MouseoverTooltip>
         </Tooltip>
-      </MouseoverTooltip>
+      </Card.ImageContainer>
       <Card.DetailsContainer>
         <Card.ProfileNftDetails asset={asset} hideDetails={hideDetails} />
       </Card.DetailsContainer>

src/theme/index.tsx

@@ -44,6 +44,8 @@ const transitions = {
 const opacities = {
   hover: 0.6,
   click: 0.4,
+  disabled: 0.5,
+  enabled: 1,
 }
 
 const deprecated_mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } = Object.keys(