From 8ad0141ab8bc63c1f62e7cf2ba14136266e8aea7 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 5 Aug 2026 17:06:47 +0100
Subject: [PATCH] fix(ui): align LandingButton sizing and hero/pricing CTA
 consistency (#833)

* fix(ui): restore theme pill radius on course landing CTAs

LandingButton hardcoded rounded-md, so hero Enroll and pricing CTAs
lost the per-theme pill radius after CoursePrimaryAction switched to
LandingButton. Use --landing-radius-pill and cn() so theme overrides
still win.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): preserve landing theme button radii

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): restore hero CTA Button sizing with disabled parity

Revert CoursePrimaryAction to the shared Button so hero enroll matches
View curriculum sizing (h-10 text-sm). When enrollment is closed, apply
landing-button CSS vars with forced opacity so theme color overrides do
not keep the hero CTA looking active while pricing stays muted.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): align LandingButton sizing and use for hero CTA

Match LandingButton sm/md/lg heights to the shared Button scale (h-8/h-9/h-10,
text-sm) so hero enroll can use landing-theme tokens without oversized CTAs.

CoursePrimaryAction returns to LandingButton for enabled color parity with
pricing; disabled overrides are preserved. Terminal hero drops hardcoded hex
colors in favor of --landing-button-* tokens.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

---------
---
 .../org-landing-page/course-primary-action.svelte    | 12 +++++-------
 .../custom/org-landing-page/landing-button.svelte    |  9 +++++----
 .../src/custom/org-landing-page/terminal/hero.svelte |  6 +-----
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/custom/org-landing-page/course-primary-action.svelte b/packages/ui/src/custom/org-landing-page/course-primary-action.svelte
index 2e1b14a9..5a4a88eb 100644
--- a/packages/ui/src/custom/org-landing-page/course-primary-action.svelte
+++ b/packages/ui/src/custom/org-landing-page/course-primary-action.svelte
@@ -18,13 +18,11 @@
   const landingSize = $derived<LandingButtonSize>(size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md');
   const isDisabled = $derived(action.disabled ?? false);
 
-  const disabledClass = $derived(
-    variant === 'secondary'
-      ? 'ui:!bg-[var(--landing-button-secondary-bg)] ui:!text-[var(--landing-button-secondary-fg)] ui:hover:!bg-[var(--landing-button-secondary-bg)]'
-      : variant === 'tertiary'
-        ? 'ui:!bg-transparent ui:!text-[var(--landing-button-tertiary-fg)] ui:hover:!bg-transparent'
-        : 'ui:!bg-[var(--landing-button-primary-bg)] ui:!text-[var(--landing-button-primary-fg)] ui:hover:!bg-[var(--landing-button-primary-bg)]'
-  );
+  // Match pricing CTA disabled appearance: theme hero color overrides must not win when enrollment is closed.
+  const disabledClass =
+    'ui:pointer-events-none ui:!opacity-50 ui:disabled:opacity-50 ui:aria-disabled:opacity-50' +
+    ' ui:!bg-[var(--landing-button-primary-bg)] ui:!text-[var(--landing-button-primary-fg)]' +
+    ' ui:hover:!bg-[var(--landing-button-primary-bg)] ui:hover:!opacity-50 ui:!border-transparent';
 </script>
 
 <LandingButton
diff --git a/packages/ui/src/custom/org-landing-page/landing-button.svelte b/packages/ui/src/custom/org-landing-page/landing-button.svelte
index 40a595a3..2b2f4851 100644
--- a/packages/ui/src/custom/org-landing-page/landing-button.svelte
+++ b/packages/ui/src/custom/org-landing-page/landing-button.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { cn } from '../../tools';
 
   type Variant = 'primary' | 'secondary' | 'tertiary';
   type Size = 'sm' | 'md' | 'lg';
@@ -30,10 +31,10 @@
 
   const sizeClass = $derived(
     size === 'sm'
-      ? 'ui:px-3 ui:py-1.5 ui:text-sm'
+      ? 'ui:h-8 ui:px-3 ui:text-sm'
       : size === 'lg'
-        ? 'ui:px-6 ui:py-3 ui:text-base'
-        : 'ui:px-4 ui:py-2 ui:text-sm'
+        ? 'ui:h-10 ui:px-6 ui:text-sm'
+        : 'ui:h-9 ui:px-4 ui:text-sm'
   );
 
   const variantClass = $derived(
@@ -47,7 +48,7 @@
   const baseClass =
     'ui:inline-flex ui:items-center ui:justify-center ui:gap-1.5 ui:rounded-md ui:font-medium ui:border ui:transition-colors ui:focus-visible:outline-none ui:focus-visible:ring-2 ui:focus-visible:ring-[var(--landing-accent)]/50 ui:disabled:opacity-50 ui:disabled:cursor-not-allowed ui:cursor-pointer ui:no-underline ui:whitespace-nowrap';
 
-  const finalClass = $derived(`${baseClass} ${sizeClass} ${variantClass} ${extraClass}`);
+  const finalClass = $derived(cn(baseClass, sizeClass, variantClass, extraClass));
 </script>
 
 {#if href && !disabled}
diff --git a/packages/ui/src/custom/org-landing-page/terminal/hero.svelte b/packages/ui/src/custom/org-landing-page/terminal/hero.svelte
index 85122d6d..345838fd 100644
--- a/packages/ui/src/custom/org-landing-page/terminal/hero.svelte
+++ b/packages/ui/src/custom/org-landing-page/terminal/hero.svelte
@@ -108,11 +108,7 @@
               {hero.secondaryAction.label}
             </Button>
           {/if}
-          <CoursePrimaryAction
-            action={hero.primaryAction}
-            size="sm"
-            class="ui:rounded-full ui:px-4 ui:font-medium ui:bg-[#f4f5f7] ui:text-[#0a0b0e] ui:hover:bg-white"
-          />
+          <CoursePrimaryAction action={hero.primaryAction} size="sm" class="ui:rounded-full ui:px-4 ui:font-medium" />
         </div>
       {/if}