use purple banner for all paid features alert

This commit is contained in:
miloschwartz
2026-02-10 21:21:20 -08:00
committed by Owen
parent b75600b9ea
commit 8207e49317

View File

@@ -10,10 +10,11 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
import { Tier } from "@server/types/Tiers"; import { Tier } from "@server/types/Tiers";
const bannerClassName = const bannerClassName =
"mb-6 border-primary/30 bg-linear-to-br from-primary/10 via-background to-background overflow-hidden"; "mb-6 border-purple-500/30 bg-linear-to-br from-purple-500/10 via-background to-background overflow-hidden";
const bannerContentClassName = "py-3 px-4"; const bannerContentClassName = "py-3 px-4";
const bannerRowClassName = const bannerRowClassName =
"flex items-center gap-2.5 text-sm text-muted-foreground"; "flex items-center gap-2.5 text-sm text-muted-foreground";
const bannerIconClassName = "size-4 shrink-0 text-purple-500";
type Props = { type Props = {
tiers: Tier[]; tiers: Tier[];
@@ -34,7 +35,7 @@ export function PaidFeaturesAlert({ tiers }: Props) {
<Card className={bannerClassName}> <Card className={bannerClassName}>
<CardContent className={bannerContentClassName}> <CardContent className={bannerContentClassName}>
<div className={bannerRowClassName}> <div className={bannerRowClassName}>
<KeyRound className="size-4 shrink-0 text-primary" /> <KeyRound className={bannerIconClassName} />
<span>{isActive ? t("mustUpgradeToUse") : t("subscriptionRequiredToUse")}</span> <span>{isActive ? t("mustUpgradeToUse") : t("subscriptionRequiredToUse")}</span>
</div> </div>
</CardContent> </CardContent>
@@ -45,7 +46,7 @@ export function PaidFeaturesAlert({ tiers }: Props) {
<Card className={bannerClassName}> <Card className={bannerClassName}>
<CardContent className={bannerContentClassName}> <CardContent className={bannerContentClassName}>
<div className={bannerRowClassName}> <div className={bannerRowClassName}>
<KeyRound className="size-4 shrink-0 text-primary" /> <KeyRound className={bannerIconClassName} />
<span>{t("licenseRequiredToUse")}</span> <span>{t("licenseRequiredToUse")}</span>
</div> </div>
</CardContent> </CardContent>
@@ -53,10 +54,10 @@ export function PaidFeaturesAlert({ tiers }: Props) {
) : null} ) : null}
{build === "oss" && !hasEnterpriseLicense ? ( {build === "oss" && !hasEnterpriseLicense ? (
<Card className="mb-6 border-purple-500/30 bg-linear-to-br from-purple-500/10 via-background to-background overflow-hidden"> <Card className={bannerClassName}>
<CardContent className={bannerContentClassName}> <CardContent className={bannerContentClassName}>
<div className={bannerRowClassName}> <div className={bannerRowClassName}>
<KeyRound className="size-4 shrink-0 text-purple-500" /> <KeyRound className={bannerIconClassName} />
<span> <span>
{t.rich("ossEnterpriseEditionRequired", { {t.rich("ossEnterpriseEditionRequired", {
enterpriseEditionLink: (chunks) => ( enterpriseEditionLink: (chunks) => (