From 3a7914e1bfdca1bd5a55457d2e9ab1b920c42c24 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 31 Jan 2025 14:31:03 +0530
Subject: [PATCH 1/7] Also for drawers

---
 web/packages/base/components/utils/theme.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/packages/base/components/utils/theme.ts b/web/packages/base/components/utils/theme.ts
index 53749dffda..1d8825cfcd 100644
--- a/web/packages/base/components/utils/theme.ts
+++ b/web/packages/base/components/utils/theme.ts
@@ -532,7 +532,11 @@ const components: Components = {
         styleOverrides: {
             root: {
                 ".MuiBackdrop-root": {
-                    backgroundColor: "var(--mui-palette-backdrop-faint)",
+                    // Use a translucent color for the backdrop.
+                    backgroundColor: "var(--mui-palette-backdrop-muted)",
+                    // Apply a blur to the existing contents on which we're
+                    // shown, and show some of it through by reducing opacity.
+                    backdropFilter: "blur(60px) opacity(80%)",
                 },
             },
         },
@@ -548,11 +552,10 @@ const components: Components = {
         },
         styleOverrides: {
             root: {
+                // Modify the backdrop of dialogs similar to what we do for
+                // drawers (but with slightly different values).
                 ".MuiBackdrop-root": {
-                    // Use a translucent color for the backdrop.
                     backgroundColor: "var(--mui-palette-backdrop-muted)",
-                    // Apply a blur to the existing contents on which we're
-                    // shown, and show some of it through by reducing opacity.
                     backdropFilter: "blur(30px) opacity(95%)",
                 },
                 // Reset the MUI default paddings to 16px everywhere.

From 5a8d45fa9871a39880cf3f957b6d0e252d7af851 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 31 Jan 2025 14:36:32 +0530
Subject: [PATCH 2/7] Subtler

Revert "Also for drawers"

This reverts commit 3a7914e1bfdca1bd5a55457d2e9ab1b920c42c24.
---
 .../src/components/Collections/CollectionShare.tsx       | 5 -----
 web/packages/base/components/utils/theme.ts              | 9 +++------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx
index 461f7f8643..fee247b393 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx
@@ -105,11 +105,6 @@ export const CollectionShare: React.FC<CollectionShareProps> = ({
             anchor="right"
             open={props.open}
             onClose={handleDrawerClose}
-            slotProps={{
-                backdrop: {
-                    sx: { "&&&": { backgroundColor: "transparent" } },
-                },
-            }}
         >
             <Stack sx={{ gap: "4px", py: "12px" }}>
                 <Titlebar
diff --git a/web/packages/base/components/utils/theme.ts b/web/packages/base/components/utils/theme.ts
index 1d8825cfcd..3cf5e0ee79 100644
--- a/web/packages/base/components/utils/theme.ts
+++ b/web/packages/base/components/utils/theme.ts
@@ -532,11 +532,7 @@ const components: Components = {
         styleOverrides: {
             root: {
                 ".MuiBackdrop-root": {
-                    // Use a translucent color for the backdrop.
                     backgroundColor: "var(--mui-palette-backdrop-muted)",
-                    // Apply a blur to the existing contents on which we're
-                    // shown, and show some of it through by reducing opacity.
-                    backdropFilter: "blur(60px) opacity(80%)",
                 },
             },
         },
@@ -552,10 +548,11 @@ const components: Components = {
         },
         styleOverrides: {
             root: {
-                // Modify the backdrop of dialogs similar to what we do for
-                // drawers (but with slightly different values).
                 ".MuiBackdrop-root": {
+                    // Use a translucent color for the backdrop.
                     backgroundColor: "var(--mui-palette-backdrop-muted)",
+                    // Apply a blur to the existing contents on which we're
+                    // shown, and show some of it through by reducing opacity.
                     backdropFilter: "blur(30px) opacity(95%)",
                 },
                 // Reset the MUI default paddings to 16px everywhere.

From b24b249352191f673b49abbbc5fee6fdf060260d Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 31 Jan 2025 14:47:47 +0530
Subject: [PATCH 3/7] s

---
 web/apps/photos/src/components/Export.tsx                   | 2 +-
 web/apps/photos/src/components/ExportPendingList.tsx        | 2 +-
 web/apps/photos/src/components/PhotoViewer/FileInfo.tsx     | 5 +----
 web/apps/photos/src/components/PhotoViewer/index.tsx        | 2 +-
 web/packages/base/components/Titlebar.tsx                   | 2 +-
 web/packages/base/components/mui/SidebarDrawer.tsx          | 4 ++--
 web/packages/new/photos/components/gallery/PeopleHeader.tsx | 2 +-
 7 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/web/apps/photos/src/components/Export.tsx b/web/apps/photos/src/components/Export.tsx
index 60d7acce63..a10e855fad 100644
--- a/web/apps/photos/src/components/Export.tsx
+++ b/web/apps/photos/src/components/Export.tsx
@@ -235,7 +235,7 @@ function ExportDirectory({ exportFolder, changeExportDirectory, exportStage }) {
                     )}
                 </>
             ) : (
-                <Button color={"accent"} onClick={changeExportDirectory}>
+                <Button color="accent" onClick={changeExportDirectory}>
                     {t("select_folder")}
                 </Button>
             )}
diff --git a/web/apps/photos/src/components/ExportPendingList.tsx b/web/apps/photos/src/components/ExportPendingList.tsx
index 266bb0e221..c9e87afca8 100644
--- a/web/apps/photos/src/components/ExportPendingList.tsx
+++ b/web/apps/photos/src/components/ExportPendingList.tsx
@@ -71,7 +71,7 @@ const ExportPendingList = (props: Iprops) => {
             />
             <FocusVisibleButton
                 fullWidth
-                color={"secondary"}
+                color="secondary"
                 onClick={props.onClose}
             >
                 {t("close")}
diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
index 9a27993fb3..838cf5b374 100644
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
@@ -964,10 +964,7 @@ const RawExif: React.FC<RawExifProps> = ({
                 caption={fileName}
                 onRootClose={handleRootClose}
                 actionButton={
-                    <CopyButton
-                        code={JSON.stringify(tags)}
-                        color={"secondary"}
-                    />
+                    <CopyButton code={JSON.stringify(tags)} color="secondary" />
                 }
             />
             <Stack sx={{ gap: 2, py: 3, px: 1 }}>
diff --git a/web/apps/photos/src/components/PhotoViewer/index.tsx b/web/apps/photos/src/components/PhotoViewer/index.tsx
index 16c931a1d1..3fa8f01d83 100644
--- a/web/apps/photos/src/components/PhotoViewer/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/index.tsx
@@ -1037,7 +1037,7 @@ const ConversionFailedNotification: React.FC<
         >
             <Paper sx={{ width: "320px" }}>
                 <Button
-                    color={"secondary"}
+                    color="secondary"
                     onClick={handleClick}
                     sx={{
                         borderRadius: "8px",
diff --git a/web/packages/base/components/Titlebar.tsx b/web/packages/base/components/Titlebar.tsx
index 3e0462d30c..d64041c491 100644
--- a/web/packages/base/components/Titlebar.tsx
+++ b/web/packages/base/components/Titlebar.tsx
@@ -39,7 +39,7 @@ export const Titlebar: React.FC<TitlebarProps> = ({
                 <Stack direction="row" sx={{ gap: "4px" }}>
                     {actionButton && actionButton}
                     {!backIsClose && (
-                        <IconButton onClick={onRootClose} color={"secondary"}>
+                        <IconButton onClick={onRootClose} color="secondary">
                             <CloseIcon />
                         </IconButton>
                     )}
diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index 5838f31b7a..ce241f11b6 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -115,12 +115,12 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
 }) => (
     <Stack sx={{ gap: "4px" }}>
         <SpaceBetweenFlex sx={{ minHeight: "48px" }}>
-            <IconButton onClick={onClose} color={"primary"}>
+            <IconButton onClick={onClose} color="primary">
                 <ArrowBackIcon />
             </IconButton>
             <Stack direction="row" sx={{ gap: "4px" }}>
                 {actionButton && actionButton}
-                <IconButton onClick={onRootClose} color={"secondary"}>
+                <IconButton onClick={onRootClose} color="secondary">
                     <CloseIcon />
                 </IconButton>
             </Stack>
diff --git a/web/packages/new/photos/components/gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
index cb8546d178..2100994a60 100644
--- a/web/packages/new/photos/components/gallery/PeopleHeader.tsx
+++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
@@ -721,7 +721,7 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
                     fullWidth
                     disabled={!hasUnsavedChanges}
                     loading={state.activity == "saving"}
-                    color={"accent"}
+                    color="accent"
                     onClick={handleSave}
                 >
                     {t("save")}

From 8e3608c396436a902185eed0076256f46197011f Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 31 Jan 2025 14:52:01 +0530
Subject: [PATCH 4/7] Conv

---
 web/packages/base/components/mui/SidebarDrawer.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index ce241f11b6..b7be986181 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -10,7 +10,6 @@ import {
     type DrawerProps,
 } from "@mui/material";
 import React from "react";
-import { SpaceBetweenFlex } from "../containers";
 import type { ModalVisibilityProps } from "../utils/modal";
 
 /**
@@ -114,7 +113,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
     actionButton,
 }) => (
     <Stack sx={{ gap: "4px" }}>
-        <SpaceBetweenFlex sx={{ minHeight: "48px" }}>
+        <Stack direction="row" sx={{ justifyContent: "space-between" }}>
             <IconButton onClick={onClose} color="primary">
                 <ArrowBackIcon />
             </IconButton>
@@ -124,7 +123,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
                     <CloseIcon />
                 </IconButton>
             </Stack>
-        </SpaceBetweenFlex>
+        </Stack>
         <Box sx={{ px: "16px", py: "4px" }}>
             <Typography variant="h3">{title}</Typography>
             <Typography

From cecb7fd4f485a36b59d446f791041975cd03044d Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 31 Jan 2025 15:23:06 +0530
Subject: [PATCH 5/7] Solids

---
 web/packages/base/components/utils/theme.ts | 27 +++++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/web/packages/base/components/utils/theme.ts b/web/packages/base/components/utils/theme.ts
index 3cf5e0ee79..872ba9d0ea 100644
--- a/web/packages/base/components/utils/theme.ts
+++ b/web/packages/base/components/utils/theme.ts
@@ -181,12 +181,21 @@ const _colors = {
         },
         fill: {
             base: "#000",
+            /* TODO: Unused */
             baseHover: "rgba(0 0 0 / 0.87)",
             muted: "rgba(0 0 0 / 0.12)",
             faint: "rgba(0 0 0 / 0.04)",
+            /** TODO(LM): Needed? */
             faintHover: "rgba(0 0 0 / 0.08)",
             fainter: "rgba(0 0 0 / 0.02)",
         },
+        // MUI (as of v6.4) doesn't like it if we specify a non-solid color for
+        // primary.main or secondary.main, or don't specify it using the #nnnnnn
+        // notation; it seems to mess with the derivation of the color channels.
+        secondary: {
+            main: "#f5f5f5",
+            hover: "#e9e9e9",
+        },
         stroke: {
             base: "#000",
             muted: "rgba(0 0 0 / 0.24)",
@@ -222,6 +231,10 @@ const _colors = {
             faintHover: "rgba(255 255 255 / 0.16)",
             fainter: "rgba(255 255 255 / 0.05)",
         },
+        secondary: {
+            main: "#1f1f1f",
+            hover: "#292929",
+        },
         stroke: {
             base: "#fff",
             muted: "rgba(255 255 255 / 0.24)",
@@ -241,13 +254,12 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
             background: colors.light.background,
             backdrop: colors.light.backdrop,
             primary: {
-                main: colors.light.fill.base,
-                dark: colors.light.fill.baseHover,
+                main: colors.fixed.black,
                 contrastText: colors.fixed.white,
             },
             secondary: {
-                main: colors.light.fill.faint,
-                dark: colors.light.fill.faintHover,
+                main: colors.light.secondary.main,
+                dark: colors.light.secondary.hover,
                 contrastText: colors.light.text.base,
             },
             success: { main: colors.fixed.success },
@@ -332,13 +344,12 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
             background: colors.dark.background,
             backdrop: colors.dark.backdrop,
             primary: {
-                main: colors.dark.fill.base,
-                dark: colors.dark.fill.baseHover,
+                main: colors.fixed.white,
                 contrastText: colors.fixed.black,
             },
             secondary: {
-                main: colors.dark.fill.faint,
-                dark: colors.dark.fill.faintHover,
+                main: colors.dark.secondary.main,
+                dark: colors.dark.secondary.hover,
                 contrastText: colors.dark.text.base,
             },
             success: { main: colors.fixed.success },

From e2876d3d2431eda89d31fedd43c50d87c336dc0a Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 31 Jan 2025 15:47:19 +0530
Subject: [PATCH 6/7] Search input

---
 web/packages/base/components/utils/mui-theme.d.ts | 5 +++++
 web/packages/base/components/utils/theme.ts       | 5 ++++-
 web/packages/new/photos/components/SearchBar.tsx  | 8 +++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/packages/base/components/utils/mui-theme.d.ts b/web/packages/base/components/utils/mui-theme.d.ts
index 1075f01182..17a2df19cb 100644
--- a/web/packages/base/components/utils/mui-theme.d.ts
+++ b/web/packages/base/components/utils/mui-theme.d.ts
@@ -15,12 +15,17 @@ declare module "@mui/material/styles" {
      * - background.default
      * - background.paper
      * - background.paper2
+     * - background.searchInput
      */
     interface TypeBackground {
         /**
          * A second level elevation, indicating a paper within a paper.
          */
         paper2: string;
+        /**
+         * Background color for the search input area.
+         */
+        searchInput: string;
     }
 
     /**
diff --git a/web/packages/base/components/utils/theme.ts b/web/packages/base/components/utils/theme.ts
index 872ba9d0ea..265f4b729b 100644
--- a/web/packages/base/components/utils/theme.ts
+++ b/web/packages/base/components/utils/theme.ts
@@ -164,10 +164,12 @@ const _colors = {
         storageCardUsageFill: "rgba(255 255 255 / 0.2)",
     },
     light: {
+        // Keep these solid.
         background: {
             default: "#fff",
             paper: "#fff",
-            paper2: "rgba(153 153 153 / 0.04)",
+            paper2: "#fbfbfb",
+            searchInput: "#f3f3f3",
         },
         backdrop: {
             base: "rgba(255 255 255 / 0.92)",
@@ -212,6 +214,7 @@ const _colors = {
             default: "#000",
             paper: "#1b1b1b",
             paper2: "#252525",
+            searchInput: "#1b1b1b",
         },
         backdrop: {
             base: "rgba(0 0 0 / 0.90)",
diff --git a/web/packages/new/photos/components/SearchBar.tsx b/web/packages/new/photos/components/SearchBar.tsx
index 988de3c822..57af9df40a 100644
--- a/web/packages/new/photos/components/SearchBar.tsx
+++ b/web/packages/new/photos/components/SearchBar.tsx
@@ -264,7 +264,13 @@ const createSelectStyles = (
     container: (style) => ({ ...style, flex: 1 }),
     control: (style, { isFocused }) => ({
         ...style,
-        backgroundColor: theme.vars.palette.background.paper,
+        /* TODO(LM): Revisit? */
+        /*
+        backgroundColor: isFocused
+            ? theme.vars.palette.background.paper2
+            : theme.vars.palette.background.searchInput,
+            */
+        backgroundColor: theme.vars.palette.background.searchInput,
         borderColor: isFocused ? theme.vars.palette.accent.main : "transparent",
         boxShadow: "none",
         ":hover": {

From 0869421d9c8c351f0e4b9aea80aebf3f70e347cf Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 31 Jan 2025 15:53:36 +0530
Subject: [PATCH 7/7] Too strong too do always perhaps, need more thought

---
 web/packages/base/components/utils/theme.ts         | 4 ----
 web/packages/new/photos/components/PlanSelector.tsx | 3 +++
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/packages/base/components/utils/theme.ts b/web/packages/base/components/utils/theme.ts
index 265f4b729b..19dbb485ce 100644
--- a/web/packages/base/components/utils/theme.ts
+++ b/web/packages/base/components/utils/theme.ts
@@ -563,11 +563,7 @@ const components: Components = {
         styleOverrides: {
             root: {
                 ".MuiBackdrop-root": {
-                    // Use a translucent color for the backdrop.
                     backgroundColor: "var(--mui-palette-backdrop-muted)",
-                    // Apply a blur to the existing contents on which we're
-                    // shown, and show some of it through by reducing opacity.
-                    backdropFilter: "blur(30px) opacity(95%)",
                 },
                 // Reset the MUI default paddings to 16px everywhere.
                 //
diff --git a/web/packages/new/photos/components/PlanSelector.tsx b/web/packages/new/photos/components/PlanSelector.tsx
index 8f5c7855b1..3b12becf48 100644
--- a/web/packages/new/photos/components/PlanSelector.tsx
+++ b/web/packages/new/photos/components/PlanSelector.tsx
@@ -87,6 +87,9 @@ export const PlanSelector: React.FC<PlanSelectorProps> = ({
                         [theme.breakpoints.down(360)]: { p: 0 },
                     }),
                 },
+                backdrop: {
+                    sx: { backdropFilter: "blur(30px) opacity(95%)" },
+                },
             }}
         >
             <PlanSelectorCard {...{ onClose, setLoading }} />