From 467dccf8bbdd20724e419a10a0d8e0a083ad1f1d Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 23 Aug 2024 10:43:52 +0530
Subject: [PATCH] Use

---
 web/apps/photos/src/components/WatchFolder.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/web/apps/photos/src/components/WatchFolder.tsx b/web/apps/photos/src/components/WatchFolder.tsx
index 60bd050048..0214507eda 100644
--- a/web/apps/photos/src/components/WatchFolder.tsx
+++ b/web/apps/photos/src/components/WatchFolder.tsx
@@ -1,3 +1,4 @@
+import { EllipsizedTypography } from "@/base/components/Typography";
 import { ensureElectron } from "@/base/electron";
 import { basename, dirname } from "@/base/file";
 import type { CollectionMapping, FolderWatch } from "@/base/types/ipc";
@@ -307,15 +308,11 @@ const EntryHeading: React.FC<EntryHeadingProps> = ({ watch }) => {
 };
 
 const FolderPath: React.FC<React.PropsWithChildren> = ({ children }) => (
-    <FolderPath_ variant="small">{children}</FolderPath_>
+    <EllipsizedTypography variant="small" color="text.muted">
+        {children}
+    </EllipsizedTypography>
 );
 
-const FolderPath_ = styled(Typography)(({ theme }) => ({
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    color: theme.colors.text.muted,
-}));
-
 interface EntryOptionsProps {
     confirmStopWatching: () => void;
 }