Search input

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)",
@@ -212,6 +214,7 @@ const _colors = {
             default: "#000",
             paper: "#1b1b1b",
             paper2: "#252525",
+            searchInput: "#1b1b1b",
         },
         backdrop: {
             base: "rgba(0 0 0 / 0.90)",

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