From 940f91e4e15187528b5e925e495ec561f4f54791 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 9 Jan 2025 12:33:42 +0530
Subject: [PATCH] Set h3 default to medium

In couple of places this changes the look, but this was intentional.
---
 web/apps/accounts/src/pages/passkeys/verify.tsx  |  8 ++++----
 web/apps/auth/src/pages/auth.tsx                 | 14 ++------------
 .../Collections/AllCollections/index.tsx         |  2 +-
 .../components/Collections/CollectionShare.tsx   |  5 +----
 web/apps/photos/src/components/Export.tsx        |  4 +---
 .../photos/src/components/GalleryEmptyState.tsx  |  1 -
 .../src/components/Sidebar/SubscriptionCard.tsx  | 16 ++++------------
 web/apps/photos/src/components/Sidebar/index.tsx |  4 +---
 web/apps/photos/src/components/WatchFolder.tsx   |  6 ++----
 web/packages/accounts/components/RecoveryKey.tsx |  4 +---
 web/packages/base/components/Titlebar.tsx        |  4 +---
 .../base/components/mui/SidebarDrawer.tsx        |  4 +---
 web/packages/base/components/utils/theme.ts      |  2 +-
 .../new/photos/components/CollectionSelector.tsx |  4 +---
 .../new/photos/components/PlanSelector.tsx       | 11 ++++++-----
 .../photos/components/gallery/PeopleHeader.tsx   |  4 +---
 16 files changed, 28 insertions(+), 65 deletions(-)

