Merge pull request #819 from amitamrutiya/update-cell

fix color and font related issue for the catalog modal

Author: amitamrutiya

src/custom/CatalogDetail/CollapsibleSection.tsx

@@ -38,7 +38,12 @@ const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
         <InfoTooltip helpText={tooltip} />
         {isOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
       </SideTitleButton>
-      <Collapse sx={{ width: '100%' }} in={isOpen} timeout="auto" unmountOnExit>
+      <Collapse
+        sx={{ width: '100%', fontFamily: 'inherit' }}
+        in={isOpen}
+        timeout="auto"
+        unmountOnExit
+      >
         {items && items.length > 0 ? (
           <List component="div" sx={{ width: '100%', padding: '0.5rem' }} disablePadding>
             {items?.map(renderItem)}
@@ -50,6 +55,9 @@ const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
               opacity: 0.8,
               padding: '7px'
             }}
+            primaryTypographyProps={{
+              fontFamily: 'inherit'
+            }}
             primary={emptyState}
           />
         )}

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'

src/custom/InputSearchField/InputSearchField.tsx

@@ -127,6 +127,11 @@ const InputSearchField: React.FC<InputSearchFieldProps> = ({
             error={!!error}
             helperText={error}
             fullWidth
+            InputLabelProps={{
+              style: {
+                fontFamily: 'inherit'
+              }
+            }}
             InputProps={{
               ...params.InputProps,
               endAdornment: (

src/custom/Markdown/style.tsx

@@ -7,7 +7,8 @@ export const StyledMarkdown = styled('a')(({ theme }) => ({
   '&:hover': {
     textDecoration: 'underline'
   },
-  cursor: 'pointer'
+  cursor: 'pointer',
+  fontFamily: 'inherit'
 }));
 
 // anchor style for notifications markdown content
@@ -28,31 +29,38 @@ export const StyledMarkdownP = styled('p')(({ theme }) => ({
 
 export const StyledMarkdownTooltipP = styled('p')(({ theme }) => ({
   color: theme.palette.text.constant?.white || text.inverse,
-  marginBlock: '0px'
+  marginBlock: '0px',
+  fontFamily: 'inherit'
 }));
 
 export const StyledMarkdownH1 = styled('h1')(({ theme }) => ({
-  color: theme.palette.text.default
+  color: theme.palette.text.default,
+  fontFamily: 'inherit'
 }));
 
 export const StyledMarkdownH2 = styled('h2')(({ theme }) => ({
-  color: theme.palette.text.default
+  color: theme.palette.text.default,
+  fontFamily: 'inherit'
 }));
 
 export const StyledMarkdownH3 = styled('h3')(({ theme }) => ({
-  color: theme.palette.text.default
+  color: theme.palette.text.default,
+  fontFamily: 'inherit'
 }));
 
 export const StyledMarkdownH4 = styled('h4')(({ theme }) => ({
-  color: theme.palette.text.default
+  color: theme.palette.text.default,
+  fontFamily: 'inherit'
 }));
 
 export const StyledMarkdownH5 = styled('h5')(({ theme }) => ({
-  color: theme.palette.text.default
+  color: theme.palette.text.default,
+  fontFamily: 'inherit'
 }));
 
 export const StyledMarkdownH6 = styled('h6')(({ theme }) => ({
-  color: theme.palette.text.default
+  color: theme.palette.text.default,
+  fontFamily: 'inherit'
 }));
 
 export const StyledMarkdownBlockquote = styled('blockquote')(({ theme }) => ({
@@ -67,22 +75,26 @@ export const StyledMarkdownUl = styled('ul')(({ theme }) => ({
 
 export const StyledMarkdownLi = styled('li')(({ theme }) => ({
   color: theme.palette.text.default,
-  ...theme.typography.textB1Regular
+  ...theme.typography.textB1Regular,
+  fontFamily: 'inherit'
 }));
 
 export const StyledMarkdownTh = styled('th')(({ theme }) => ({
   color: theme.palette.text.default,
   ...theme.typography.textH3Medium,
-  marginBlock: '0px'
+  marginBlock: '0px',
+  fontFamily: 'inherit'
 }));
 
 export const StyledMarkdownTd = styled('td')(({ theme }) => ({
   color: theme.palette.text.default,
   marginBlock: '0px',
-  ...theme.typography.textB1Regular
+  ...theme.typography.textB1Regular,
+  fontFamily: 'inherit'
 }));
 
 export const StyledMarkdownPre = styled('pre')(({ theme }) => ({
   background: theme.palette.background.code,
-  whiteSpace: 'pre-line'
+  whiteSpace: 'pre-line',
+  fontFamily: 'inherit'
 }));

src/custom/UserSearchField/UserSearchFieldInput.tsx

@@ -194,6 +194,11 @@ const UserSearchField: React.FC<UserSearchFieldProps> = ({
             label={label}
             error={!!error}
             helperText={error}
+            InputLabelProps={{
+              style: {
+                fontFamily: 'inherit'
+              }
+            }}
             InputProps={{
               ...params.InputProps,
               endAdornment: (