mirror of
https://github.com/lukevella/rallly.git
synced 2025-06-15 00:51:53 +02:00
💄 Update pay wall dialog
This commit is contained in:
Luke Vella
parent
edf8e93808
commit
0f5073c257
2 changed files with 108 additions and 99 deletions
|
|
@ -22,120 +22,128 @@ export function PayWallDialogContent({
|
||||||
|
|
||||||
if (plan === "free") {
|
if (plan === "free") {
|
||||||
return (
|
return (
|
||||||
<DialogContent size="sm">
|
<DialogContent className="w-[600px] p-4">
|
||||||
<div>
|
<article>
|
||||||
<m.div
|
<header className="p-4">
|
||||||
transition={{
|
<m.div
|
||||||
delay: 0.5,
|
transition={{
|
||||||
duration: 0.4,
|
delay: 0.5,
|
||||||
type: "spring",
|
duration: 0.4,
|
||||||
bounce: 0.5,
|
type: "spring",
|
||||||
}}
|
bounce: 0.5,
|
||||||
initial={{ opacity: 0, y: -50 }}
|
}}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
initial={{ opacity: 0, y: -50 }}
|
||||||
className="text-center"
|
animate={{ opacity: 1, y: 0 }}
|
||||||
aria-hidden="true"
|
className="text-center"
|
||||||
>
|
aria-hidden="true"
|
||||||
<Badge size="lg" variant="primary">
|
>
|
||||||
<Trans i18nKey="planPro" />
|
<Badge size="lg" variant="primary">
|
||||||
</Badge>
|
<Trans i18nKey="planPro" />
|
||||||
</m.div>
|
</Badge>
|
||||||
</div>
|
</m.div>
|
||||||
<div className="space-y-8">
|
<h1 className="mb-1 mt-2 text-center text-xl font-bold">
|
||||||
<div>
|
|
||||||
<h2 className=" text-center text-xl font-bold">
|
|
||||||
<Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
|
<Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
|
||||||
</h2>
|
</h1>
|
||||||
<p className="text-muted-foreground text-center text-sm leading-relaxed">
|
<p className="text-muted-foreground text-center text-sm leading-relaxed">
|
||||||
<Trans
|
<Trans
|
||||||
i18nKey="upgradeOverlaySubtitle3"
|
i18nKey="upgradeOverlaySubtitle3"
|
||||||
defaults="Unlock these feature by upgrading to a Pro plan."
|
defaults="Unlock these feature by upgrading to a Pro plan."
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</header>
|
||||||
<ul className="grid grid-cols-1 gap-4 text-left">
|
<section className="rounded-lg border bg-gray-50">
|
||||||
<li className="flex items-start gap-x-3">
|
<ul className="divide-y text-left">
|
||||||
<div>
|
<li className="flex items-start gap-x-4 p-4">
|
||||||
<CalendarCheck2Icon className="size-5 text-purple-600" />
|
<div>
|
||||||
</div>
|
<div className="inline-flex rounded-lg bg-indigo-100 p-2">
|
||||||
<div>
|
<CalendarCheck2Icon className="size-4 text-indigo-600" />
|
||||||
<h3 className="text-sm font-semibold">
|
</div>
|
||||||
<Trans defaults="Finalize" i18nKey="finalize" />
|
</div>
|
||||||
</h3>
|
<div>
|
||||||
<p className="text-muted-foreground mt-0.5 text-pretty text-sm">
|
<h3 className="mb-1 text-sm font-semibold">
|
||||||
<Trans
|
<Trans defaults="Finalize" i18nKey="finalize" />
|
||||||
i18nKey="finalizeFeatureDescription"
|
</h3>
|
||||||
defaults="Select a final date for your event and notify participants."
|
<p className="text-muted-foreground text-pretty text-sm leading-relaxed">
|
||||||
/>
|
<Trans
|
||||||
</p>
|
i18nKey="finalizeFeatureDescription"
|
||||||
</div>
|
defaults="Select a final date for your event and notify participants."
|
||||||
</li>
|
/>
|
||||||
<li className="flex items-start gap-x-3">
|
</p>
|
||||||
<CopyIcon className="size-5 text-purple-600" />
|
</div>
|
||||||
<div>
|
</li>
|
||||||
<h3 className="text-sm font-semibold">
|
<li className="flex items-start gap-x-4 p-4">
|
||||||
<Trans defaults="Duplicate" i18nKey="duplicateTitle" />
|
<div className="inline-flex rounded-lg bg-violet-100 p-2">
|
||||||
</h3>
|
<CopyIcon className="size-4 text-violet-600" />
|
||||||
<p className="text-muted-foreground mt-0.5 text-pretty text-sm">
|
</div>
|
||||||
<Trans
|
<div>
|
||||||
i18nKey="duplicateFeatureDescription"
|
<h3 className="mb-1 text-sm font-semibold">
|
||||||
defaults="Reuse dates and settings of a poll to create a new one."
|
<Trans defaults="Duplicate" i18nKey="duplicateTitle" />
|
||||||
/>
|
</h3>
|
||||||
</p>
|
<p className="text-muted-foreground leading-rel text-pretty text-sm">
|
||||||
</div>
|
<Trans
|
||||||
</li>
|
i18nKey="duplicateFeatureDescription"
|
||||||
<li className="flex items-start gap-x-3">
|
defaults="Reuse dates and settings of a poll to create a new one."
|
||||||
<div>
|
/>
|
||||||
<Settings2Icon className="size-5 text-purple-600" />
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</li>
|
||||||
<h3 className="text-sm font-semibold">
|
<li className="flex items-start gap-x-4 p-4">
|
||||||
<Trans
|
<div>
|
||||||
defaults="Advanced Settings"
|
<div className="inline-flex rounded-lg bg-purple-100 p-2">
|
||||||
i18nKey="advancedSettingsTitle"
|
<Settings2Icon className="size-4 text-purple-600" />
|
||||||
/>
|
</div>
|
||||||
</h3>
|
</div>
|
||||||
<p className="text-muted-foreground mt-0.5 text-pretty text-sm">
|
<div>
|
||||||
<Trans
|
<h3 className="mb-1 text-sm font-semibold">
|
||||||
i18nKey="advancedSettingsDescription"
|
<Trans
|
||||||
defaults="Hide participants, hide scores, require participant email address."
|
defaults="Advanced Settings"
|
||||||
/>
|
i18nKey="advancedSettingsTitle"
|
||||||
</p>
|
/>
|
||||||
</div>
|
</h3>
|
||||||
</li>
|
<p className="text-muted-foreground leading-rel text-pretty text-sm">
|
||||||
<li className="flex items-start gap-x-3">
|
<Trans
|
||||||
<div>
|
i18nKey="advancedSettingsDescription"
|
||||||
<ClockIcon className="size-5 text-purple-600" />
|
defaults="Hide participants, hide scores, require participant email address."
|
||||||
</div>
|
/>
|
||||||
<div>
|
</p>
|
||||||
<h3 className="text-sm font-semibold">
|
</div>
|
||||||
<Trans
|
</li>
|
||||||
defaults="Keep Polls Indefinitely"
|
<li className="flex items-start gap-x-4 p-4">
|
||||||
i18nKey="keepPollsIndefinitely"
|
<div>
|
||||||
/>
|
<div className="inline-flex rounded-lg bg-pink-100 p-2">
|
||||||
</h3>
|
<ClockIcon className="size-4 text-pink-600" />
|
||||||
<p className="text-muted-foreground mt-0.5 text-pretty text-sm">
|
</div>
|
||||||
<Trans
|
</div>
|
||||||
i18nKey="keepPollsIndefinitelyDescription"
|
<div>
|
||||||
defaults="Inactive polls will not be auto-deleted."
|
<h3 className="mb-1 text-sm font-semibold">
|
||||||
/>
|
<Trans
|
||||||
</p>
|
defaults="Keep Polls Indefinitely"
|
||||||
</div>
|
i18nKey="keepPollsIndefinitely"
|
||||||
</li>
|
/>
|
||||||
</ul>
|
</h3>
|
||||||
<div className="grid gap-2.5">
|
<p className="text-muted-foreground leading-rel text-pretty text-sm">
|
||||||
|
<Trans
|
||||||
|
i18nKey="keepPollsIndefinitelyDescription"
|
||||||
|
defaults="Inactive polls will not be auto-deleted."
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<footer className="mt-4 grid gap-2.5">
|
||||||
<Button variant="primary" asChild>
|
<Button variant="primary" asChild>
|
||||||
<Link href="/settings/billing">
|
<Link href="/settings/billing">
|
||||||
<Trans i18nKey="upgrade" defaults="Upgrade" />
|
<Trans i18nKey="upgrade" defaults="Upgrade" />
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
<DialogClose asChild>
|
<DialogClose asChild>
|
||||||
<Button>
|
<Button variant="ghost">
|
||||||
<Trans i18nKey="notToday" defaults="Not Today" />
|
<Trans i18nKey="notToday" defaults="Not Today" />
|
||||||
</Button>
|
</Button>
|
||||||
</DialogClose>
|
</DialogClose>
|
||||||
</div>
|
</footer>
|
||||||
</div>
|
</article>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,8 @@ const DialogContent = React.forwardRef<
|
||||||
<DialogPrimitive.Content
|
<DialogPrimitive.Content
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"animate-in data-[state=open]:fade-in data-[state=open]:slide-in-from-top-8 shadow-huge z-50 grid w-full translate-y-0 gap-4 overflow-hidden rounded-md bg-white p-4",
|
"animate-in data-[state=open]:fade-in data-[state=open]:slide-in-from-top-8 shadow-huge z-50 grid w-full translate-y-0 gap-4 overflow-y-auto rounded-md bg-white p-4",
|
||||||
|
"max-h-[calc(100vh-2rem)]", // Add this line
|
||||||
{
|
{
|
||||||
"sm:max-w-sm": size === "sm",
|
"sm:max-w-sm": size === "sm",
|
||||||
"sm:max-w-md": size === "md",
|
"sm:max-w-md": size === "md",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue