feat: replace Tooltip with CustomTooltip and update icon colors in SocialSharePopper

Signed-off-by: Amit Amrutiya <[email protected]>

Author: amitamrutiya

src/custom/CatalogDetail/SocialSharePopper.tsx

@@ -1,9 +1,10 @@
-import { Box, IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
+import { Box, IconButton, Menu, MenuItem } from '@mui/material';
 import React, { useState } from 'react';
 import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
 import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
+import { CustomTooltip } from '../CustomTooltip';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { CopyShareIconWrapper, VisibilityChip } from './style';
 
@@ -50,23 +51,23 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
         </VisibilityChip>
 
         {details?.visibility !== 'private' && (
-          <Tooltip title="Copy Link" placement="top" arrow>
+          <CustomTooltip title="Copy Link" placement="top" arrow>
             <IconButton
               sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
               onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
             >
-              <ChainIcon height={'24'} width={'24'} />
+              <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
             </IconButton>
-          </Tooltip>
+          </CustomTooltip>
         )}
 
         {(details?.visibility === 'published' || details?.visibility === 'public') && (
           <>
-            <Tooltip title={title} placement="top" arrow>
+            <CustomTooltip title={title} placement="top" arrow>
               <IconButton sx={{ borderRadius: '0.1rem', padding: '0.5rem' }} onClick={handleClick}>
-                <ShareIcon height={24} width={22} />
+                <ShareIcon height={24} width={22} fill={theme.palette.icon.secondary} />
               </IconButton>
-            </Tooltip>
+            </CustomTooltip>
 
             <Menu
               anchorEl={anchorEl}

src/custom/CatalogDetail/style.tsx

@@ -172,13 +172,13 @@ export const MetricsType = styled('div')(({ theme }) => ({
   letterSpacing: '0.15px',
   lineHeight: '1.5',
   textTransform: 'lowercase',
-  color: theme.palette.background.supplementary,
+  color: theme.palette.icon.secondary,
   [' @media (max-width: 285px)']: {
     fontSize: '0.86rem'
   }
 }));
 export const MetricsData = styled('div')(({ theme }) => ({
-  color: theme.palette.background.supplementary,
+  color: theme.palette.icon.secondary,
   fontSize: '1.2rem',
   fontWeight: 'bold',
   lineHeight: '1.5'