From f0bf07a384fc06e6b2e89aac75d83467090ad606 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 23 Aug 2024 09:51:57 +0530
Subject: [PATCH] Move variant into custom component

---
 web/apps/photos/src/components/WatchFolder.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/apps/photos/src/components/WatchFolder.tsx b/web/apps/photos/src/components/WatchFolder.tsx
index e95b86eb33..60bd050048 100644
--- a/web/apps/photos/src/components/WatchFolder.tsx
+++ b/web/apps/photos/src/components/WatchFolder.tsx
@@ -273,7 +273,7 @@ const WatchEntry: React.FC<WatchEntryProps> = ({ watch, removeWatch }) => {
                 )}
                 <EntryContainer>
                     <EntryHeading watch={watch} />
-                    <FolderPath variant="small">{watch.folderPath}</FolderPath>
+                    <FolderPath>{watch.folderPath}</FolderPath>
                 </EntryContainer>
             </HorizontalFlex>
             <EntryOptions {...{ confirmStopWatching }} />
@@ -306,7 +306,11 @@ const EntryHeading: React.FC<EntryHeadingProps> = ({ watch }) => {
     );
 };
 
-const FolderPath = styled(Typography)(({ theme }) => ({
+const FolderPath: React.FC<React.PropsWithChildren> = ({ children }) => (
+    <FolderPath_ variant="small">{children}</FolderPath_>
+);
+
+const FolderPath_ = styled(Typography)(({ theme }) => ({
     overflow: "hidden",
     textOverflow: "ellipsis",
     color: theme.colors.text.muted,