feat: [DetailsV2] background for nft details (#6496)

* feat: background for nft details

* fixing top spacing

* adding new states for zindex

src/components/swap/styleds.tsx

@@ -31,7 +31,7 @@ export const SwapWrapper = styled.main<{ chainId: number | undefined }>`
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
   padding: 8px;
   box-shadow: ${({ chainId }) => !!chainId && chainId === SupportedChainId.BNB && '0px 40px 120px 0px #f0b90b29'};
-  z-index: ${Z_INDEX.deprecated_content};
+  z-index: ${Z_INDEX.default};
   transition: transform 250ms ease;
 
   &:hover {

src/nft/components/details/detailsV2/NftDetails.tsx

 import { CollectionInfoForAsset, GenieAsset } from 'nft/types'
+import styled from 'styled-components/macro'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { DataPage } from './DataPage'
 import { LandingPage } from './LandingPage'
@@ -8,11 +10,29 @@ interface NftDetailsProps {
   collection: CollectionInfoForAsset
 }
 
+const DetailsBackground = styled.div<{ backgroundImage: string }>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: ${({ backgroundImage }) => `url(${backgroundImage})`};
+  filter: blur(100px);
+  opacity: ${({ theme }) => (theme.darkMode ? 0.2 : 0.24)};
+`
+
+const DetailsContentContainer = styled.div`
+  z-index: ${Z_INDEX.hover};
+`
+
 export const NftDetails = ({ asset, collection }: NftDetailsProps) => {
   return (
     <>
+      {asset.imageUrl && <DetailsBackground backgroundImage={asset.imageUrl} />}
+      <DetailsContentContainer>
         <LandingPage asset={asset} collection={collection} />
         <DataPage asset={asset} />
+      </DetailsContentContainer>
     </>
   )
 }

src/pages/AppBody.tsx

@@ -18,7 +18,7 @@ export const BodyWrapper = styled.main<BodyWrapperProps>`
   margin-top: 1rem;
   margin-left: auto;
   margin-right: auto;
-  z-index: ${Z_INDEX.deprecated_content};
+  z-index: ${Z_INDEX.default};
   font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
 `
 

src/theme/zIndex.ts

@@ -2,7 +2,9 @@
 // Please avoid using deprecated numbers
 export enum Z_INDEX {
   deprecated_zero = 0,
-  deprecated_content = 1,
+  default = 1,
+  hover = 2,
+  active = 3,
   under_dropdown = 990,
   dropdown = 1000,
   sticky = 1020,