3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-04-28 17:56:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Update pay wall dialog

Browse source
This commit is contained in:
Luke Vella 2025-03-31 21:56:17 +01:00
parent ba9119526c
commit 8001256dc1
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C
2 changed files with 25 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/web/src/app/[locale]/(admin)/sidebar.tsx
View file

@ -108,7 +108,7 @@ export function Sidebar() {
<li>
<PayWallDialog>
<DialogTrigger
className="relative mb-4 flex w-full items-center gap-4 overflow-hidden rounded-md border bg-gray-50/50 px-4 py-3 text-left shadow-sm ring-gray-200 transition-transform hover:bg-gray-50 focus:border-gray-300 active:translate-y-1 active:shadow-sm"
className="hover:animate-wiggle relative mb-4 flex w-full items-center gap-4 overflow-hidden rounded-md border bg-gray-50/50 px-4 py-3 text-left ring-gray-200 transition-transform hover:bg-gray-50 focus-visible:border-gray-300"
onClick={() =>
posthog?.capture("trigger paywall", { from: "sidebar" })
}
@ -122,7 +122,7 @@ export function Sidebar() {
</div>
</div>
<div>
<div className="text-sm font-bold">
<div className="mb-0.5 text-sm font-bold">
<Trans i18nKey="upgrade" />
</div>
<div className="text-sm leading-relaxed text-gray-500">

41
apps/web/src/components/pay-wall-dialog.tsx
View file

@ -5,7 +5,7 @@ import { Badge } from "@rallly/ui/badge";
import type { DialogProps } from "@rallly/ui/dialog";
import { Dialog, DialogContent, useDialog } from "@rallly/ui/dialog";
import { RadioGroup, RadioGroupItem } from "@rallly/ui/radio-group";
import { CheckIcon } from "lucide-react";
import { CheckIcon, SparklesIcon } from "lucide-react";
import * as m from "motion/react-m";
import Link from "next/link";
import React from "react";
@ -32,25 +32,30 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
return (
<Dialog {...dialog.dialogProps} {...forwardedProps}>
{children}
<DialogContent className="w-[600px] p-4 sm:p-6">
<DialogContent className="w-[600px] overflow-hidden bg-gray-50 p-4 sm:p-6">
<SparklesIcon className="absolute -top-4 left-4 size-32 text-gray-500/10" />
<div className="space-y-6">
<header>
<m.div
transition={{
delay: 0.2,
duration: 0.4,
type: "spring",
bounce: 0.5,
}}
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
className="text-center"
aria-hidden="true"
>
<Badge size="lg" variant="primary">
<Trans i18nKey="planPro" />
</Badge>
</m.div>
<div className="flex justify-center">
<div className="inline-flex size-14 items-center justify-center">
<m.div
transition={{
delay: 0.2,
duration: 0.4,
type: "spring",
bounce: 0.5,
}}
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
className="text-center"
aria-hidden="true"
>
<Badge size="lg" variant="primary">
<Trans i18nKey="planPro" />
</Badge>
</m.div>
</div>
</div>
<h1 className="mb-2 mt-4 text-center text-xl font-bold">
<Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
</h1>