From 5ed9ac05787da285bc976d1b7e05e9f44e8266bf Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Tue, 4 Feb 2025 16:07:52 +0530
Subject: [PATCH] cap

---
 .../src/components/PhotoViewer/index.tsx      | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/web/apps/photos/src/components/PhotoViewer/index.tsx b/web/apps/photos/src/components/PhotoViewer/index.tsx
index 3fa8f01d83..9095b202b0 100644
--- a/web/apps/photos/src/components/PhotoViewer/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/index.tsx
@@ -982,16 +982,17 @@ const defaultLivePhotoDefaultOptions = {
     visible: false,
 };
 
-const CaptionContainer = styled("div")(({ theme }) => ({
-    padding: theme.spacing(2),
-    wordBreak: "break-word",
-    textAlign: "right",
-    maxWidth: "375px",
-    fontSize: "14px",
-    lineHeight: "17px",
-    backgroundColor: theme.vars.palette.backdrop.faint,
-    backdropFilter: "blur(96px)",
-}));
+const CaptionContainer = styled((props) => (
+    <Typography variant="small" {...props} />
+))(`
+    padding: 16px;
+    word-break: break-word;
+    text-align: right;
+    max-width: 375px;
+    background-color: rgba(0 0 0 / 0.20);
+    color: white;
+    backdrop-filter: blur(60px);
+`);
 
 const CircularProgressWithLabel: React.FC<
     Pick<CircularProgressProps, "value">