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.
This commit is contained in:
Rotimi Best
2026-08-01 19:49:50 +01:00
committed by GitHub
parent 8c949ce2e4
commit d5d056f064
@@ -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>