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