chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

select hover style

Browse Source
This commit is contained in:
Chuck Dries 2022-11-18 08:10:57 -08:00
parent 2d04bccc49
commit d6a043b00b
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
1 changed files with 1 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Select.tsx
View File

@ -8,7 +8,6 @@ import {
mergeProps, mergeProps,
useFocusRing, useFocusRing,
} from "react-aria"; } from "react-aria";
// import { SelectorIcon } from "@heroicons/react/solid";
import ChevronDown from "@spectrum-icons/workflow/ChevronDown"; import ChevronDown from "@spectrum-icons/workflow/ChevronDown";
import { ListBox } from "./ListBox"; import { ListBox } from "./ListBox";
@ -49,7 +48,7 @@ export function Select<T extends object>(props: AriaSelectProps<T>) {
/> />
<button <button
{...mergeProps(buttonProps, focusProps)} {...mergeProps(buttonProps, focusProps)}
className={`py-[5px] px-3 w-[150px] flex flex-row items-center justify-between overflow-hidden cursor-default rounded border ${ className={`py-[5px] px-3 w-[150px] flex flex-row items-center justify-between overflow-hidden cursor-default rounded border hover:bg-transparentblack ${
isFocusVisible ? "border-green-500" : "border-black" isFocusVisible ? "border-green-500" : "border-black"
} ${state.isOpen ? "bg-gray-100" : "bg-white"}`} } ${state.isOpen ? "bg-gray-100" : "bg-white"}`}
ref={ref} ref={ref}
@ -57,9 +56,6 @@ export function Select<T extends object>(props: AriaSelectProps<T>) {
<span <span
{...valueProps} {...valueProps}
className="text-sm" className="text-sm"
// className={`text-md flex-auto ${
// state.selectedItem ? "text-gray-800" : "text-gray-500"
// }`}
> >
{state.selectedItem {state.selectedItem
? state.selectedItem.rendered ? state.selectedItem.rendered
@ -70,9 +66,6 @@ export function Select<T extends object>(props: AriaSelectProps<T>) {
UNSAFE_style={{ UNSAFE_style={{
width: "15px", width: "15px",
}} }}
// UNSAFE_className={`w-[20px] h-5 ${
// isFocusVisible ? "text-pink-500" : "text-gray-500"
// }`}
/> />
</button> </button>
{state.isOpen && ( {state.isOpen && (