chore: centralize z-index of elements

Author: pooriaset

src/app/[locale]/(main)/(container)/cart/page.tsx

@@ -30,6 +30,7 @@ import Loading from '../loading';
 import CheckoutBox, { CheckoutBoxProps } from './components/CheckoutBox';
 import Header from './components/Header';
 import EmptyCart from './components/EmptyCart';
+import { Z_INDEX_VALUES } from '@/config/responsive';
 
 const Page = () => {
   const t = useTranslations();
@@ -191,7 +192,7 @@ const Page = () => {
             sx={{
               position: 'sticky',
               top: 196,
-              zIndex: 1299,
+              zIndex: Z_INDEX_VALUES.cartPageDetailsBox,
             }}
           >
             <Card variant="outlined">

src/app/[locale]/(main)/(container)/products/[...params]/components/MobileBuyBox.tsx

@@ -1,6 +1,7 @@
 import {
   MOBILE_BUY_BOX_HEIGHT,
   MOBILE_FOOTER_HEIGHT,
+  Z_INDEX_VALUES,
 } from '@/config/responsive';
 import { Stack } from '@mui/material';
 import { FC, PropsWithChildren } from 'react';
@@ -20,6 +21,7 @@ const MobileBuyBox: FC<PropsWithChildren<MobileBuyBoxProps>> = ({
         backgroundColor: (theme) => theme.palette.background.default,
         boxShadow: (theme) => theme.shadows[2],
         px: 3,
+        zIndex: Z_INDEX_VALUES.mobileBuyBox,
       }}
       spacing={1}
       alignItems="center"

src/app/[locale]/(main)/(container)/products/[...params]/components/ProductTabs.tsx

@@ -6,6 +6,7 @@ import { Box, Tab, Tabs, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { FC, SyntheticEvent, useState } from 'react';
 import { Product } from '../../types/common';
+import { Z_INDEX_VALUES } from '@/config/responsive';
 
 export interface ProductTabsProps {
   content?: string | null;
@@ -40,7 +41,7 @@ const ProductTabs: FC<ProductTabsProps> = ({ content, attributes }) => {
           borderBottom: 1,
           borderColor: 'divider',
           backgroundColor: (theme) => theme.palette.background.default,
-          zIndex: 1000,
+          zIndex: Z_INDEX_VALUES.productTabs,
         }}
       >
         <Tabs

src/components/Dialog/Dialog.tsx

@@ -11,6 +11,7 @@ import ButtonWithLoading, {
 } from '../common/ButtonWithLoading';
 import DialogTransition from '../common/DialogTransition';
 import { useAppContext } from '@/hooks/useAppContext';
+import { Z_INDEX_VALUES } from '@/config/responsive';
 
 export interface DialogProps extends MuiDialogProps {
   dialogContentProps?: DialogContentProps;
@@ -46,7 +47,7 @@ const Dialog: FC<DialogProps> = ({
         root: isMobile
           ? {
               style: {
-                zIndex: 2000,
+                zIndex: Z_INDEX_VALUES.dialog,
               },
             }
           : {},

src/components/Footer/components/MobileFooter.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Z_INDEX_VALUES } from '@/config/responsive';
 import { cartAtom } from '@/store/atoms';
 import {
   AccountCircleOutlined,
@@ -68,7 +69,7 @@ const MobileFooter = () => {
         position: 'fixed',
         bottom: 0,
         boxShadow: (theme) => theme.shadows[3],
-        zIndex: 1290,
+        zIndex: Z_INDEX_VALUES.mobileFooter,
       }}
     >
       <MuiBottomNavigation

src/components/Header/Header.tsx

@@ -8,6 +8,7 @@ import { DesktopHeader, MobileHeader } from './components';
 import TopBanner, {
   TopBannerProps,
 } from '@/components/Header/components/TopBanner';
+import { Z_INDEX_VALUES } from '@/config/responsive';
 
 export interface HeaderProps {
   topBanner?: TopBannerProps['data'];
@@ -23,7 +24,7 @@ const Header: FC<HeaderProps> = ({ topBanner }) => {
         borderColor: (theme) => theme.palette.divider,
         position: 'sticky',
         top: 0,
-        zIndex: 1299,
+        zIndex: Z_INDEX_VALUES.siteHeader,
       }}
     >
       {topBanner && <TopBanner data={topBanner} />}

src/components/VariantSelector/VariantSelector.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Z_INDEX_VALUES } from '@/config/responsive';
 import { Box } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
@@ -43,7 +44,7 @@ const VariantSelector: FC<VariantSelectorProps> = ({
           MenuProps={{
             disableScrollLock: true,
             sx: {
-              zIndex: 10,
+              zIndex: Z_INDEX_VALUES.variantSelectorMenu,
             },
           }}
         >

src/components/common/ProgressBar.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Z_INDEX_VALUES } from '@/config/responsive';
 import Box from '@mui/material/Box';
 import LinearProgress from '@mui/material/LinearProgress';
 import { useEffect, useState } from 'react';
@@ -31,7 +32,7 @@ const ProgressBar = () => {
         top: 0,
         left: 0,
         right: 0,
-        zIndex: 1300,
+        zIndex: Z_INDEX_VALUES.progressBar,
       }}
     >
       <LinearProgress variant="determinate" value={progress} />

src/config/responsive.ts

@@ -1,2 +1,13 @@
 export const MOBILE_FOOTER_HEIGHT = 56;
 export const MOBILE_BUY_BOX_HEIGHT = MOBILE_FOOTER_HEIGHT * 1.8;
+
+export const Z_INDEX_VALUES = {
+  dialog: 2000,
+  progressBar: 1300,
+  siteHeader: 1299,
+  mobileFooter: 1290,
+  cartPageDetailsBox: 1298,
+  mobileBuyBox: 1289,
+  productTabs: 1288,
+  variantSelectorMenu: 10,
+};