[web] Light mode changes - Revert the dialog blur (#4923)

+ other WIP

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

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>
             )}

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")}

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 }}>

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",

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>
                     )}

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,17 +113,17 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
     actionButton,
 }) => (
     <Stack sx={{ gap: "4px" }}>
-        <SpaceBetweenFlex sx={{ minHeight: "48px" }}>
-            <IconButton onClick={onClose} color={"primary"}>
+        <Stack direction="row" sx={{ justifyContent: "space-between" }}>
+            <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>
-        </SpaceBetweenFlex>
+        </Stack>
         <Box sx={{ px: "16px", py: "4px" }}>
             <Typography variant="h3">{title}</Typography>
             <Typography

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;
     }
 
     /**

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)",
@@ -181,12 +183,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)",
@@ -203,6 +214,7 @@ const _colors = {
             default: "#000",
             paper: "#1b1b1b",
             paper2: "#252525",
+            searchInput: "#1b1b1b",
         },
         backdrop: {
             base: "rgba(0 0 0 / 0.90)",
@@ -222,6 +234,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 +257,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 +347,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 },
@@ -532,7 +546,7 @@ const components: Components = {
         styleOverrides: {
             root: {
                 ".MuiBackdrop-root": {
-                    backgroundColor: "var(--mui-palette-backdrop-faint)",
+                    backgroundColor: "var(--mui-palette-backdrop-muted)",
                 },
             },
         },
@@ -549,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.
                 //

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 }} />

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": {

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")}