fix: ensure nav bar goes above all other components when scrolling (#4576)

* fix nav bar below other components issue

* respond to comments

src/components/Popover/index.tsx

@@ -4,9 +4,10 @@ import useInterval from 'lib/hooks/useInterval'
 import React, { useCallback, useMemo, useState } from 'react'
 import { usePopper } from 'react-popper'
 import styled from 'styled-components/macro'
+import { Z_INDEX } from 'theme'
 
 const PopoverContainer = styled.div<{ show: boolean }>`
-  z-index: 9999;
+  z-index: ${Z_INDEX.absoluteTop};
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   opacity: ${(props) => (props.show ? 1 : 0)};
   transition: visibility 150ms linear, opacity 150ms linear;

src/components/WalletDropdown/index.tsx

@@ -38,7 +38,7 @@ export enum MenuState {
 
 const WalletDropdownWrapper = styled.div`
   position: absolute;
-  top: 65px;
+  top: 72px;
   right: 20px;
   z-index: ${Z_INDEX.dropdown};
 

src/pages/App.tsx

@@ -12,6 +12,7 @@ import { lazy, Suspense, useEffect } from 'react'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import { useIsDarkMode } from 'state/user/hooks'
 import styled from 'styled-components/macro'
+import { Z_INDEX } from 'theme'
 import { SpinnerSVG } from 'theme/components'
 import { getBrowser } from 'utils/browser'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
@@ -73,7 +74,7 @@ const HeaderWrapper = styled.div`
   justify-content: space-between;
   position: fixed;
   top: 0;
-  z-index: 2;
+  z-index: ${Z_INDEX.absoluteTop};
 `
 
 const Marginer = styled.div`

src/theme/components.tsx

@@ -212,6 +212,8 @@ export function ExternalLinkIcon({
   )
 }
 
+export const MAX_Z_INDEX = 9999
+
 const ToolTipWrapper = styled.div<{ isCopyContractTooltip?: boolean }>`
   display: flex;
   flex-direction: column;
@@ -219,7 +221,7 @@ const ToolTipWrapper = styled.div<{ isCopyContractTooltip?: boolean }>`
   position: ${({ isCopyContractTooltip }) => (isCopyContractTooltip ? 'relative' : 'absolute')};
   right: ${({ isCopyContractTooltip }) => isCopyContractTooltip && '50%'};
   transform: translate(5px, 32px);
-  z-index: 9999;
+  z-index: ${MAX_Z_INDEX};
 `
 
 const StyledTooltipTriangle = styled(TooltipTriangle)`

src/theme/index.tsx

@@ -13,6 +13,7 @@ import { darkTheme } from '../nft/themes/darkTheme'
 import { lightTheme } from '../nft/themes/lightTheme'
 import { useIsDarkMode } from '../state/user/hooks'
 import { colors as ColorsPalette, colorsDark, colorsLight } from './colors'
+import { MAX_Z_INDEX } from './components'
 import { AllColors, Colors, ThemeColors } from './styled'
 import { opacify } from './utils'
 
@@ -63,6 +64,7 @@ export enum Z_INDEX {
   modal = 1060,
   popover = 1070,
   tooltip = 1080,
+  absoluteTop = MAX_Z_INDEX,
 }
 
 const deprecated_mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } = Object.keys(