diff --git a/web/apps/accounts/src/pages/passkeys/verify.tsx b/web/apps/accounts/src/pages/passkeys/verify.tsx
index 84b509b04d..b9059ab3cc 100644
--- a/web/apps/accounts/src/pages/passkeys/verify.tsx
+++ b/web/apps/accounts/src/pages/passkeys/verify.tsx
@@ -316,7 +316,7 @@ const Failed: React.FC<FailedProps> = ({ message }) => {
     return (
         <Content>
             <InfoIcon color="secondary" />
-            <Typography variant="h3">{t("passkey_login_failed")}</Typography>
+            <Typography variant="h4">{t("passkey_login_failed")}</Typography>
             <Typography sx={{ color: "text.muted" }}>{message}</Typography>
         </Content>
     );
@@ -402,7 +402,7 @@ const RetriableFailed: React.FC<RetriableFailedProps> = ({
     return (
         <Content>
             <InfoIcon color="secondary" fontSize="large" />
-            <Typography variant="h3">{t("passkey_login_failed")}</Typography>
+            <Typography variant="h4">{t("passkey_login_failed")}</Typography>
             <Typography sx={{ color: "text.muted" }}>
                 {duringSignChallenge
                     ? t("passkey_login_credential_hint")
@@ -469,7 +469,7 @@ const RedirectingWeb: React.FC = () => {
     return (
         <Content>
             <InfoIcon color="accent" fontSize="large" />
-            <Typography variant="h3">{t("passkey_verified")}</Typography>
+            <Typography variant="h5">{t("passkey_verified")}</Typography>
             <Typography sx={{ color: "text.muted" }}>
                 {t("redirecting_back_to_app")}
             </Typography>
@@ -486,7 +486,7 @@ const RedirectingApp: React.FC<RedirectingAppProps> = ({ onRetry }) => {
     return (
         <Content>
             <InfoIcon color="accent" fontSize="large" />
-            <Typography variant="h3">{t("passkey_verified")}</Typography>
+            <Typography variant="h5">{t("passkey_verified")}</Typography>
             <Typography sx={{ color: "text.muted" }}>
                 {t("redirecting_back_to_app")}
             </Typography>
diff --git a/web/apps/auth/src/pages/auth.tsx b/web/apps/auth/src/pages/auth.tsx
index 647f1ed448..6765e544c6 100644
--- a/web/apps/auth/src/pages/auth.tsx
+++ b/web/apps/auth/src/pages/auth.tsx
@@ -255,21 +255,11 @@ const OTPDisplay: React.FC<OTPDisplayProps> = ({ code, otp, nextOTP }) => {
                     <Typography variant="small">{code.issuer}</Typography>
                     <Typography
                         variant="mini"
-                        sx={{
-                            color: "text.faint",
-                            flex: 1,
-                            minHeight: "16px",
-                        }}
+                        sx={{ color: "text.faint", flex: 1, minHeight: "16px" }}
                     >
                         {code.account ?? ""}
                     </Typography>
-                    <Typography
-                        variant="h3"
-                        sx={{
-                            fontWeight: "medium",
-                            mb: "20px",
-                        }}
-                    >
+                    <Typography variant="h3" sx={{ mb: "20px" }}>
                         {otp}
                     </Typography>
                 </Stack>
diff --git a/web/apps/photos/src/components/Collections/AllCollections/index.tsx b/web/apps/photos/src/components/Collections/AllCollections/index.tsx
index 4a199dc576..7960117bbc 100644
--- a/web/apps/photos/src/components/Collections/AllCollections/index.tsx
+++ b/web/apps/photos/src/components/Collections/AllCollections/index.tsx
@@ -108,7 +108,7 @@ const AllCollectionsHeader = ({
         <FlexWrapper>
             <FluidContainer mr={1.5}>
                 <Box>
-                    <Typography variant="h3">
+                    <Typography variant="h5">
                         {isInHiddenSection
                             ? t("all_hidden_albums")
                             : t("all_albums")}
diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx
index 4f40cb1a22..210fa01624 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx
@@ -1891,10 +1891,7 @@ function PublicLinkSetPassword({
             fullWidth
         >
             <Stack sx={{ gap: 3, p: 1.5 }}>
-                <Typography
-                    variant="h3"
-                    sx={{ fontWeight: "medium", px: 1, py: 0.5 }}
-                >
+                <Typography variant="h3" sx={{ px: 1, py: 0.5 }}>
                     {t("password_lock")}
                 </Typography>
                 <SingleInputForm
diff --git a/web/apps/photos/src/components/Export.tsx b/web/apps/photos/src/components/Export.tsx
index da95e7fc49..06efade3f7 100644
--- a/web/apps/photos/src/components/Export.tsx
+++ b/web/apps/photos/src/components/Export.tsx
@@ -178,9 +178,7 @@ export const Export: React.FC<ExportProps> = ({
     return (
         <Dialog {...{ open, onClose }} maxWidth="xs" fullWidth>
             <SpaceBetweenFlex sx={{ p: "12px 4px 0px 0px" }}>
-                <DialogTitle variant="h3" sx={{ fontWeight: "medium" }}>
-                    {t("export_data")}
-                </DialogTitle>
+                <DialogTitle variant="h3">{t("export_data")}</DialogTitle>
                 <DialogCloseIconButton {...{ onClose }} />
             </SpaceBetweenFlex>
 
diff --git a/web/apps/photos/src/components/GalleryEmptyState.tsx b/web/apps/photos/src/components/GalleryEmptyState.tsx
index 93ab8805f1..e8b4c6bae6 100644
--- a/web/apps/photos/src/components/GalleryEmptyState.tsx
+++ b/web/apps/photos/src/components/GalleryEmptyState.tsx
@@ -21,7 +21,6 @@ export default function GalleryEmptyState({ openUploader }) {
                             color: "text.muted",
                             userSelect: "none",
                             marginBlockEnd: 1,
-
                             svg: {
                                 color: "text.base",
                                 verticalAlign: "middle",
diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
index d0db2da6cf..78463b389a 100644
--- a/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
+++ b/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
@@ -149,29 +149,21 @@ const StorageSection: React.FC<StorageSectionProps> = ({ usage, storage }) => {
                 {t("storage")}
             </Typography>
             <DefaultBox>
-                <StorageSectionSpan>
+                <Typography variant="h3">
                     {`${formattedStorageByteSize(usage, { round: true })} ${t(
                         "of",
                     )} ${formattedStorageByteSize(storage)} ${t("used")}`}
-                </StorageSectionSpan>
+                </Typography>
             </DefaultBox>
             <MobileSmallBox>
-                <StorageSectionSpan>
+                <Typography variant="h3">
                     {`${bytesInGB(usage)} /  ${bytesInGB(storage)} ${t("storage_unit.gb")} ${t("used")}`}
-                </StorageSectionSpan>
+                </Typography>
             </MobileSmallBox>
         </Box>
     );
 };
 
-const StorageSectionSpan: React.FC<React.PropsWithChildren> = ({
-    children,
-}) => (
-    <Typography variant="h3" component="span" sx={{ fontWeight: "medium" }}>
-        {children}
-    </Typography>
-);
-
 interface IndividualUsageSectionProps {
     usage: number;
     fileCount: number;
diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index 5979cd8c71..68f1c27fce 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -349,9 +349,7 @@ function MemberSubscriptionManage({ open, userDetails, onClose }) {
         <Dialog {...{ open, onClose, fullScreen }} maxWidth="xs" fullWidth>
             <SpaceBetweenFlex sx={{ p: "20px 8px 12px 16px" }}>
                 <Stack>
-                    <Typography variant="h3" sx={{ fontWeight: "medium" }}>
-                        {t("subscription")}
-                    </Typography>
+                    <Typography variant="h3">{t("subscription")}</Typography>
                     <Typography sx={{ color: "text.muted" }}>
                         {t("family_plan")}
                     </Typography>
diff --git a/web/apps/photos/src/components/WatchFolder.tsx b/web/apps/photos/src/components/WatchFolder.tsx
index e12cc59fdf..7d24fac833 100644
--- a/web/apps/photos/src/components/WatchFolder.tsx
+++ b/web/apps/photos/src/components/WatchFolder.tsx
@@ -120,7 +120,7 @@ export const WatchFolder: React.FC<ModalVisibilityProps> = ({
                 PaperProps={{ sx: { height: "448px", maxWidth: "414px" } }}
             >
                 <SpaceBetweenFlex sx={{ p: "16px 8px 8px 8px" }}>
-                    <DialogTitle variant="h3" sx={{ fontWeight: "medium" }}>
+                    <DialogTitle variant="h3">
                         {t("watched_folders")}
                     </DialogTitle>
                     <DialogCloseIconButton {...{ onClose }} />
@@ -183,9 +183,7 @@ const NoWatches: React.FC = () => {
     return (
         <NoWatchesContainer>
             <Stack spacing={1}>
-                <Typography variant="h6">
-                    {t("no_folders_added")}
-                </Typography>
+                <Typography variant="h6">{t("no_folders_added")}</Typography>
                 <Typography
                     variant={"small"}
                     sx={{ py: 0.5, color: "text.muted" }}
diff --git a/web/packages/accounts/components/RecoveryKey.tsx b/web/packages/accounts/components/RecoveryKey.tsx
index 6162ba1959..ce40675e18 100644
--- a/web/packages/accounts/components/RecoveryKey.tsx
+++ b/web/packages/accounts/components/RecoveryKey.tsx
@@ -75,9 +75,7 @@ export const RecoveryKey: React.FC<RecoveryKeyProps> = ({
             fullWidth
         >
             <SpaceBetweenFlex sx={{ p: "8px 4px 8px 0" }}>
-                <DialogTitle variant="h3" sx={{ fontWeight: "medium" }}>
-                    {t("recovery_key")}
-                </DialogTitle>
+                <DialogTitle variant="h3">{t("recovery_key")}</DialogTitle>
                 <DialogCloseIconButton {...{ onClose }} />
             </SpaceBetweenFlex>
             <DialogContent>
diff --git a/web/packages/base/components/Titlebar.tsx b/web/packages/base/components/Titlebar.tsx
index 7088b37391..3e0462d30c 100644
--- a/web/packages/base/components/Titlebar.tsx
+++ b/web/packages/base/components/Titlebar.tsx
@@ -46,9 +46,7 @@ export const Titlebar: React.FC<TitlebarProps> = ({
                 </Stack>
             </FlexWrapper>
             <Box sx={{ py: 0.5, px: 2 }}>
-                <Typography variant="h3" sx={{ fontWeight: "medium" }}>
-                    {title}
-                </Typography>
+                <Typography variant="h3">{title}</Typography>
                 <Typography
                     variant="small"
                     sx={{
diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index 6ec3683980..b0c79042a5 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -126,9 +126,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
             </Stack>
         </SpaceBetweenFlex>
         <Box sx={{ px: "16px", py: "4px" }}>
-            <Typography variant="h3" sx={{ fontWeight: "medium" }}>
-                {title}
-            </Typography>
+            <Typography variant="h3">{title}</Typography>
             <Typography
                 variant="small"
                 sx={{
diff --git a/web/packages/base/components/utils/theme.ts b/web/packages/base/components/utils/theme.ts
index 56645dc01c..451de262d4 100644
--- a/web/packages/base/components/utils/theme.ts
+++ b/web/packages/base/components/utils/theme.ts
@@ -345,7 +345,7 @@ const typography: TypographyOptions = {
     h3: {
         fontSize: "24px",
         lineHeight: "29px",
-        fontWeight: 500 /* Reset to regular to override MUI's default theme */,
+        fontWeight: 600 /* medium */,
     },
     h4: {
         fontSize: "22px",
diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx
index 0fbc56f888..de2e919f04 100644
--- a/web/packages/new/photos/components/CollectionSelector.tsx
+++ b/web/packages/new/photos/components/CollectionSelector.tsx
@@ -168,9 +168,7 @@ export const CollectionSelector: React.FC<CollectionSelectorProps> = ({
             PaperProps={{ sx: { maxWidth: "490px" } }}
         >
             <SpaceBetweenFlex sx={{ padding: "10px 8px 6px 0" }}>
-                <DialogTitle variant="h3" fontWeight={"medium"}>
-                    {titleForAction(action)}
-                </DialogTitle>
+                <DialogTitle variant="h3">{titleForAction(action)}</DialogTitle>
                 <DialogCloseIconButton onClose={handleClose} />
             </SpaceBetweenFlex>
 
diff --git a/web/packages/new/photos/components/PlanSelector.tsx b/web/packages/new/photos/components/PlanSelector.tsx
index 50b4a974e1..93a60dde87 100644
--- a/web/packages/new/photos/components/PlanSelector.tsx
+++ b/web/packages/new/photos/components/PlanSelector.tsx
@@ -309,9 +309,7 @@ const FreeSubscriptionPlanSelectorCard: React.FC<
     children,
 }) => (
     <>
-        <Typography variant="h3" sx={{ fontWeight: "medium" }}>
-            {t("choose_plan")}
-        </Typography>
+        <Typography variant="h3">{t("choose_plan")}</Typography>
         <Box>
             <Stack spacing={3}>
                 <Box>
@@ -365,7 +363,7 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
         <Box sx={{ pl: 1.5, py: 0.5 }}>
             <SpaceBetweenFlex>
                 <Box>
-                    <Typography variant="h3" sx={{ fontWeight: "medium" }}>
+                    <Typography variant="h5" sx={{ fontWeight: "medium" }}>
                         {t("subscription")}
                     </Typography>
                     <Typography variant="small" sx={{ color: "text.muted" }}>
@@ -538,7 +536,10 @@ const PlanRow: React.FC<PlanRowProps> = ({ plan, onPlanSelect, disabled }) => {
         <PlanRowContainer>
             <PlanStorage>
                 <Typography variant="h1">{bytesInGB(plan.storage)}</Typography>
-                <Typography variant="h3" sx={{ color: "text.muted" }}>
+                <Typography
+                    variant="h3"
+                    sx={{ fontWeight: "regular", color: "text.muted" }}
+                >
                     {t("storage_unit.gb")}
                 </Typography>
             </PlanStorage>
diff --git a/web/packages/new/photos/components/gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
index e3f1027b3a..b72055997a 100644
--- a/web/packages/new/photos/components/gallery/PeopleHeader.tsx
+++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
@@ -356,9 +356,7 @@ const AddPersonDialog: React.FC<AddPersonDialogProps> = ({
                 PaperProps={{ sx: { maxWidth: "490px" } }}
             >
                 <SpaceBetweenFlex sx={{ padding: "10px 8px 6px 0" }}>
-                    <DialogTitle variant="h3" fontWeight={"medium"}>
-                        {t("add_name")}
-                    </DialogTitle>
+                    <DialogTitle variant="h3">{t("add_name")}</DialogTitle>
                     <DialogCloseIconButton {...{ onClose }} />
                 </SpaceBetweenFlex>
                 <DialogContent_>