From a0df76c2c3524a521f2a6567363442a206fcf6c6 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Tue, 24 Sep 2024 16:46:16 +0530
Subject: [PATCH] Color

---
 .../new/photos/components/Gallery/ListHeader.tsx  | 15 +++++++++++++--
 .../new/photos/components/Gallery/index.tsx       |  1 +
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/packages/new/photos/components/Gallery/ListHeader.tsx b/web/packages/new/photos/components/Gallery/ListHeader.tsx
index 89e35cfa99..787da61a9f 100644
--- a/web/packages/new/photos/components/Gallery/ListHeader.tsx
+++ b/web/packages/new/photos/components/Gallery/ListHeader.tsx
@@ -1,10 +1,18 @@
-import { Box, Stack, styled, Typography } from "@mui/material";
+import {
+    Box,
+    Stack,
+    styled,
+    Typography,
+    type TypographyProps,
+} from "@mui/material";
 import { t } from "i18next";
 import React from "react";
 
 interface GalleryItemsSummaryProps {
     /** The name / title for the items that are being shown. */
     name: string;
+    /** Extra props to pass to the Typography component that shows the name. */
+    nameProps?: TypographyProps;
     /** The number of items being shown. */
     fileCount: number;
     /** An element (usually an icon) placed after the file count. */
@@ -17,12 +25,15 @@ interface GalleryItemsSummaryProps {
  */
 export const GalleryItemsSummary: React.FC<GalleryItemsSummaryProps> = ({
     name,
+    nameProps,
     fileCount,
     endIcon,
 }) => {
     return (
         <div>
-            <Typography variant="h3">{name}</Typography>
+            <Typography variant="h3" {...(nameProps ?? {})}>
+                {name}
+            </Typography>
 
             <Stack
                 direction="row"
diff --git a/web/packages/new/photos/components/Gallery/index.tsx b/web/packages/new/photos/components/Gallery/index.tsx
index 25dfbf49ee..485965b8d0 100644
--- a/web/packages/new/photos/components/Gallery/index.tsx
+++ b/web/packages/new/photos/components/Gallery/index.tsx
@@ -50,6 +50,7 @@ export const PersonListHeader: React.FC<PeopleListHeaderProps> = ({
             <SpaceBetweenFlex>
                 <GalleryItemsSummary
                     name={person.name ?? "Unnamed person"}
+                    nameProps={person.name ? {} : { color: "text.muted" }}
                     fileCount={person.fileIDs.length}
                 />
                 {hasOptions && (