From 51597ed48d72ca439b79890948c6413baa556bdf Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 15 Jan 2025 15:11:20 +0530
Subject: [PATCH] prep for pigment

---
 .../shared/components/Menu/EnteMenuItem.tsx   | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/web/packages/shared/components/Menu/EnteMenuItem.tsx b/web/packages/shared/components/Menu/EnteMenuItem.tsx
index 95e1cb0df8..ba5d63babd 100644
--- a/web/packages/shared/components/Menu/EnteMenuItem.tsx
+++ b/web/packages/shared/components/Menu/EnteMenuItem.tsx
@@ -148,17 +148,25 @@ const CaptionedText: React.FC<CaptionedTextProps> = ({
     mainText,
     caption,
     color,
-}) => {
-    const subTextColor = color == "critical" ? "critical.main" : "text.faint";
-    return (
-        <Stack direction="row" sx={{ gap: "4px", alignItems: "center" }}>
-            <Typography>{mainText}</Typography>
-            <Typography variant="small" sx={{ color: subTextColor }}>
-                {"•"}
-            </Typography>
-            <Typography variant="small" sx={{ color: subTextColor }}>
-                {caption}
-            </Typography>
-        </Stack>
-    );
-};
+}) => (
+    <Stack direction="row" sx={{ gap: "4px", alignItems: "center" }}>
+        <Typography>{mainText}</Typography>
+        <CaptionTypography color={color}>{"•"}</CaptionTypography>
+        <CaptionTypography color={color}>{caption}</CaptionTypography>
+    </Stack>
+);
+
+const CaptionTypography: React.FC<
+    React.PropsWithChildren<{ color: EnteMenuItemProps["color"] }>
+> = ({ color, children }) => (
+    <Typography
+        variant="small"
+        sx={[
+            color == "critical"
+                ? { color: "critical.main" }
+                : { color: "text.faint" },
+        ]}
+    >
+        {children}
+    </Typography>
+);