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 ( return (
<> <>
<SpaceBetweenFlex sx={{ padding: "8px 8px 8px 0" }}> <SpaceBetweenFlex sx={{ padding: "8px 8px 0px 0" }}>
<DialogTitle>{t("google_takeout")}</DialogTitle> <DialogTitle variant="h5">{t("google_takeout")}</DialogTitle>
<IconButton <IconButton
aria-label={t("close")} aria-label={t("close")}
color="secondary" color="secondary"

View File

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

View File

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