feat: replace HTML headings with Typography component for consistency

src/custom/CatalogDetail/CaveatsSection.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Typography } from '../../base';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { RenderMarkdown } from '../Markdown';
 import { ContentDetailsText } from '../Typography';
@@ -12,7 +13,9 @@ const CaveatsSection: React.FC<CaveatsSectionProps> = ({ details }) => {
   return (
     <CaveatsContainer>
       <ContentHeading>
-        <h2 style={{ margin: '0' }}>CAVEATS AND CONSIDERATIONS</h2>
+        <Typography variant="h2" style={{ margin: '0' }}>
+          CAVEATS AND CONSIDERATIONS
+        </Typography>
       </ContentHeading>
       {details?.catalog_data?.pattern_caveats ? (
         <ContentDetailsText style={{ whiteSpace: 'normal', fontFamily: 'inherit' }}>

src/custom/CatalogDetail/OverviewSection.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid } from '../../base';
+import { Grid, Typography } from '../../base';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import ContentClassInfo from './ContentClassInfo';
@@ -96,7 +96,9 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
         <Grid item lg={8} md={8} sm={12} xs={12}>
           {showContentDetails ? (
             <ContentRow>
-              <h2 style={{ margin: '0' }}>WHAT DOES THIS DESIGN DO?</h2>
+              <Typography variant="h2" style={{ margin: '0' }}>
+                WHAT DOES THIS DESIGN DO?
+              </Typography>
               {details?.catalog_data?.pattern_info ? (
                 <PatternInfo text={decodeURIComponent(details.catalog_data.pattern_info)} />
               ) : (

src/custom/CatalogDetail/RelatedDesigns.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '../../base';
 import { Carousel } from '../Carousel';
 import { CatalogCardDesignLogo } from '../CustomCatalog';
 import CustomCatalogCard, { Pattern } from '../CustomCatalog/CustomCard';
@@ -71,11 +72,11 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
   return (
     <AdditionalContainer>
       <ContentHeading>
-        <h2 style={{ margin: '0', textTransform: 'uppercase' }}>
+        <Typography variant="h2" style={{ margin: '0', textTransform: 'uppercase' }}>
           {filterByType
             ? organizationName
             : getHeadingText({ type, userProfile, organizationName, fetchingOrgError })}
-        </h2>
+        </Typography>
       </ContentHeading>
       <Carousel items={carouselItems} scrollAmount={300} />
     </AdditionalContainer>

src/custom/ChapterCard/ChapterCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Typography } from '../../base';
 import { ChapterCardWrapper, ChapterContent, ChapterDescription, ChapterNumber } from './style';
 
 interface Chapter {
@@ -19,11 +20,11 @@ const ChapterCard: React.FC<Props> = ({ chapterNum, chapter }) => (
     <ChapterContent>
       <ChapterNumber>{chapterNum}</ChapterNumber>
       <ChapterDescription>
-        <h3>
+        <Typography variant="h3">
           {chapter.frontmatter.chapterTitle
             ? chapter.frontmatter.chapterTitle
             : chapter.frontmatter.courseTitle}
-        </h3>
+        </Typography>
         <p>{chapter.frontmatter.description}</p>
       </ChapterDescription>
     </ChapterContent>

src/custom/CustomCatalog/EmptyStateCard.tsx

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { Typography } from '../../base';
 import { EmptyStyleIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { CatalogEmptyStateDiv } from './style';
@@ -8,7 +9,9 @@ const EmptyStateCard: FC = () => {
   return (
     <CatalogEmptyStateDiv>
       <EmptyStyleIcon fill={theme.palette.text.default} width="100px" height="100px" />
-      <h3 style={{ color: theme.palette.text.default }}>No match found</h3>
+      <Typography variant="h3" style={{ color: theme.palette.text.default }}>
+        No match found
+      </Typography>
     </CatalogEmptyStateDiv>
   );
 };

src/custom/ErrorBoundary/ErrorBoundary.tsx

@@ -46,7 +46,7 @@ export function Fallback({
 }: FallbackComponentProps): JSX.Element {
   return (
     <div role="alert">
-      <h2>Uh-oh!😔 Please pardon the mesh.</h2>
+      <Typography variant="h2">Uh-oh!😔 Please pardon the mesh.</Typography>
       <CodeMessage>
         <code>
           <strong>Error: </strong>

src/custom/LearningCard/LearningCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Typography } from '../../base';
 import {
   Card2,
   CardActive,
@@ -46,11 +47,11 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType
           <CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
             <div>
               <CardHead>
-                <h3>
+                <Typography variant="h3">
                   {tutorial.frontmatter.title
                     ? tutorial.frontmatter.title
                     : tutorial.frontmatter.courseTitle}
-                </h3>
+                </Typography>
                 <div style={{ whiteSpace: 'nowrap' }}>
                   <span>Coming Soon</span>
                 </div>
@@ -70,11 +71,11 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType
             <CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
               <div>
                 <CardHead>
-                  <h3>
+                  <Typography variant="h3">
                     {tutorial.frontmatter.title
                       ? tutorial.frontmatter.title
                       : tutorial.frontmatter.courseTitle}
-                  </h3>
+                  </Typography>
                   {tutorial.frontmatter.status ? (
                     <p>
                       <span>New</span>

src/custom/LearningContent/LearningContent.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Typography } from '../../base';
 import { ChapterContent, ChapterDesc, ChapterNumber, ContentCardWrapper } from './style';
 
 interface ChapterProps {
@@ -21,11 +22,11 @@ const LearningContent: React.FC<ContentCardProps> = ({ chapterNum, chapter }) =>
     <ChapterContent>
       <ChapterNumber>{chapterNum}</ChapterNumber>
       <ChapterDesc>
-        <h2>
+        <Typography variant="h2">
           {chapter.frontmatter.chapterTitle
             ? chapter.frontmatter.chapterTitle
             : chapter.frontmatter.courseTitle}
-        </h2>
+        </Typography>
         <p>{chapter.frontmatter.description}</p>
       </ChapterDesc>
     </ChapterContent>

src/custom/SetupPrerequisite/SetupPrerequisite.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Typography } from '../../base';
 import { Card, CardHeader, ContainerCardWrapper, SetupPreReqWrapper } from './style';
 
 interface SetupItem {
@@ -14,15 +15,15 @@ interface SetupPreReqProps {
 const SetupPreReq: React.FC<SetupPreReqProps> = ({ Steps, PrerequisiteLine }) => (
   <SetupPreReqWrapper>
     <div className="get-started-desc" id="pre-requisites">
-      <h2>Prerequisites</h2>
+      <Typography variant="h2">Prerequisites</Typography>
       <p>{PrerequisiteLine}</p>
     </div>
     <ContainerCardWrapper id="Set up">
       {Steps.map((item, index) => {
         return (
           <Card key={index} href={item.url} target="_blank">
             <CardHeader>
-              <h2>{item.heading}</h2>
+              <Typography variant="h2">{item.heading}</Typography>
               {typeof item.Icon === 'string' ? (
                 <img src={item.Icon} alt={item.heading} width={'40px'} height={'40px'} />
               ) : (

src/custom/TOCLearning/TOCLearning.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Typography } from '../../base';
 import { CloseIcon, DropDownIcon, OutlinedDoubleChevronIcon } from '../../icons';
 import { TOCWrapper } from './style';
 interface CourseData {
@@ -31,7 +32,7 @@ const TOCLearning: React.FC<TOCProps> = ({ coursesData }) => {
       <div className="go-back">
         <a href={'/learn/learning-paths'}>
           <OutlinedDoubleChevronIcon />
-          <h4>Learning Paths</h4>
+          <Typography variant="h4">Learning Paths</Typography>
         </a>
         <div className="toc-toggle-btn">
           {expand ? (
@@ -54,7 +55,9 @@ const TOCLearning: React.FC<TOCProps> = ({ coursesData }) => {
       <div className="toc-list">
         <ul className={`toc-ul ${expand ? 'toc-ul-open' : ''}`}>
           <a href="#pre-requisites">
-            <h5 className="toc-sub-heading">Pre-requisites</h5>
+            <Typography variant="h5" className="toc-sub-heading">
+              Pre-requisites
+            </Typography>
           </a>
           {preReqSteps.map((item, index) => (
             <li key={index}>
@@ -65,7 +68,9 @@ const TOCLearning: React.FC<TOCProps> = ({ coursesData }) => {
           ))}
 
           <a href="#courses-list">
-            <h5 className="toc-sub-heading">Courses</h5>
+            <Typography variant="h5" className="toc-sub-heading">
+              Courses
+            </Typography>
           </a>
 
           {coursesData.map((item, index) => (

src/theme/typography.ts

@@ -4,6 +4,14 @@ import { common } from './colors';
 
 declare module '@mui/material/styles' {
   interface TypographyVariants {
+    h1: React.CSSProperties;
+    h2: React.CSSProperties;
+    h3: React.CSSProperties;
+    h4: React.CSSProperties;
+    h5: React.CSSProperties;
+    h6: React.CSSProperties;
+    body1: React.CSSProperties;
+    body2: React.CSSProperties;
     textH1Bold: React.CSSProperties;
     textH2Medium: React.CSSProperties;
     textH3Medium: React.CSSProperties;
@@ -18,6 +26,14 @@ declare module '@mui/material/styles' {
 
   // allow configuration using `createTheme`
   interface TypographyVariantsOptions {
+    h1?: React.CSSProperties;
+    h2?: React.CSSProperties;
+    h3?: React.CSSProperties;
+    h4?: React.CSSProperties;
+    h5?: React.CSSProperties;
+    h6?: React.CSSProperties;
+    body1?: React.CSSProperties;
+    body2?: React.CSSProperties;
     textH1Bold?: React.CSSProperties;
     textH2Medium?: React.CSSProperties;
     textH3Medium?: React.CSSProperties;
@@ -33,6 +49,14 @@ declare module '@mui/material/styles' {
 
 declare module '@mui/material/Typography' {
   interface TypographyPropsVariantOverrides {
+    h1: true;
+    h2: true;
+    h3: true;
+    h4: true;
+    h5: true;
+    h6: true;
+    body1: true;
+    body2: true;
     textH1Bold: true;
     textH2Medium: true;
     textH3Medium: true;
@@ -51,6 +75,54 @@ const theme = createTheme();
 export const typography = (mode: PaletteMode): TypographyOptions => {
   return {
     fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','),
+    h1: {
+      fontFamily: ['Qanelas Soft Regular', 'Open Sans', 'sans-serif'].join(','),
+      fontWeight: 700,
+      fontSize: '3.25rem',
+      lineHeight: '4rem'
+    },
+    h2: {
+      fontFamily: ['Qanelas Soft Regular', 'Open Sans', 'sans-serif'].join(','),
+      fontWeight: 600,
+      fontSize: '2.5rem',
+      lineHeight: '3rem'
+    },
+    h3: {
+      fontFamily: ['Qanelas Soft Regular', 'Open Sans', 'sans-serif'].join(','),
+      fontWeight: 500,
+      fontSize: '2rem',
+      lineHeight: '2.5rem'
+    },
+    h4: {
+      fontFamily: ['Qanelas Soft Regular', 'Open Sans', 'sans-serif'].join(','),
+      fontWeight: 400,
+      fontSize: '1.75rem',
+      lineHeight: '2.25rem'
+    },
+    h5: {
+      fontFamily: ['Qanelas Soft Regular', 'Open Sans', 'sans-serif'].join(','),
+      fontWeight: 400,
+      fontSize: '1.5rem',
+      lineHeight: '2rem'
+    },
+    h6: {
+      fontFamily: ['Qanelas Soft Regular', 'Open Sans', 'sans-serif'].join(','),
+      fontWeight: 600,
+      fontSize: '1.25rem',
+      lineHeight: '1.75rem'
+    },
+    body1: {
+      fontFamily: ['Qanelas Soft Regular', 'Open Sans', 'sans-serif'].join(','),
+      fontWeight: 400,
+      fontSize: '1rem',
+      lineHeight: '1.5rem'
+    },
+    body2: {
+      fontFamily: ['Qanelas Soft Regular', 'Open Sans', 'sans-serif'].join(','),
+      fontWeight: 400,
+      fontSize: '0.875rem',
+      lineHeight: '1.25rem'
+    },
     textH1Bold: {
       fontFamily: ['Qanelas Soft Regular'].join(','),
       fontSize: '3.25rem',