ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: landing page overlay occlusion of Z_INDEX.dropdown

Browse Source
This commit is contained in:
Jordan Frankfurt 2022-12-19 11:03:03 -06:00
parent cb7132ee17
commit d14c49df0d
3 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/NavBar/NavDropdown.css.ts
View File

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

10
src/components/NavBar/NavDropdown.tsx
View File

@ -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'

4
src/pages/Landing/index.tsx
View File

@ -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.dropdown - 1};
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.dropdown - 1};
padding: 32px 0 80px;
transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} opacity`};