Add some visual distinction vis a vis the buttons

This commit is contained in:
Manav Rathi 2024-10-04 16:58:42 +05:30
parent 248c24b522
commit c4e9e6014b
No known key found for this signature in database
3 changed files with 11 additions and 4 deletions

View File

@ -220,8 +220,8 @@ const TakeoutOptions: React.FC<Omit<OptionsProps, "intent">> = ({
}) => {
return (
<>
<SpaceBetweenFlex sx={{ padding: "8px 8px 8px 0" }}>
<DialogTitle>{t("google_takeout")}</DialogTitle>
<SpaceBetweenFlex sx={{ padding: "8px 8px 0px 0" }}>
<DialogTitle variant="h5">{t("google_takeout")}</DialogTitle>
<IconButton
aria-label={t("close")}
color="secondary"

View File

@ -50,7 +50,7 @@ declare module "@mui/material/Typography" {
mini: true;
tiny: true;
h4: true;
h5: false;
h5: true;
h6: true;
subtitle1: false;
subtitle2: false;

View File

@ -17,6 +17,13 @@ export const typography: TypographyOptions = {
fontSize: "22px",
lineHeight: "27px",
},
h5: {
fontSize: "20px",
lineHeight: "25px",
// Browser default is bold, but MUI resets it to 500 which is too light
// for our chosen font.
fontWeight: "bold",
},
// h6 is the default variant used by MUI's DialogTitle.
h6: {
// The font size and line height belows is the same as large.
@ -24,7 +31,7 @@ export const typography: TypographyOptions = {
lineHeight: "22px",
// Browser default is bold, but MUI resets it to 500 which is too light
// for our chosen font.
fontWeight: "bold"
fontWeight: "bold",
},
large: {
fontSize: "18px",