💄 Update upgrade button

This commit is contained in:
Luke Vella 2025-03-31 21:37:03 +01:00
parent 61e0281f39
commit ba9119526c
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C

View file

@ -2,6 +2,7 @@
import { usePostHog } from "@rallly/posthog/client"; import { usePostHog } from "@rallly/posthog/client";
import { cn } from "@rallly/ui"; import { cn } from "@rallly/ui";
import { Badge } from "@rallly/ui/badge";
import { Button } from "@rallly/ui/button"; import { Button } from "@rallly/ui/button";
import { DialogTrigger } from "@rallly/ui/dialog"; import { DialogTrigger } from "@rallly/ui/dialog";
import { Icon } from "@rallly/ui/icon"; import { Icon } from "@rallly/ui/icon";
@ -22,7 +23,6 @@ import { usePathname } from "next/navigation";
import { OptimizedAvatarImage } from "@/components/optimized-avatar-image"; import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
import { PayWallDialog } from "@/components/pay-wall-dialog"; import { PayWallDialog } from "@/components/pay-wall-dialog";
import { ProBadge } from "@/components/pro-badge";
import { Trans } from "@/components/trans"; import { Trans } from "@/components/trans";
import { IfGuest, useUser } from "@/components/user-provider"; import { IfGuest, useUser } from "@/components/user-provider";
import { IfFreeUser } from "@/contexts/plan"; import { IfFreeUser } from "@/contexts/plan";
@ -108,24 +108,30 @@ export function Sidebar() {
<li> <li>
<PayWallDialog> <PayWallDialog>
<DialogTrigger <DialogTrigger
className="mb-4 flex w-full flex-col rounded-md border bg-gray-50 px-4 py-3 text-left focus:border-gray-300 focus:bg-gray-200" 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"
onClick={() => onClick={() =>
posthog?.capture("trigger paywall", { from: "sidebar" }) posthog?.capture("trigger paywall", { from: "sidebar" })
} }
> >
<span className="mb-2 flex items-center gap-x-2"> <SparklesIcon className="absolute -left-2 -top-2 size-20 text-gray-500/10" />
<SparklesIcon className="size-5 text-gray-400" /> <div>
<span className="text-sm font-bold"> <div className="inline-flex size-12 items-center justify-center rounded-md">
<Badge variant="primary">
<Trans i18nKey="planPro" />
</Badge>
</div>
</div>
<div>
<div className="text-sm font-bold">
<Trans i18nKey="upgrade" /> <Trans i18nKey="upgrade" />
</span> </div>
<ProBadge /> <div className="text-sm leading-relaxed text-gray-500">
</span>
<span className="text-sm leading-relaxed text-gray-500">
<Trans <Trans
i18nKey="unlockFeatures" i18nKey="unlockFeatures"
defaults="Unlock all Pro features." defaults="Unlock all Pro features."
/> />
</span> </div>
</div>
</DialogTrigger> </DialogTrigger>
</PayWallDialog> </PayWallDialog>
</li> </li>