From f46b6a069769d2818836e06d9b372e9439ce58ec Mon Sep 17 00:00:00 2001
From: lynn <41491154+lynnshaoyu@users.noreply.github.com>
Date: Tue, 6 Sep 2022 17:18:54 -0400
Subject: [PATCH] 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        | 3 ++-
 src/components/WalletDropdown/index.tsx | 2 +-
 src/pages/App.tsx                       | 3 ++-
 src/theme/components.tsx                | 4 +++-
 src/theme/index.tsx                     | 2 ++
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
index 3779a2a7c3..fa7adf3551 100644
--- a/src/components/Popover/index.tsx
+++ b/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;
diff --git a/src/components/WalletDropdown/index.tsx b/src/components/WalletDropdown/index.tsx
index 17835eb938..cee3ce4bd1 100644
--- a/src/components/WalletDropdown/index.tsx
+++ b/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};
 
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index ab39b85199..2280981954 100644
--- a/src/pages/App.tsx
+++ b/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`
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index eef1484c6f..e6e294f072 100644
--- a/src/theme/components.tsx
+++ b/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)`
diff --git a/src/theme/index.tsx b/src/theme/index.tsx
index fc22fb450d..d05cbe4752 100644
--- a/src/theme/index.tsx
+++ b/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(