From 8e044f4f50a5465c290eba03e7dd6a310e26edb3 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 17 Jan 2025 13:48:08 +0530
Subject: [PATCH] Fix font

---
 .../src/components/Upload/UploadProgress.tsx   | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/apps/photos/src/components/Upload/UploadProgress.tsx b/web/apps/photos/src/components/Upload/UploadProgress.tsx
index 0e188158c6..51444cac60 100644
--- a/web/apps/photos/src/components/Upload/UploadProgress.tsx
+++ b/web/apps/photos/src/components/Upload/UploadProgress.tsx
@@ -4,10 +4,7 @@ import {
     type UploadPhase,
 } from "@/new/photos/services/upload/types";
 import { useAppContext } from "@/new/photos/types/context";
-import {
-    SpaceBetweenFlex,
-    VerticallyCenteredFlex,
-} from "@ente/shared/components/Container";
+import { SpaceBetweenFlex } from "@ente/shared/components/Container";
 import CloseIcon from "@mui/icons-material/Close";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
@@ -435,6 +432,10 @@ const SectionAccordion = styled((props: AccordionProps) => (
 
 const SectionAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
     backgroundColor: theme.vars.palette.fill.fainter,
+    // AccordionSummary is a button, and for a reasons to do with MUI internal
+    // that I didn't explore further, the user agent default font family is
+    // getting applied in this case.
+    fontFamily: "inherit",
 }));
 
 const SectionAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
@@ -534,7 +535,12 @@ interface TitleTextProps {
 }
 
 const TitleText: React.FC<TitleTextProps> = ({ title, count }) => (
-    <VerticallyCenteredFlex gap={"4px"}>
+    <Stack
+        direction="row"
+        // Need to reset the font weight since it gets reset by the
+        // AccordionSummary (see SectionAccordionSummary).
+        sx={{ gap: 1, fontWeight: "regular", alignItems: "baseline" }}
+    >
         <Typography>{title}</Typography>
         <Typography variant="small" sx={{ color: "text.faint" }}>
             {"•"}
@@ -542,7 +548,7 @@ const TitleText: React.FC<TitleTextProps> = ({ title, count }) => (
         <Typography variant="small" sx={{ color: "text.faint" }}>
             {count ?? 0}
         </Typography>
-    </VerticallyCenteredFlex>
+    </Stack>
 );
 
 const DoneFooter: React.FC = () => {