From 17608df71e2b2e45c6bdef8b1514e05afc36844c Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 4 Oct 2024 16:09:40 +0530
Subject: [PATCH] Provide our own h6 instead of relying on the implicit one

---
 .../photos/components/CollectionMappingChoiceDialog.tsx  | 2 --
 web/packages/shared/themes/mui-theme.d.ts                | 2 +-
 web/packages/shared/themes/typography.ts                 | 9 +++++++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx b/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx
index 7f35d51a37..d7fe9c9d9d 100644
--- a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx
+++ b/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx
@@ -34,8 +34,6 @@ export const CollectionMappingChoiceDialog: React.FC<
         PaperProps={{ sx: { maxWidth: "360px", padding: "12px" } }}
     >
         <DialogTitle
-            variant="large"
-            fontWeight={"bold"}
             sx={{
                 "&&&": { padding: "4px 4px 0 16px" },
                 display: "flex",
diff --git a/web/packages/shared/themes/mui-theme.d.ts b/web/packages/shared/themes/mui-theme.d.ts
index e1c5ef46b7..9e39e53473 100644
--- a/web/packages/shared/themes/mui-theme.d.ts
+++ b/web/packages/shared/themes/mui-theme.d.ts
@@ -51,7 +51,7 @@ declare module "@mui/material/Typography" {
         tiny: true;
         h4: true;
         h5: false;
-        h6: false;
+        h6: true;
         subtitle1: false;
         subtitle2: false;
         body1: false;
diff --git a/web/packages/shared/themes/typography.ts b/web/packages/shared/themes/typography.ts
index 45b4bc6447..f0b1b0ee3a 100644
--- a/web/packages/shared/themes/typography.ts
+++ b/web/packages/shared/themes/typography.ts
@@ -17,6 +17,15 @@ export const typography: TypographyOptions = {
         fontSize: "22px",
         lineHeight: "27px",
     },
+    // h6 is the default variant used by MUI's DialogTitle.
+    h6: {
+        // The font size and line height belows is the same as large.
+        fontSize: "18px",
+        lineHeight: "22px",
+        // Browser default is bold, but MUI resets it to 500 which is too light
+        // for our chosen font.
+        fontWeight: "bold"
+    },
     large: {
         fontSize: "18px",
         lineHeight: "22px",