fix: rendering issues with modal/header (#4636)

* fix overlay issue with modal

* fix z index

src/components/Modal/index.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { animated, useSpring, useTransition } from 'react-spring'
 import { useGesture } from 'react-use-gesture'
 import styled, { css } from 'styled-components/macro'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { isMobile } from '../../utils/userAgent'
 
@@ -11,7 +12,7 @@ const AnimatedDialogOverlay = animated(DialogOverlay)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boolean }>`
   &[data-reach-dialog-overlay] {
-    z-index: 2;
+    z-index: ${Z_INDEX.modalBackdrop};
     background-color: transparent;
     overflow: hidden;
 

src/components/Popover/index.tsx

@@ -4,10 +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'
+import { Z_INDEX } from 'theme/zIndex'
 
 const PopoverContainer = styled.div<{ show: boolean }>`
-  z-index: ${Z_INDEX.absoluteTop};
+  z-index: ${Z_INDEX.popover};
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   opacity: ${(props) => (props.show ? 1 : 0)};
   transition: visibility 150ms linear, opacity 150ms linear;

src/components/Popups/SurveyPopup.tsx

@@ -7,7 +7,8 @@ import { useEffect } from 'react'
 import { MessageCircle, X } from 'react-feather'
 import { useShowSurveyPopup } from 'state/user/hooks'
 import styled, { useTheme } from 'styled-components/macro'
-import { ExternalLink, ThemedText, Z_INDEX } from 'theme'
+import { ExternalLink, ThemedText } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
 
 import BGImage from '../../assets/images/survey-orb.svg'
 

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -10,7 +10,8 @@ import { RoutingDiagramEntry } from 'components/swap/SwapRoute'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { Box } from 'rebass'
 import styled from 'styled-components/macro'
-import { ThemedText, Z_INDEX } from 'theme'
+import { ThemedText } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { ReactComponent as DotLine } from '../../assets/svg/dot_line.svg'
 import { MouseoverTooltip } from '../Tooltip'

src/components/Tokens/TokenDetails/ShareButton.tsx

@@ -5,9 +5,10 @@ import { Twitter } from 'react-feather'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components/macro'
-import { ClickableStyle, CopyHelperRefType, Z_INDEX } from 'theme'
+import { ClickableStyle, CopyHelperRefType } from 'theme'
 import { colors } from 'theme/colors'
 import { opacify } from 'theme/utils'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { ReactComponent as ShareIcon } from '../../../assets/svg/share.svg'
 import { CopyHelper } from '../../../theme'

src/components/WalletDropdown/index.tsx

 import { useState } from 'react'
 import styled from 'styled-components/macro'
-import { Z_INDEX } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { useModalIsOpen } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -9,7 +9,8 @@ import Modal from 'components/Modal'
 import { AutoRow, RowBetween } from 'components/Row'
 import { useState } from 'react'
 import styled from 'styled-components/macro'
-import { CloseIcon, ExternalLink, ThemedText, Z_INDEX } from 'theme'
+import { CloseIcon, ExternalLink, ThemedText } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { useUnsupportedTokens } from '../../hooks/Tokens'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'

src/components/swap/styleds.tsx

@@ -4,7 +4,7 @@ import { ReactNode } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import styled, { css } from 'styled-components/macro'
-import { Z_INDEX } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { AutoColumn } from '../Column'
 

src/pages/App.tsx

@@ -12,8 +12,8 @@ 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 { Z_INDEX } from 'theme/zIndex'
 import { getBrowser } from 'utils/browser'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
@@ -74,7 +74,7 @@ const HeaderWrapper = styled.div`
   justify-content: space-between;
   position: fixed;
   top: 0;
-  z-index: ${Z_INDEX.absoluteTop};
+  z-index: ${Z_INDEX.sticky};
 `
 
 const Marginer = styled.div`

src/pages/AppBody.tsx

 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import React from 'react'
 import styled from 'styled-components/macro'
-import { Z_INDEX } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
 
 export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string; redesignFlag?: boolean }>`
   position: relative;

src/theme/components.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-feather'
 import { Link } from 'react-router-dom'
 import styled, { css, keyframes } from 'styled-components/macro'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { ReactComponent as TooltipTriangle } from '../assets/svg/tooltip_triangle.svg'
 import { anonymizeLink } from '../utils/anonymizeLink'
@@ -208,8 +209,6 @@ export function ExternalLinkIcon({
   )
 }
 
-export const MAX_Z_INDEX = 9999
-
 const ToolTipWrapper = styled.div<{ isCopyContractTooltip?: boolean }>`
   display: flex;
   flex-direction: column;
@@ -217,7 +216,7 @@ const ToolTipWrapper = styled.div<{ isCopyContractTooltip?: boolean }>`
   position: ${({ isCopyContractTooltip }) => (isCopyContractTooltip ? 'relative' : 'absolute')};
   right: ${({ isCopyContractTooltip }) => isCopyContractTooltip && '50%'};
   transform: translate(5px, 32px);
-  z-index: ${MAX_Z_INDEX};
+  z-index: ${Z_INDEX.tooltip};
 `
 
 const StyledTooltipTriangle = styled(TooltipTriangle)`

src/theme/index.tsx

@@ -13,7 +13,6 @@ 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'
 
@@ -56,22 +55,6 @@ const opacities = {
   click: 0.4,
 }
 
-// Migrating to a standard z-index system https://getbootstrap.com/docs/5.0/layout/z-index/
-// Please avoid using deprecated numbers
-export enum Z_INDEX {
-  deprecated_zero = 0,
-  deprecated_content = 1,
-  dropdown = 1000,
-  sticky = 1020,
-  fixed = 1030,
-  modalBackdrop = 1040,
-  offcanvas = 1050,
-  modal = 1060,
-  popover = 1070,
-  tooltip = 1080,
-  absoluteTop = MAX_Z_INDEX,
-}
-
 const deprecated_mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } = Object.keys(
   MEDIA_WIDTHS
 ).reduce((accumulator, size) => {

src/theme/zIndex.tsx

+// Migrating to a standard z-index system https://getbootstrap.com/docs/5.0/layout/z-index/
+// Please avoid using deprecated numbers
+export enum Z_INDEX {
+  deprecated_zero = 0,
+  deprecated_content = 1,
+  dropdown = 1000,
+  sticky = 1020,
+  fixed = 1030,
+  modalBackdrop = 1040,
+  offcanvas = 1050,
+  modal = 1060,
+  popover = 1070,
+  tooltip = 1080,
+}