From c4e9e6014b54e92cad044658946ba873250649b5 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 4 Oct 2024 16:58:42 +0530
Subject: [PATCH] Add some visual distinction vis a vis the buttons

---
 .../photos/src/components/Upload/UploadTypeSelector.tsx  | 4 ++--
 web/packages/shared/themes/mui-theme.d.ts                | 2 +-
 web/packages/shared/themes/typography.ts                 | 9 ++++++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
index d68401694b..bc57535eeb 100644
--- a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
+++ b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
@@ -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"
diff --git a/web/packages/shared/themes/mui-theme.d.ts b/web/packages/shared/themes/mui-theme.d.ts
index 9e39e53473..639ee286b2 100644
--- a/web/packages/shared/themes/mui-theme.d.ts
+++ b/web/packages/shared/themes/mui-theme.d.ts
@@ -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;
diff --git a/web/packages/shared/themes/typography.ts b/web/packages/shared/themes/typography.ts
index f0b1b0ee3a..7279742823 100644
--- a/web/packages/shared/themes/typography.ts
+++ b/web/packages/shared/themes/typography.ts
@@ -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",