Add zIndex home page map

oasisprotocol · Mar 3, 2023 · 8022fce · 8022fce
1 parent 75ec499
commit 8022fce
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/app/pages/HomePage/GraphTooltip/GraphTooltipMobile.tsx b/src/app/pages/HomePage/GraphTooltip/GraphTooltipMobile.tsx
@@ -13,13 +13,14 @@ import { useNavigate } from 'react-router-dom'
 import { RouteUtils } from '../../../utils/route-utils'
 import { ParaTime } from '../../../../config'
 import * as React from 'react'
+import { zIndexHomePage } from '../index'
 
 export const MobileBackdrop = styled(Box)(() => ({
   position: 'fixed',
   inset: 0,
   backgroundColor: COLORS.black,
   opacity: 0.3,
-  zIndex: 4,
+  zIndex: zIndexHomePage.mobileTooltip,
 }))
 
 export const MobileGraphTooltip = styled(Box)(({ theme }) => ({
@@ -28,7 +29,7 @@ export const MobileGraphTooltip = styled(Box)(({ theme }) => ({
   left: 0,
   right: 0,
   height: 120,
-  zIndex: 4,
+  zIndex: zIndexHomePage.mobileTooltip,
   '> button': {
     position: 'fixed',
     right: theme.spacing(2),

diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx
@@ -17,6 +17,13 @@ import { ParaTimeSelectorStep } from './ParaTimeSelector/types'
 import { MobileTooltipProvider, useMobileTooltip } from './providers/MobileTooltipProvider'
 import { GraphTooltipMobile } from './GraphTooltip/GraphTooltipMobile'
 
+export const zIndexHomePage = {
+  paraTimeSelector: 1,
+  searchInput: 2,
+  logo: 3,
+  mobileTooltip: 4,
+}
+
 const HomepageLayout = styled(Box)(({ theme }) => ({
   position: 'relative',
   display: 'flex',
@@ -51,7 +58,7 @@ const Content = styled(Box)(({ theme }) => ({
 }))
 
 const LogotypeBox = styled(Box)(({ theme }) => ({
-  zIndex: 3,
+  zIndex: zIndexHomePage.logo,
   marginBottom: 40,
   textAlign: 'center',
   marginTop: 60,
@@ -62,7 +69,7 @@ const LogotypeBox = styled(Box)(({ theme }) => ({
 }))
 
 const SearchInputContainer = styled(Box)(({ theme }) => ({
-  zIndex: 2,
+  zIndex: zIndexHomePage.searchInput,
   width: '100%',
   [theme.breakpoints.up('md')]: {
     width: 'auto',
@@ -133,7 +140,7 @@ const HomePageCmp: FC = () => {
               </Box>
             )}
           </SearchInputContainer>
-          <Box sx={{ zIndex: 1 }}>
+          <Box sx={{ zIndex: zIndexHomePage.paraTimeSelector }}>
             <ParaTimeSelector step={step} setStep={setStep} disabled={searchHasFocus} />
           </Box>
         </Content>