SearchBox: Unify suggestions and input design (#854)

src/components/SearchBox/AutocompleteInput.tsx

@@ -15,6 +15,7 @@ import { useGetOptions } from './useGetOptions';
 import { useInputValueState } from './options/geocoder';
 import { useRouter } from 'next/router';
 import { useUserSettingsContext } from '../utils/UserSettingsContext';
+import { OptionsPaper, OptionsPopper } from './optionsPopper';
 
 type SearchBoxInputProps = {
   params: any;
@@ -113,6 +114,7 @@ export const AutocompleteInput: React.FC<AutocompleteInputProps> = ({
           autocompleteRef={autocompleteRef}
         />
       )}
+      slots={{ paper: OptionsPaper, popper: OptionsPopper }}
       renderOption={renderOptionFactory(
         inputValue,
         currentTheme,

src/components/SearchBox/optionsPopper.tsx

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+import { Paper, PaperProps, Popper, PopperProps } from '@mui/material';
+import { useFeatureContext } from '../utils/FeatureContext';
+
+const StyledPaper = styled(Paper)<PaperProps & { $solidBg: boolean }>`
+  background-color: ${({ theme, $solidBg }) =>
+    $solidBg
+      ? theme.palette.background.searchInputSolid
+      : theme.palette.background.searchInput};
+  -webkit-backdrop-filter: blur(35px);
+  backdrop-filter: blur(35px);
+`;
+
+export const OptionsPaper = (props: PaperProps) => {
+  const { feature } = useFeatureContext();
+  return <StyledPaper {...props} $solidBg={!!feature} />;
+};
+
+export const OptionsPopper = styled(Popper)<PopperProps>`
+  padding-top: 5px;
+`;

src/helpers/theme.tsx

@@ -26,6 +26,7 @@ const lightTheme = createTheme({
       hover: '#f2f3f2',
       searchBox: '#eb5757',
       searchInput: 'rgba(255,255,255,0.6)',
+      searchInputSolid: 'rgb(249, 248, 244)',
       searchInputPanel: 'rgba(255,255,255,0.8)',
     },
     invertFilter: 'invert(0)',
@@ -68,6 +69,7 @@ const darkTheme = createTheme({
       hover: grey['700'],
       searchBox: '#963838',
       searchInput: 'rgba(0,0,0,0.5)',
+      searchInputSolid: 'rgb(35, 26, 26)',
       searchInputPanel: 'rgba(0,0,0,0.7)',
     },
     invertFilter: 'invert(1)',

types.d.ts

@@ -42,6 +42,7 @@ declare module '@mui/material/styles' {
     hover?: string;
     searchBox?: string;
     searchInput?: string;
+    searchInputSolid?: string;
     searchInputPanel?: string;
   }