From 7b0c920c578a9220c0bad69d2f6b69023f8beece Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Mon, 30 Dec 2024 14:15:56 +0100
Subject: [PATCH] fix: state in radix components changed (#6233)

---
 .changeset/wild-llamas-flow.md                      | 5 +++++
 packages/web/app/src/components/ui/tabs.tsx         | 2 +-
 packages/web/app/src/components/v2/radio-group.tsx  | 2 +-
 packages/web/app/src/components/v2/radix-button.tsx | 4 ++--
 packages/web/app/src/components/v2/switch.tsx       | 2 +-
 5 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/wild-llamas-flow.md

diff --git a/.changeset/wild-llamas-flow.md b/.changeset/wild-llamas-flow.md
new file mode 100644
index 000000000..3e9efe3a0
--- /dev/null
+++ b/.changeset/wild-llamas-flow.md
@@ -0,0 +1,5 @@
+---
+'hive': patch
+---
+
+Tiny UI fixes
diff --git a/packages/web/app/src/components/ui/tabs.tsx b/packages/web/app/src/components/ui/tabs.tsx
index 8a24c04cd..a7929f15f 100644
--- a/packages/web/app/src/components/ui/tabs.tsx
+++ b/packages/web/app/src/components/ui/tabs.tsx
@@ -24,7 +24,7 @@ const tabsTriggerVariants = cva('cursor-pointer !appearance-none text-sm font-me
     variant: {
       default:
         'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 data-[state=active]:shadow-sm disabled:cursor-not-allowed active:disabled:pointer-events-none',
-      menu: 'text-white radix-state-active:border-b-orange-500 border-b-2 border-b-transparent px-4 py-3 hover:border-b-orange-900',
+      menu: 'text-white data-[state=active]:border-b-orange-500 border-b-2 border-b-transparent px-4 py-3 hover:border-b-orange-900',
       content:
         'mb-[-1px] rounded-none border-b first:pl-1 py-1 px-2 text-white data-[state=active]:border-orange-500 data-[state=active]:text-orange-500',
     },
diff --git a/packages/web/app/src/components/v2/radio-group.tsx b/packages/web/app/src/components/v2/radio-group.tsx
index 2cc99e55d..0be5b5539 100644
--- a/packages/web/app/src/components/v2/radio-group.tsx
+++ b/packages/web/app/src/components/v2/radio-group.tsx
@@ -14,7 +14,7 @@ export const Radio = ({ children, className, ...props }: RadioGroupItemProps): R
   return (
     <Item
       className={clsx(
-        'radix-state-checked:border-orange-500 relative overflow-hidden rounded-sm border text-left hover:border-orange-500/50 focus:ring',
+        'relative overflow-hidden rounded-sm border text-left hover:border-orange-500/50 focus:ring data-[state=checked]:border-orange-500',
         className,
       )}
       {...props}
diff --git a/packages/web/app/src/components/v2/radix-button.tsx b/packages/web/app/src/components/v2/radix-button.tsx
index 332d9b05e..b3b3a7fb6 100644
--- a/packages/web/app/src/components/v2/radix-button.tsx
+++ b/packages/web/app/src/components/v2/radix-button.tsx
@@ -13,8 +13,8 @@ const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(
           'focus-within:ring',
           // Register all radix states
           'group',
-          'dark:radix-state-open:bg-gray-900',
-          'dark:radix-state-on:bg-gray-900',
+          'dark:data-[state=open]:bg-gray-900',
+          'dark:data-[state=on]:bg-gray-900',
           className,
         )}
       >
diff --git a/packages/web/app/src/components/v2/switch.tsx b/packages/web/app/src/components/v2/switch.tsx
index dc54a09bb..30a4797d2 100644
--- a/packages/web/app/src/components/v2/switch.tsx
+++ b/packages/web/app/src/components/v2/switch.tsx
@@ -15,7 +15,7 @@ export const Switch = ({ className, disabled, ...props }: SwitchProps): ReactEle
     >
       <SwitchPrimitive.Thumb
         className={clsx(
-          'radix-state-checked:translate-x-5 radix-state-checked:bg-orange-500 hover:radix-state-checked:border-orange-800 block size-[25px] rounded-full border-2 border-transparent bg-gray-500 transition-all',
+          'block size-[25px] rounded-full border-2 border-transparent bg-gray-500 transition-all data-[state=checked]:translate-x-5 data-[state=checked]:bg-orange-500 hover:data-[state=checked]:border-orange-800',
           !disabled && 'hover:border-gray-700',
         )}
       />