From d5d056f0649e5a70b082a95fdcf895149f9bd72c Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 1 Aug 2026 19:49:50 +0100
Subject: [PATCH] fix(ui): show disabled state on course landing hero CTA
 (#815)

CoursePrimaryAction used the base Button with per-theme color classes
that overrode disabled styling. When enrollment was closed, the pricing
CTA appeared correctly muted while the hero Buy Now button still looked
active.

Switch the hero CTA to LandingButton (same primitive as pricing) and
reset theme color overrides when disabled so both CTAs look and behave
consistently.
---
 .../course-primary-action.svelte              | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 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 0e918e86..2e1b14a9 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
@@ -1,24 +1,39 @@
 <script lang="ts">
-  import { Button, type ButtonVariant } from '../../base/button';
+  import { cn } from '../../tools';
+  import LandingButton from './landing-button.svelte';
   import type { LandingPrimaryAction } from './types';
 
+  type LandingButtonVariant = 'primary' | 'secondary' | 'tertiary';
+  type LandingButtonSize = 'sm' | 'md' | 'lg';
+
   interface Props {
     action: LandingPrimaryAction;
     size?: 'default' | 'sm' | 'lg';
-    variant?: ButtonVariant;
+    variant?: LandingButtonVariant;
     class?: string;
   }
 
-  let { action, size = 'default', variant = 'default', class: className = '' }: Props = $props();
+  let { action, size = 'default', variant = 'primary', class: className = '' }: Props = $props();
+
+  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)]'
+  );
 </script>
 
-<Button
+<LandingButton
+  {variant}
+  size={landingSize}
   href={action.onclick ? undefined : action.href}
   onclick={action.onclick}
-  disabled={action.disabled ?? false}
-  {size}
-  {variant}
-  class={className}
+  disabled={isDisabled}
+  class={cn(className, isDisabled && disabledClass)}
 >
   {action.label}
-</Button>
+</LandingButton>