From 8001256dc147575559804b1590fe3e4add7c58b0 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Mon, 31 Mar 2025 21:56:17 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Update=20pay=20wall=20dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/(admin)/sidebar.tsx |  4 +-
 apps/web/src/components/pay-wall-dialog.tsx   | 41 +++++++++++--------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/app/[locale]/(admin)/sidebar.tsx b/apps/web/src/app/[locale]/(admin)/sidebar.tsx
index b7cd24143..75854d907 100644
--- a/apps/web/src/app/[locale]/(admin)/sidebar.tsx
+++ b/apps/web/src/app/[locale]/(admin)/sidebar.tsx
@@ -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">
diff --git a/apps/web/src/components/pay-wall-dialog.tsx b/apps/web/src/components/pay-wall-dialog.tsx
index 1074847f6..94e932329 100644
--- a/apps/web/src/components/pay-wall-dialog.tsx
+++ b/apps/web/src/components/pay-wall-dialog.tsx
@@ -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>