This commit is contained in:
Manav Rathi 2024-09-11 12:19:45 +05:30
parent 71d77a62fd
commit 1d239d409f
No known key found for this signature in database

View File

@ -65,7 +65,7 @@ import {
} from "react-select"; } from "react-select";
import AsyncSelect from "react-select/async"; import AsyncSelect from "react-select/async";
import { getAutoCompleteSuggestions } from "services/searchService"; import { getAutoCompleteSuggestions } from "services/searchService";
import { Collection } from "types/collection"; import { type Collection } from "types/collection";
interface SearchBarProps { interface SearchBarProps {
isInSearchMode: boolean; isInSearchMode: boolean;
@ -285,51 +285,49 @@ const SearchInputWrapper = styled(Box)`
const useSelectStyles = ({ const useSelectStyles = ({
colors, colors,
}: Theme): StylesConfig<SearchOption, false> => { }: Theme): StylesConfig<SearchOption, false> => ({
return { container: (style) => ({ ...style, flex: 1 }),
container: (style) => ({ ...style, flex: 1 }), control: (style, { isFocused }) => ({
control: (style, { isFocused }) => ({ ...style,
...style, backgroundColor: colors.background.elevated,
backgroundColor: colors.background.elevated, borderColor: isFocused ? colors.accent.A500 : "transparent",
borderColor: isFocused ? colors.accent.A500 : "transparent", boxShadow: "none",
boxShadow: "none", ":hover": {
":hover": { borderColor: colors.accent.A300,
borderColor: colors.accent.A300, cursor: "text",
cursor: "text", },
}, }),
}), input: (styles) => ({ ...styles, color: colors.text.base }),
input: (styles) => ({ ...styles, color: colors.text.base }), menu: (style) => ({
menu: (style) => ({ ...style,
...style, // Suppress the default margin at the top.
// Suppress the default margin at the top. marginTop: "1px",
marginTop: "1px", backgroundColor: colors.background.elevated,
backgroundColor: colors.background.elevated, }),
}), option: (style, { isFocused }) => ({
option: (style, { isFocused }) => ({ ...style,
...style, padding: 0,
padding: 0, backgroundColor: "transparent !important",
backgroundColor: "transparent !important", "& :hover": {
"& :hover": { cursor: "pointer",
cursor: "pointer", },
}, "& .main": {
"& .main": { backgroundColor: isFocused && colors.background.elevated2,
backgroundColor: isFocused && "#202020", },
}, "&:last-child .MuiDivider-root": {
"&:last-child .MuiDivider-root": { display: "none",
display: "none", },
}, }),
}), placeholder: (style) => ({
placeholder: (style) => ({ ...style,
...style, color: colors.text.muted,
color: colors.text.muted, whiteSpace: "nowrap",
whiteSpace: "nowrap", }),
}), // Hide some things we don't need.
// Hide some things we don't need. dropdownIndicator: (style) => ({ ...style, display: "none" }),
dropdownIndicator: (style) => ({ ...style, display: "none" }), indicatorSeparator: (style) => ({ ...style, display: "none" }),
indicatorSeparator: (style) => ({ ...style, display: "none" }), clearIndicator: (style) => ({ ...style, display: "none" }),
clearIndicator: (style) => ({ ...style, display: "none" }), });
};
};
const Control = ({ children, ...props }: ControlProps<SearchOption, false>) => ( const Control = ({ children, ...props }: ControlProps<SearchOption, false>) => (
<SelectComponents.Control {...props}> <SelectComponents.Control {...props}>