OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling tweaks to search widget suggestions

Browse Source
This commit is contained in:
shamoon 2024-01-30 09:29:44 -08:00
parent 454d51808e
commit dde88bca26
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/widgets/search/search.jsx
View File

@ -146,7 +146,7 @@ export default function Search({ options }) {
return ( return (
<ContainerForm options={options} additionalClassNames="grow information-widget-search"> <ContainerForm options={options} additionalClassNames="grow information-widget-search">
<Raw> <Raw>
<div className="flex-col relative h-8 my-4 min-w-fit"> <div className="flex-col relative h-8 my-4 min-w-fit z-50">
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" /> <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
<Combobox value={query} onChange={submitCallback}> <Combobox value={query} onChange={submitCallback}>
<Combobox.Input <Combobox.Input
@ -226,8 +226,8 @@ export default function Search({ options }) {
</Listbox> </Listbox>
{searchSuggestions[1]?.length > 0 && ( {searchSuggestions[1]?.length > 0 && (
<Combobox.Options className="mt-2 rounded-md bg-theme-50 dark:bg-theme-800 border border-theme-300 dark:border-theme-200/50 cursor-pointer"> <Combobox.Options className="mt-1 rounded-md bg-theme-50 dark:bg-theme-800 border border-theme-300 dark:border-theme-200/30 cursor-pointer shadow-lg">
<div className="px-2 py-1 bg-white/50 dark:bg-white/10 text-theme-900 dark:text-white"> <div className="p-1 bg-white/50 dark:bg-white/10 text-theme-900/90 dark:text-white/90 text-xs">
<Combobox.Option key={query} value={query} /> <Combobox.Option key={query} value={query} />
{searchSuggestions[1].map((suggestion) => ( {searchSuggestions[1].map((suggestion) => (
@ -235,7 +235,7 @@ export default function Search({ options }) {
{({ active }) => ( {({ active }) => (
<span <span
className={classNames( className={classNames(
"px-1 rounded-md w-full", "px-2 py-1 rounded-md w-full",
active ? "bg-theme-300/20 dark:bg-white/10" : "", active ? "bg-theme-300/20 dark:bg-white/10" : "",
)} )}
> >