From dd01a4aaa52972a75bb82c09288de23c5494f1b7 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 15 Jan 2025 15:21:44 +0530
Subject: [PATCH] Hover and use

---
 web/apps/photos/src/components/Sidebar/Preferences.tsx | 2 +-
 web/packages/base/components/utils/mui-theme.d.ts      | 7 ++++---
 web/packages/base/components/utils/theme.ts            | 4 ++--
 web/packages/shared/components/Menu/EnteMenuItem.tsx   | 4 ++--
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/Preferences.tsx b/web/apps/photos/src/components/Sidebar/Preferences.tsx
index 5d68b5364a..9acd588fee 100644
--- a/web/apps/photos/src/components/Sidebar/Preferences.tsx
+++ b/web/apps/photos/src/components/Sidebar/Preferences.tsx
@@ -173,7 +173,7 @@ const ThemeSelector = () => {
     // During SSR, mode is always undefined.
     if (!mode) return null;
 
-    // TODO: Use translations, also remove unused t("CHOSE_THEME")
+    // TODO(LM): Use translations, also remove unused t("CHOSE_THEME")
     return (
         <DropdownInput
             options={[
diff --git a/web/packages/base/components/utils/mui-theme.d.ts b/web/packages/base/components/utils/mui-theme.d.ts
index 7b7048e0ce..cf84f1804a 100644
--- a/web/packages/base/components/utils/mui-theme.d.ts
+++ b/web/packages/base/components/utils/mui-theme.d.ts
@@ -185,13 +185,14 @@ declare module "@mui/material/styles" {
          * They come in three strengths which are meant to play nicely with the
          * corresponding strengths of "text.*" and "stroke.*".
          *
-         * The faint strength also comes with a pressed variant, useful to
-         * indicate the active state of buttons and menu items.
+         * The faint strength also comes with a hover variant, useful to
+         * indicate the hover state of buttons and menu items. TODO(LM) -
+         * consider moving to others.
          */
         fill: {
             muted: string;
             faint: string;
-            faintPressed: string;
+            faintHover: string;
         };
         /**
          * Transparent background fills that serve as the backdrop of modals,
diff --git a/web/packages/base/components/utils/theme.ts b/web/packages/base/components/utils/theme.ts
index 7cc738456c..e49325ca93 100644
--- a/web/packages/base/components/utils/theme.ts
+++ b/web/packages/base/components/utils/theme.ts
@@ -1,4 +1,4 @@
-// TODO:
+// TODO(LM)
 /* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
@@ -351,7 +351,7 @@ const getPalletteOptions = (
         fill: {
             muted: colors.fill!.muted!,
             faint: colors.fill!.faint!,
-            faintPressed: colors.fill!.faintPressed!,
+            faintHover: colors.fill!.faintPressed!,
         },
         stroke: {
             base: colors.stroke!.base!,
diff --git a/web/packages/shared/components/Menu/EnteMenuItem.tsx b/web/packages/shared/components/Menu/EnteMenuItem.tsx
index 5906b004a3..8b2f3ab4eb 100644
--- a/web/packages/shared/components/Menu/EnteMenuItem.tsx
+++ b/web/packages/shared/components/Menu/EnteMenuItem.tsx
@@ -85,7 +85,7 @@ export const EnteMenuItem: React.FC<EnteMenuItemProps> = ({
                 (theme) => ({
                     width: "100%",
                     "&:hover": {
-                        backgroundColor: theme.colors.fill.faintPressed,
+                        backgroundColor: theme.vars.palette.fill.faintHover,
                     },
                     "& .MuiSvgIcon-root": {
                         fontSize: "20px",
@@ -100,7 +100,7 @@ export const EnteMenuItem: React.FC<EnteMenuItemProps> = ({
                 variant != "secondary" &&
                     variant != "mini" &&
                     ((theme) => ({
-                        backgroundColor: theme.colors.fill.faint,
+                        backgroundColor: theme.vars.palette.fill.faint,
                     })),
             ]}
         >