From 5ee5b5f890f1291b2aa361b82a25f1e8e891883f Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sat, 4 Jun 2022 16:37:09 +0530
Subject: [PATCH] add subtitle typography variant

---
 .../Collections/AllCollections/header.tsx         | 15 ++-------------
 src/themes/darkThemeOptions.tsx                   |  9 +++++++++
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/Collections/AllCollections/header.tsx b/src/components/Collections/AllCollections/header.tsx
index 72cf2327d..158c88345 100644
--- a/src/components/Collections/AllCollections/header.tsx
+++ b/src/components/Collections/AllCollections/header.tsx
@@ -14,12 +14,7 @@ export default function AllCollectionsHeader({
     return (
         <DialogTitle>
             <SpaceBetweenFlex>
-                <Typography
-                    css={`
-                        font-size: 24px;
-                        font-weight: 600;
-                        line-height: 36px;
-                    `}>
+                <Typography variant="subtitle">
                     {constants.ALL_ALBUMS}
                 </Typography>
                 <IconButton onClick={onClose}>
@@ -27,13 +22,7 @@ export default function AllCollectionsHeader({
                 </IconButton>
             </SpaceBetweenFlex>
             <SpaceBetweenFlex>
-                <Typography
-                    css={`
-                        font-size: 24px;
-                        font-weight: 600;
-                        line-height: 36px;
-                    `}
-                    color={'text.secondary'}>
+                <Typography variant="subtitle" color={'text.secondary'}>
                     {`${collectionCount} ${constants.ALBUMS}`}
                 </Typography>
                 <CollectionSort
diff --git a/src/themes/darkThemeOptions.tsx b/src/themes/darkThemeOptions.tsx
index 7b279cbad..a966a023e 100644
--- a/src/themes/darkThemeOptions.tsx
+++ b/src/themes/darkThemeOptions.tsx
@@ -16,10 +16,12 @@ declare module '@mui/material/styles' {
 
     interface TypographyVariants {
         title: React.CSSProperties;
+        subtitle: React.CSSProperties;
     }
 
     interface TypographyVariantsOptions {
         title?: React.CSSProperties;
+        subtitle?: React.CSSProperties;
     }
 }
 
@@ -38,6 +40,7 @@ declare module '@mui/material/Checkbox' {
 declare module '@mui/material/Typography' {
     interface TypographyPropsVariantOverrides {
         title: true;
+        subtitle: true;
     }
 }
 
@@ -170,6 +173,12 @@ const darkThemeOptions = createTheme({
             fontWeight: 600,
             display: 'block',
         },
+        subtitle: {
+            fontSize: '24px',
+            fontWeight: 600,
+            lineHeight: '36px',
+            display: 'block',
+        },
         fontFamily: ['Inter', 'sans-serif'].join(','),
     },
 });