chore: udpate font-family

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/CatalogDetail/CaveatsSection.tsx

@@ -15,7 +15,7 @@ const CaveatsSection: React.FC<CaveatsSectionProps> = ({ details }) => {
         <h2 style={{ margin: '0' }}>CAVEATS AND CONSIDERATIONS</h2>
       </ContentHeading>
       {details?.catalog_data?.pattern_caveats ? (
-        <ContentDetailsText style={{ whiteSpace: 'normal' }}>
+        <ContentDetailsText style={{ whiteSpace: 'normal', fontFamily: 'inherit' }}>
           <RenderMarkdown
             content={decodeURIComponent(details.catalog_data.pattern_caveats || '')}
           />

src/custom/CatalogDetail/ContentClassInfo.tsx

@@ -1,41 +1,64 @@
 import React from 'react';
 import { Box } from '../../base';
+import { CommunityClassIcon, OfficialClassIcon, VerificationClassIcon } from '../../icons';
+import { KEPPEL, useTheme } from '../../theme';
 import { InfoTooltip } from '../CustomTooltip';
 import { ContentDetailsPoints, ContentDetailsText } from '../Typography';
-import { CONTENT_CLASS, formatToTitleCase } from './helper';
-import { Class } from './types';
+import { formatToTitleCase } from './helper';
+import { Class, ContentClassType } from './types';
 
 interface ContentClassInfoProps {
   contentClass: string;
   classes: Class[];
 }
 
-const ClassIcon: React.FC<{ className: string }> = ({ className }) => {
-  const Icon = CONTENT_CLASS[className]?.icon;
-  return Icon ? <Icon width="25px" height="25px" /> : null;
-};
-
 const ContentClassInfo: React.FC<ContentClassInfoProps> = ({ contentClass, classes }) => {
-  const classDescription = (className: string): string | undefined => {
+  const _classDescription = (className: string): string | undefined => {
     const classObj = classes && classes.find((classObj) => classObj.class === className);
     return classObj?.description;
   };
 
+  const theme = useTheme();
+
+  const CONTENT_CLASS: ContentClassType = {
+    community: {
+      icon: CommunityClassIcon,
+      color: theme.palette.icon.secondary
+    },
+    official: {
+      icon: OfficialClassIcon,
+      color: '#EBC017'
+    },
+    verified: {
+      icon: VerificationClassIcon,
+      color: theme.palette.primary.brand?.default || KEPPEL
+    }
+  } as const;
+
+  const ClassIcon: React.FC<{ className: string }> = ({ className }) => {
+    const Icon = CONTENT_CLASS[className]?.icon;
+    const fill = CONTENT_CLASS[className]?.color;
+    return Icon ? <Icon width="25px" height="25px" fill={fill} /> : null;
+  };
+
   return (
     <div>
       <Box style={{ display: 'flex', alignItems: 'center', gap: '0.3rem' }}>
-        <ContentDetailsPoints>CLASS</ContentDetailsPoints>
+        <ContentDetailsPoints style={{ fontFamily: 'inherit', fontWeight: 'bold' }}>
+          CLASS
+        </ContentDetailsPoints>
         <InfoTooltip
           variant="standard"
-          helpText={classDescription(contentClass)}
+          helpText={_classDescription(contentClass)}
           style={{ marginBottom: '0.2rem' }}
         />
       </Box>
       <ContentDetailsText
         style={{
           display: 'flex',
           alignItems: 'center',
-          gap: '0.4rem'
+          gap: '0.4rem',
+          fontFamily: 'inherit'
         }}
       >
         <ClassIcon className={contentClass} />

src/custom/CatalogDetail/style.tsx

@@ -1,4 +1,4 @@
-import { ListItemButton, Paper, Typography } from '../../base';
+import { Link, ListItemButton, Paper, Typography } from '../../base';
 import { styled } from '../../theme';
 import { Theme } from './types';
 
@@ -40,6 +40,7 @@ export const ActionButton = styled('div')<ActionButtonProps>(({ disabled = false
 }));
 
 export const ContentDetailsText = styled(Typography)(({ theme }) => ({
+  fontFamily: 'inherit',
   fontSize: '1rem',
   color: theme.palette.text.default,
   ['@media (min-width:1200px)']: {
@@ -122,7 +123,8 @@ export const ContentDetailsPoints = styled(Typography)(() => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  gap: '1rem'
+  gap: '1rem',
+  fontFamily: 'inherit'
 }));
 
 export const MetricsSection = styled('div')(() => ({
@@ -194,7 +196,8 @@ export const DesignHeading = styled('h1')(({ theme }) => ({
 
 export const ContentRow = styled('div')(() => ({
   padding: '0.5rem 0',
-  overflowWrap: 'anywhere'
+  overflowWrap: 'anywhere',
+  fontFamily: 'inherit'
 }));
 
 export const ShowToggleBtn = styled('span')(({ theme }) => ({
@@ -245,7 +248,7 @@ export const VisibilityChip = styled('div')(() => ({
   width: 'fit-content'
 }));
 
-export const RedirectLink = styled('a')(({ theme }) => ({
+export const RedirectLink = styled(Link)(({ theme }) => ({
   color: theme.palette.background.brand?.default,
   textDecoration: 'none',
   cursor: 'pointer'