Adds radix tailwind + dropdown focus style (#4424)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/package.json

@@ -115,6 +115,7 @@
     "short-uuid": "^4.2.0",
     "stripe": "^9.16.0",
     "superjson": "1.9.1",
+    "tailwindcss-radix": "^2.6.0",
     "uuid": "^8.3.2",
     "web3": "^1.7.5",
     "zod": "^3.18.0"

packages/config/tailwind-preset.js

@@ -194,6 +194,7 @@ module.exports = {
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),
     require("@tailwindcss/line-clamp"),
+    require("tailwindcss-radix")(),
     plugin(({ addVariant }) => {
       addVariant("mac", ".mac &");
       addVariant("windows", ".windows &");

packages/ui/v2/core/Dropdown.tsx

@@ -15,7 +15,10 @@ export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTri
       {...props}
       className={
         props.asChild
-          ? className
+          ? classNames(
+              className,
+              "radix-state-open:bg-gray-100 radix-state-open:ring-brand-800 radix-state-open:ring-1"
+            )
           : `inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-1 group-hover:text-black ${className}`
       }
       ref={forwardedRef}