feat: standardize font family to inherit across multiple components

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

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/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: (