Merge pull request #6 from Uniswap/fix-menu-z-index

fix: landing page overlay occlusion of Z_INDEX.dropdown

src/components/NavBar/NavDropdown.css.ts

@@ -10,7 +10,6 @@ const baseNavDropdown = style([
     borderWidth: '1px',
     paddingBottom: '8',
     paddingTop: '8',
-    zIndex: '2',
   }),
   {
     boxShadow: '0px 4px 12px 0px #00000026',

src/components/NavBar/NavDropdown.tsx

@@ -1,12 +1,20 @@
 import { Box, BoxProps } from 'nft/components/Box'
 import { useIsMobile } from 'nft/hooks'
 import { ForwardedRef, forwardRef } from 'react'
+import { Z_INDEX } from 'theme/zIndex'
 
 import * as styles from './NavDropdown.css'
 
 export const NavDropdown = forwardRef((props: BoxProps, ref: ForwardedRef<HTMLElement>) => {
   const isMobile = useIsMobile()
-  return <Box ref={ref} className={isMobile ? styles.mobileNavDropdown : styles.NavDropdown} {...props} />
+  return (
+    <Box
+      ref={ref}
+      style={{ zIndex: Z_INDEX.modal }}
+      className={isMobile ? styles.mobileNavDropdown : styles.NavDropdown}
+      {...props}
+    />
+  )
 })
 
 NavDropdown.displayName = 'NavDropdown'

src/pages/Landing/index.tsx

@@ -32,7 +32,7 @@ const Gradient = styled.div<{ isDarkMode: boolean }>`
     isDarkMode
       ? 'linear-gradient(rgba(8, 10, 24, 0) 0%, rgb(8 10 24 / 100%) 45%)'
       : 'linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255 255 255 /100%) 45%)'};
-  z-index: ${Z_INDEX.dropdown};
+  z-index: ${Z_INDEX.under_dropdown};
   pointer-events: none;
 `
 
@@ -55,7 +55,7 @@ const ContentContainer = styled.div<{ isDarkMode: boolean }>`
   max-width: min(720px, 90%);
   position: sticky;
   bottom: 0;
-  z-index: ${Z_INDEX.dropdown};
+  z-index: ${Z_INDEX.under_dropdown};
   padding: 32px 0 80px;
   transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} opacity`};
 

src/theme/zIndex.ts

@@ -3,6 +3,7 @@
 export enum Z_INDEX {
   deprecated_zero = 0,
   deprecated_content = 1,
+  under_dropdown = 990,
   dropdown = 1000,
   sticky = 1020,
   fixed = 1030,