add subtitle typography variant

This commit is contained in:
Abhinav 2022-06-04 16:37:09 +05:30
parent 617d51dcaa
commit 5ee5b5f890
2 changed files with 11 additions and 13 deletions

View file

@ -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

View file

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