From eed458010cd1dc4c8bf2a565203650c645c44e08 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 20 Dec 2023 11:19:22 +0100
Subject: [PATCH] fix(components): style open state

---
 .../form-field/listbox/listbox-button-text-value.tsx        | 6 +++++-
 src/components/form-field/listbox/listbox-button.tsx        | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/form-field/listbox/listbox-button-text-value.tsx b/src/components/form-field/listbox/listbox-button-text-value.tsx
index a0be735a..7bab662f 100644
--- a/src/components/form-field/listbox/listbox-button-text-value.tsx
+++ b/src/components/form-field/listbox/listbox-button-text-value.tsx
@@ -7,7 +7,11 @@ export interface ListboxButtonTextValueProps {
 
 export const ListboxButtonTextValue = ({ placeholder, value }: ListboxButtonTextValueProps) => {
     if (!value) {
-        return <div className="paragraph-100 text-neutral-600">{placeholder}</div>;
+        return (
+            <div className="paragraph-100 text-neutral-600 group-hover:text-neutral-700">
+                {placeholder}
+            </div>
+        );
     }
     return <div className="paragraph-100">{value}</div>;
 };
diff --git a/src/components/form-field/listbox/listbox-button.tsx b/src/components/form-field/listbox/listbox-button.tsx
index 392292c2..c382af09 100644
--- a/src/components/form-field/listbox/listbox-button.tsx
+++ b/src/components/form-field/listbox/listbox-button.tsx
@@ -10,7 +10,7 @@ export interface ListboxButtonProps {
 
 const ListboxButton = ({ children }: ListboxButtonProps) => {
     return (
-        <Listbox.Button className="flex h-8 w-full cursor-pointer items-center rounded border border-neutral-400 py-2 pl-3 pr-8">
+        <Listbox.Button className="group flex h-8 w-full cursor-pointer items-center rounded border border-neutral-400 py-2 pl-3 pr-8 outline-none hover:border-neutral-600 focus:border-primary-400 focus:ring-2 focus:ring-primary-200 ui-open:border-primary-400 ui-open:ring-2 ui-open:ring-primary-200">
             {children}
             <div className="absolute inset-y-0 right-0 flex items-center px-1.5">
                 <div className="flex h-5 w-5 items-center justify-center rounded rounded-r-md bg-neutral-100  focus:outline-none">