From d72813dd078f06218d80a50f862ba7ab12a6298b Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sat, 13 Jul 2024 09:24:35 +0530
Subject: [PATCH] Stylistic tweaks

---
 .../new/photos/components/WhatsNew.tsx        | 41 +++++++++++--------
 web/packages/shared/themes/mui-theme.d.ts     |  2 +-
 web/packages/shared/themes/typography.ts      |  4 ++
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/web/packages/new/photos/components/WhatsNew.tsx b/web/packages/new/photos/components/WhatsNew.tsx
index 06d8ec7d67..e0840ce9ab 100644
--- a/web/packages/new/photos/components/WhatsNew.tsx
+++ b/web/packages/new/photos/components/WhatsNew.tsx
@@ -2,6 +2,7 @@ import { ensureElectron } from "@/next/electron";
 import { ut } from "@/next/i18n";
 import ArrowForward from "@mui/icons-material/ArrowForward";
 import {
+    Box,
     Dialog,
     DialogActions,
     DialogContent,
@@ -40,23 +41,29 @@ export const WhatsNew: React.FC<WhatsNewProps> = ({ open, onClose }) => {
             TransitionComponent={SlideTransition}
             maxWidth="xs"
         >
-            <DialogTitle>{ut("What's new")}</DialogTitle>
-            <DialogContent>
-                <DialogContentText>
-                    <ChangelogContent />
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions>
-                <FocusVisibleButton
-                    onClick={onClose}
-                    color="accent"
-                    fullWidth
-                    disableRipple
-                    endIcon={<ArrowForward />}
-                >
-                    <ButtonContents>{ut("Continue")}</ButtonContents>
-                </FocusVisibleButton>
-            </DialogActions>
+            <Box m={1}>
+                <DialogTitle mt={2}>
+                    <Typography variant="h4" color="text.muted">
+                        {ut("What's new")}
+                    </Typography>
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        <ChangelogContent />
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <FocusVisibleButton
+                        onClick={onClose}
+                        color="accent"
+                        fullWidth
+                        disableRipple
+                        endIcon={<ArrowForward />}
+                    >
+                        <ButtonContents>{ut("Continue")}</ButtonContents>
+                    </FocusVisibleButton>
+                </DialogActions>
+            </Box>
         </Dialog>
     );
 };
diff --git a/web/packages/shared/themes/mui-theme.d.ts b/web/packages/shared/themes/mui-theme.d.ts
index 6307cfbcdf..e1c5ef46b7 100644
--- a/web/packages/shared/themes/mui-theme.d.ts
+++ b/web/packages/shared/themes/mui-theme.d.ts
@@ -49,7 +49,7 @@ declare module "@mui/material/Typography" {
         small: true;
         mini: true;
         tiny: true;
-        h4: false;
+        h4: true;
         h5: false;
         h6: false;
         subtitle1: false;
diff --git a/web/packages/shared/themes/typography.ts b/web/packages/shared/themes/typography.ts
index 5f528ba43c..45b4bc6447 100644
--- a/web/packages/shared/themes/typography.ts
+++ b/web/packages/shared/themes/typography.ts
@@ -13,6 +13,10 @@ export const typography: TypographyOptions = {
         fontSize: "24px",
         lineHeight: "29px",
     },
+    h4: {
+        fontSize: "22px",
+        lineHeight: "27px",
+    },
     large: {
         fontSize: "18px",
         lineHeight: "22px",