From 8dbdfd7d1edfc9d15959b9d912e029ade362e0fc Mon Sep 17 00:00:00 2001
From: Ngo Quoc Dat <datlechin@gmail.com>
Date: Wed, 23 Sep 2026 14:58:33 +0700
Subject: [PATCH] fix(ui): give Button a pointer cursor and the secondary
 variant a hover

The consent bar's Allow and Decline were the first secondary Buttons to
render as <button> rather than <a>. They showed an arrow cursor and nothing
on hover. Tailwind v4's preflight leaves buttons on the default cursor, and
the secondary variant had no hover at all; a link's pointer had always stood
in for one.

The primitive now carries cursor-pointer. Secondary steps up to
border-rule-strong over a bg-muted fill on hover, measured at 1.09:1 against
the card in light and 1.19:1 in dark. The transition covers background and
border as well as opacity. Every other secondary Button is a link and gains
the same hover.
---
 resources/js/components/ui/button.tsx          | 17 +++++++++++++----
 tests/Feature/Landing/AnalyticsConsentTest.php | 15 +++++++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/ui/button.tsx b/resources/js/components/ui/button.tsx
index 3c6fa8f..b83980b 100644
--- a/resources/js/components/ui/button.tsx
+++ b/resources/js/components/ui/button.tsx
@@ -12,11 +12,14 @@ type Size = 'sm' | 'md' | 'lg';
  * buttons ended up hand-written at four different padding scales instead.
  *
  * `secondary` takes `border-rule` so it moves with the two-weight rule system
- * rather than declaring its own black/white alphas.
+ * rather than declaring its own black/white alphas. Its hover steps up to
+ * `border-rule-strong` over a `bg-muted` fill. It had no hover state at all
+ * until the consent bar rendered it as a `<button>`: every earlier use was a
+ * link, and the link's pointer cursor had been the only feedback it gave.
  */
 const variants: Record<Variant, string> = {
     primary: 'bg-primary text-primary-foreground hover:opacity-90',
-    secondary: 'border border-rule text-foreground',
+    secondary: 'border border-rule text-foreground hover:border-rule-strong hover:bg-muted',
     ghost: 'text-muted-foreground hover:text-foreground',
 };
 
@@ -39,8 +42,14 @@ const sizes: Record<Size, string> = {
  */
 export function buttonClasses(variant: Variant = 'primary', size: Size = 'md', className?: string): string {
     return cn(
-        'inline-flex items-center justify-center gap-2 rounded-full font-semibold',
-        'transition-opacity duration-(--dur-tap) ease-(--ease-feedback)',
+        /*
+         * `cursor-pointer` because Tailwind v4's preflight leaves `<button>` on
+         * the default arrow. A link gets the pointer from the browser, so
+         * without this the same pill read as clickable or not depending on
+         * which element it rendered as.
+         */
+        'inline-flex cursor-pointer items-center justify-center gap-2 rounded-full font-semibold',
+        'transition-[opacity,background-color,border-color] duration-(--dur-tap) ease-(--ease-feedback)',
         variants[variant],
         sizes[size],
         className,
diff --git a/tests/Feature/Landing/AnalyticsConsentTest.php b/tests/Feature/Landing/AnalyticsConsentTest.php
index 0094e3f..d695454 100644
--- a/tests/Feature/Landing/AnalyticsConsentTest.php
+++ b/tests/Feature/Landing/AnalyticsConsentTest.php
@@ -130,6 +130,21 @@
     Assert::assertSame($props[0], $props[1], 'Allow and Decline must be styled identically');
 });
 
+/*
+ * The bar's buttons were the first secondary `Button`s to render as `<button>`
+ * rather than `<a>`, and they showed an arrow cursor and no hover: Tailwind v4
+ * leaves buttons on the default cursor, and the variant had no hover because
+ * a link's pointer had always stood in for one.
+ */
+it('makes the Allow and Decline buttons look clickable', function () use ($readSource): void {
+    $button = $readSource('resources/js/components/ui/button.tsx');
+
+    preg_match("/secondary: '([^']+)'/", $button, $secondary);
+
+    expect($button)->toMatch("/'inline-flex cursor-pointer /");
+    expect($secondary[1] ?? '')->toContain('hover:');
+});
+
 it('tells readers which cookies analytics sets and how to take consent back', function () use ($readSource): void {
     $privacy = $readSource('resources/js/pages/Privacy.tsx');