refactor: remove z-index-values and use mui variables

Author: pooriaset

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

@@ -166,7 +166,6 @@ const BuyBox: FC<BuyBoxProps> = ({ product }) => {
           color="primary"
           size="large"
           onClick={handleClickOnAdd}
-          sx={{ minHeight: height }}
         >
           {t('buttons.addToCart')}
         </ButtonWithLoading>
@@ -220,36 +219,39 @@ const BuyBox: FC<BuyBoxProps> = ({ product }) => {
             flexDirection: 'column',
           }}
         >
-          <List>
-            {listItems.map((item) => {
-              return (
-                <>
-                  <ListItem
-                    disablePadding
-                    sx={{
-                      py: 1,
-                    }}
-                  >
-                    <ListItemIcon
+          {!!listItems?.length && (
+            <List>
+              {listItems.map((item) => {
+                return (
+                  <>
+                    <ListItem
+                      disablePadding
                       sx={{
-                        minWidth: 0,
-                        mr: 1,
+                        py: 1,
                       }}
                     >
-                      {item.icon}
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={item.text}
-                      primaryTypographyProps={{
-                        fontSize: (theme) => theme.typography.caption.fontSize,
-                      }}
-                    />
-                  </ListItem>
-                  <Divider />
-                </>
-              );
-            })}
-          </List>
+                      <ListItemIcon
+                        sx={{
+                          minWidth: 0,
+                          mr: 1,
+                        }}
+                      >
+                        {item.icon}
+                      </ListItemIcon>
+                      <ListItemText
+                        primary={item.text}
+                        primaryTypographyProps={{
+                          fontSize: (theme) =>
+                            theme.typography.caption.fontSize,
+                        }}
+                      />
+                    </ListItem>
+                    <Divider />
+                  </>
+                );
+              })}
+            </List>
+          )}
 
           {isMobile && (
             <MobileBuyBox>

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

@@ -6,7 +6,6 @@ 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;
@@ -36,12 +35,9 @@ const ProductTabs: FC<ProductTabsProps> = ({ content, attributes }) => {
     <>
       <Box
         sx={{
-          position: 'sticky',
-          top: 118 + 60,
           borderBottom: 1,
           borderColor: 'divider',
           backgroundColor: (theme) => theme.palette.background.default,
-          zIndex: Z_INDEX_VALUES.productTabs,
         }}
       >
         <Tabs

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

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 
 import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs';
-import { MOBILE_BUY_BOX_HEIGHT } from '@/config/responsive';
 import { getClient } from '@/graphql/clients/serverSideClient';
 import { GET_SINGLE_VARIABLE_PRODUCT_QUERY } from '@/graphql/queries/products';
 import { GetSingleProductQuery } from '@/graphql/types/graphql';
@@ -67,13 +66,7 @@ const Page: FC<PageProps> = async ({ params: { params } }) => {
         selectedVariantId: null,
       }}
     >
-      <Grid
-        container
-        spacing={2}
-        sx={{
-          pb: { xs: `${MOBILE_BUY_BOX_HEIGHT}px` },
-        }}
-      >
+      <Grid container spacing={2}>
         <Grid item md={5} xs={12}>
           <ProductGallery
             thumbnail={product.image}
@@ -115,13 +108,12 @@ const Page: FC<PageProps> = async ({ params: { params } }) => {
             </CardContent>
           </Card>
         </Grid>
-        <Grid item xs={12}>
-          <ProductTabs
-            content={product.content}
-            attributes={product.customAttributes?.nodes}
-          />
-        </Grid>
       </Grid>
+
+      <ProductTabs
+        content={product.content}
+        attributes={product.customAttributes?.nodes}
+      />
     </ProductProvider>
   );
 };

src/app/[locale]/(main)/(container)/products/[...params]/providers/ProductProvider.tsx

@@ -1,6 +1,9 @@
 'use client';
 
-import React, { FC, PropsWithChildren, useState } from 'react';
+import { MOBILE_BUY_BOX_HEIGHT } from '@/config/responsive';
+import { useAppContext } from '@/hooks/useAppContext';
+import { Box } from '@mui/material';
+import { FC, PropsWithChildren, useState } from 'react';
 import {
   IProductContext,
   SelectedVariantId,
@@ -22,14 +25,22 @@ const ProductProvider: FC<PropsWithChildren<ProductProviderProps>> = ({
     setSelectedVariantId(+value);
   };
 
+  const { isMobile } = useAppContext();
+
   return (
     <productContext.Provider
       value={{
         selectedVariantId,
         handleChangeSelectedVariantId,
       }}
     >
-      {children}
+      <Box
+        sx={{
+          paddingBottom: isMobile ? `${MOBILE_BUY_BOX_HEIGHT}px` : null,
+        }}
+      >
+        {children}
+      </Box>
     </productContext.Provider>
   );
 };

src/components/Dialog/Dialog.tsx

@@ -1,3 +1,4 @@
+import { useAppContext } from '@/hooks/useAppContext';
 import { Close } from '@mui/icons-material';
 import { Box, DialogActions, IconButton } from '@mui/material';
 import MuiDialog, {
@@ -10,8 +11,6 @@ import ButtonWithLoading, {
   type ButtonWithLoadingProps,
 } 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;
@@ -43,15 +42,6 @@ const Dialog: FC<DialogProps> = ({
             : {}),
         },
       }}
-      slotProps={{
-        root: isMobile
-          ? {
-              style: {
-                zIndex: Z_INDEX_VALUES.dialog,
-              },
-            }
-          : {},
-      }}
       sx={{
         ...props.sx,
         ...(isMobile

src/components/Footer/components/MobileFooter.tsx

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

src/components/Header/Header.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Z_INDEX_VALUES } from '@/config/responsive';
 import { AppBar } from '@mui/material';
 import { FC, ReactNode } from 'react';
 
@@ -18,7 +17,7 @@ const Header: FC<HeaderProps> = ({ children }) => {
         borderColor: (theme) => theme.palette.divider,
         position: 'sticky',
         top: 0,
-        zIndex: Z_INDEX_VALUES.siteHeader,
+        zIndex: (theme) => theme.zIndex.appBar,
       }}
     >
       {children}

src/components/common/ProgressBar.tsx

@@ -1,6 +1,5 @@
 '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';
@@ -32,7 +31,7 @@ const ProgressBar = () => {
         top: 0,
         left: 0,
         right: 0,
-        zIndex: Z_INDEX_VALUES.progressBar,
+        zIndex: (theme) => theme.zIndex.appBar + 1,
       }}
     >
       <LinearProgress variant="determinate" value={progress} />

src/config/responsive.ts

@@ -1,12 +1,2 @@
 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,
-  mobileBuyBox: 1289,
-  variantSelectorMenu: 10,
-  productTabs: 9,
-};
+export const MOBILE_BUY_BOX_HEIGHT = MOBILE_FOOTER_HEIGHT * 1.3;