fix: styling issue

Signed-off-by: amitamrutiya <[email protected]>

Author: amitamrutiya

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import { MUIDataTableColumn } from 'mui-datatables';
 import { useCallback, useMemo, useRef } from 'react';
 import { PublishIcon } from '../../icons';
-import { CHARCOAL, useTheme } from '../../theme';
+import { CHARCOAL } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
@@ -52,10 +52,8 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
   handleBulkDeleteModal,
   setSearch,
   rowsPerPageOptions = [10, 25, 50, 100],
-  tableBackgroundColor,
   handleBulkpatternsDataUnpublishModal
 }) => {
-  const theme = useTheme();
   const modalRef = useRef<PromptRef>(null);
 
   const formatDate = useCallback((date: string | Date): string => {
@@ -204,13 +202,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
         colViews={colViews}
         tableCols={processedColumns}
         columnVisibility={columnVisibility}
-        backgroundColor={
-          tableBackgroundColor
-            ? tableBackgroundColor
-            : theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : theme.palette.background.secondary
-        }
       />
     </ErrorBoundary>
   );

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -247,7 +247,7 @@ export const createDesignsColumnsConfig = ({
             actionsList.splice(1, 0, publishAction);
           }
 
-          return <DataTableEllipsisMenu actionsList={actionsList} theme={theme} />;
+          return <DataTableEllipsisMenu actionsList={actionsList} />;
         }
       }
     }

src/custom/ResponsiveDataTable.tsx

@@ -1,9 +1,9 @@
-import { Theme, styled } from '@mui/material/styles';
 import MUIDataTable, { MUIDataTableColumn } from 'mui-datatables';
 import React, { useCallback } from 'react';
 import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
 import { ShareIcon } from '../icons';
 import { EllipsisIcon } from '../icons/Ellipsis';
+import { styled, useTheme } from './../theme';
 import { ColView } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
 import { TooltipIcon } from './TooltipIconButton';
 
@@ -20,11 +20,10 @@ export const IconWrapper = styled('div', {
 
 export const DataTableEllipsisMenu: React.FC<{
   actionsList: NonNullable<Column['options']>['actionsList'];
-  theme?: Theme;
-}> = ({ actionsList, theme }) => {
+}> = ({ actionsList }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [isSocialShareOpen, setIsSocialShareOpen] = React.useState(false);
-
+  const theme = useTheme();
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -50,7 +49,7 @@ export const DataTableEllipsisMenu: React.FC<{
       <TooltipIcon
         title="View Actions"
         onClick={handleClick}
-        icon={<EllipsisIcon fill={theme?.palette.icon.default ?? 'black'} />}
+        icon={<EllipsisIcon fill={theme.palette.icon.default} />}
         arrow
       />
       <Menu
@@ -59,9 +58,8 @@ export const DataTableEllipsisMenu: React.FC<{
         open={Boolean(anchorEl)}
         onClose={handleClose}
         sx={{
-          fontFamily: theme?.typography.fontFamily,
           '& .MuiPaper-root': {
-            backgroundColor: theme?.palette.background.card ?? 'white'
+            backgroundColor: theme.palette.background.card
           }
         }}
       >
@@ -73,19 +71,14 @@ export const DataTableEllipsisMenu: React.FC<{
                   key={`${index}-menuitem`}
                   sx={{
                     width: '-webkit-fill-available'
-                    // background: theme.palette.background.surfaces
                   }}
                   onClick={() => handleActionClick(action)}
                   disabled={action.disabled}
                 >
                   <ListItemIcon>
-                    <ShareIcon
-                      width={24}
-                      height={24}
-                      fill={theme?.palette.text.primary ?? 'black'}
-                    />
+                    <ShareIcon width={24} height={24} fill={theme.palette.text.primary} />
                   </ListItemIcon>
-                  <ListItemText sx={{ color: theme?.palette.text.primary ?? 'black' }}>
+                  <ListItemText sx={{ color: theme.palette.text.primary }}>
                     {action.title}
                   </ListItemText>
                 </MenuItem>,
@@ -109,7 +102,7 @@ export const DataTableEllipsisMenu: React.FC<{
                     disabled={action.disabled}
                   >
                     <ListItemIcon>{action.icon}</ListItemIcon>
-                    <ListItemText sx={{ color: theme?.palette.text.primary ?? 'black' }}>
+                    <ListItemText sx={{ color: theme.palette.text.primary }}>
                       {action.title}
                     </ListItemText>
                   </MenuItem>

src/custom/Workspaces/DesignTable.tsx

@@ -249,7 +249,6 @@ const DesignTable: React.FC<DesignTableProps> = ({
             }
             filter={'my-designs'}
             setSearch={setDesignSearch}
-            tableBackgroundColor={theme.palette.background.constant?.table}
           />
         </AccordionDetails>
       </Accordion>