add subtitle typography variant

src/components/Collections/AllCollections/header.tsx

@@ -14,12 +14,7 @@ export default function AllCollectionsHeader({
     return (
         <DialogTitle>
             <SpaceBetweenFlex>
-                <Typography
+                <Typography variant="subtitle">
-                    css={`
-                        font-size: 24px;
-                        font-weight: 600;
-                        line-height: 36px;
-                    `}>
                     {constants.ALL_ALBUMS}
                 </Typography>
                 <IconButton onClick={onClose}>
@@ -27,13 +22,7 @@ export default function AllCollectionsHeader({
                 </IconButton>
             </SpaceBetweenFlex>
             <SpaceBetweenFlex>
-                <Typography
+                <Typography variant="subtitle" color={'text.secondary'}>
-                    css={`
-                        font-size: 24px;
-                        font-weight: 600;
-                        line-height: 36px;
-                    `}
-                    color={'text.secondary'}>
                     {`${collectionCount} ${constants.ALBUMS}`}
                 </Typography>
                 <CollectionSort

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(','),
     },
 });