fix(tooltip): styles

Signed-off-by: Sudhanshu Dasgupta <[email protected]>

src/custom/ResponsiveDataTable.tsx

@@ -1,8 +1,9 @@
 import { Theme, ThemeProvider, createTheme, styled } from '@mui/material';
 import MUIDataTable from 'mui-datatables';
 import React, { useCallback } from 'react';
-import { IconButton, Menu, MenuItem } from '../base';
-import { DropDownIcon } from '../icons';
+import { Menu, MenuItem } from '../base';
+import { EllipsisIcon } from '../icons/Ellipsis';
+import TooltipIcon from './TooltipIcon';
 
 export const IconWrapper = styled('div')<{ disabled?: boolean }>(({ disabled = false }) => ({
   cursor: disabled ? 'not-allowed' : 'pointer',
@@ -22,7 +23,7 @@ export const DataTableEllipsisMenu: React.FC<{
   actionsList: NonNullable<Column['options']>['actionsList'];
 }> = ({ actionsList }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
@@ -31,9 +32,7 @@ export const DataTableEllipsisMenu: React.FC<{
 
   return (
     <>
-      <IconButton onClick={handleClick}>
-        <DropDownIcon />
-      </IconButton>
+      <TooltipIcon title="View Actions" onClick={handleClick} icon={<EllipsisIcon />} arrow />
       <Menu
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}

src/custom/TooltipIcon.tsx

@@ -1,7 +1,7 @@
 import { SxProps } from '@mui/material/styles';
 import React from 'react';
 import { IconButton } from '../base/IconButton';
-import Tooltip from '../patches/Tooltip';
+import { CustomTooltip } from './CustomTooltip';
 
 interface TooltipIconProps {
   title: string;
@@ -19,7 +19,7 @@ export function TooltipIcon({
   arrow = false
 }: TooltipIconProps): JSX.Element {
   return (
-    <Tooltip title={title} arrow={arrow}>
+    <CustomTooltip title={title} arrow={arrow}>
       <IconButton
         onClick={onClick}
         sx={{
@@ -35,7 +35,7 @@ export function TooltipIcon({
       >
         {icon}
       </IconButton>
-    </Tooltip>
+    </CustomTooltip>
   );
 }
 

src/icons/Ellipsis/Ellipsisicon.tsx

@@ -0,0 +1,23 @@
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const EllipsisIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}: IconProps): JSX.Element => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      width={width}
+      height={height}
+      fill={props.fill || 'currentColor'}
+      {...props}
+    >
+      <path d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z" />
+    </svg>
+  );
+};
+
+export default EllipsisIcon;

src/icons/Ellipsis/index.tsx

@@ -0,0 +1 @@
+export { default as EllipsisIcon } from './Ellipsisicon';