fix: theme issue

Signed-off-by: Amit Amrutiya <[email protected]>
layer5io · Nov 11, 2024 · 8cf6f9d · 8cf6f9d
1 parent a848b33
commit 8cf6f9d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 17 deletions.
diff --git a/src/custom/CatalogDesignTable/columnConfig.tsx b/src/custom/CatalogDesignTable/columnConfig.tsx
@@ -84,7 +84,6 @@ export const createDesignColumns = ({
 }: ColumnConfigProps): MUIDataTableColumn[] => {
   const cleanedType = type?.replace('my-', '').replace(/s$/, '');
   const getColumnValue = (tableMeta: MUIDataTableMeta, targetColumn: string): any => {
-    console.log('amitas targetColumn', tableMeta);
     //@ts-ignore
     const rowData = tableMeta.tableData[tableMeta.rowIndex] as Pattern;
     return (rowData as any)[targetColumn] || '';
@@ -290,13 +289,12 @@ export const createDesignColumns = ({
               }'s design "${rowData?.name}" on Layer5's Catalog`;
             }
           }
-
           const baseActions: ActionItem[] = [
             {
               title: 'Clone',
               onClick: () => handleCloneClick(rowData),
               disabled: isCloneDisabled,
-              icon: <CopyIcon width={24} height={24} fill={theme.palette.charcoal} />
+              icon: <CopyIcon width={24} height={24} fill={theme.palette.text.primary} />
             },
             {
               title: 'Download',
@@ -305,12 +303,12 @@ export const createDesignColumns = ({
                   ? downloadFilter(rowData.id, rowData.name)
                   : downloadYaml(rowData.pattern_file, rowData.name);
               },
-              icon: <DownloadIcon width={24} height={24} fill={theme.palette.charcoal} />
+              icon: <DownloadIcon width={24} height={24} fill={theme.palette.text.primary} />
             },
             {
               title: 'Copy Link',
               onClick: () => handleCopyUrl(rowData),
-              icon: <ChainIcon width={'24'} height={'24'} fill={theme.palette.charcoal} />
+              icon: <ChainIcon width={'24'} height={'24'} fill={theme.palette.text.primary} />
             },
             {
               title: 'Share Design via Socials',
@@ -348,7 +346,7 @@ export const createDesignColumns = ({
             {
               title: 'Open in playground',
               onClick: () => handleOpenPlayground(rowData),
-              icon: <KanvasIcon width={24} height={24} primaryFill={theme.palette.charcoal} />
+              icon: <KanvasIcon width={24} height={24} primaryFill={theme.palette.text.primary} />
             }
           ];
           // TODO: make this unbpublish action work for playgroud
@@ -359,14 +357,14 @@ export const createDesignColumns = ({
                   title: 'Unpublish',
                   onClick: () => handleUnpublish(rowData),
                   disabled: isUnpublishDisabled,
-                  icon: <PublishIcon width={24} height={24} fill={theme.palette.charcoal} />
+                  icon: <PublishIcon width={24} height={24} fill={theme.palette.text.primary} />
                 },
                 ...baseActions.slice(2)
               ]
             : baseActions;
 
           //@ts-ignore
-          return <DataTableEllipsisMenu actionsList={actionsList} />;
+          return <DataTableEllipsisMenu actionsList={actionsList} theme={theme} />;
         }
       }
     }

diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
@@ -57,7 +57,7 @@ function CustomTooltip({
       onClick={onClick}
       {...props}
     >
-      {children}
+      <span>{children}</span>
     </Tooltip>
   );
 }

diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx
@@ -4,7 +4,6 @@ import React, { useCallback } from 'react';
 import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
 import { ShareIcon } from '../icons';
 import { EllipsisIcon } from '../icons/Ellipsis';
-import { useTheme } from '../theme';
 import TooltipIcon from './TooltipIcon';
 
 export const IconWrapper = styled('div')<{ disabled?: boolean }>(({ disabled = false }) => ({
@@ -18,7 +17,8 @@ export const IconWrapper = styled('div')<{ disabled?: boolean }>(({ disabled = f
 
 export const DataTableEllipsisMenu: React.FC<{
   actionsList: NonNullable<Column['options']>['actionsList'];
-}> = ({ actionsList }) => {
+  theme?: Theme;
+}> = ({ actionsList, theme }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [isSocialShareOpen, setIsSocialShareOpen] = React.useState(false);
 
@@ -41,13 +41,13 @@ export const DataTableEllipsisMenu: React.FC<{
       handleClose();
     }
   };
-  const theme = useTheme();
+
   return (
     <>
       <TooltipIcon
         title="View Actions"
         onClick={handleClick}
-        icon={<EllipsisIcon fill={theme.palette.text.default} />}
+        icon={<EllipsisIcon fill={theme?.palette.text.primary ?? 'black'} />}
         arrow
       />
       <Menu
@@ -57,7 +57,7 @@ export const DataTableEllipsisMenu: React.FC<{
         onClose={handleClose}
         sx={{
           '& .MuiPaper-root': {
-            backgroundColor: theme.palette.background.surfaces
+            backgroundColor: theme?.palette.background.default ?? 'white'
           }
         }}
       >
@@ -75,9 +75,15 @@ export const DataTableEllipsisMenu: React.FC<{
                   disabled={action.disabled}
                 >
                   <ListItemIcon>
-                    <ShareIcon width={24} height={24} />
+                    <ShareIcon
+                      width={24}
+                      height={24}
+                      fill={theme?.palette.text.primary ?? 'black'}
+                    />
                   </ListItemIcon>
-                  <ListItemText>{action.title}</ListItemText>
+                  <ListItemText sx={{ color: theme?.palette.text.primary ?? 'black' }}>
+                    {action.title}
+                  </ListItemText>
                 </MenuItem>,
                 <Collapse
                   key={`${index}-collapse`}
@@ -100,7 +106,9 @@ export const DataTableEllipsisMenu: React.FC<{
                     disabled={action.disabled}
                   >
                     <ListItemIcon>{action.icon}</ListItemIcon>
-                    <ListItemText>{action.title}</ListItemText>
+                    <ListItemText sx={{ color: theme?.palette.text.primary ?? 'black' }}>
+                      {action.title}
+                    </ListItemText>
                   </MenuItem>
                 </IconWrapper>
               );