From 0f5073c257ea7ca52c2c45e494d9e7b9626c7e4a Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Wed, 18 Sep 2024 23:52:33 +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

---
 .../poll/[urlId]/pay-wall-dialog-content.tsx  | 204 +++++++++---------
 packages/ui/src/dialog.tsx                    |   3 +-
 2 files changed, 108 insertions(+), 99 deletions(-)

diff --git a/apps/web/src/app/[locale]/poll/[urlId]/pay-wall-dialog-content.tsx b/apps/web/src/app/[locale]/poll/[urlId]/pay-wall-dialog-content.tsx
index c6c2e69e1..cb9f54f63 100644
--- a/apps/web/src/app/[locale]/poll/[urlId]/pay-wall-dialog-content.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/pay-wall-dialog-content.tsx
@@ -22,120 +22,128 @@ export function PayWallDialogContent({
 
   if (plan === "free") {
     return (
-      <DialogContent size="sm">
-        <div>
-          <m.div
-            transition={{
-              delay: 0.5,
-              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 className="space-y-8">
-          <div>
-            <h2 className=" text-center text-xl font-bold">
+      <DialogContent className="w-[600px] p-4">
+        <article>
+          <header className="p-4">
+            <m.div
+              transition={{
+                delay: 0.5,
+                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>
+            <h1 className="mb-1 mt-2 text-center text-xl font-bold">
               <Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
-            </h2>
+            </h1>
             <p className="text-muted-foreground text-center text-sm leading-relaxed">
               <Trans
                 i18nKey="upgradeOverlaySubtitle3"
                 defaults="Unlock these feature by upgrading to a Pro plan."
               />
             </p>
-          </div>
-          <ul className="grid grid-cols-1 gap-4 text-left">
-            <li className="flex items-start gap-x-3">
-              <div>
-                <CalendarCheck2Icon className="size-5 text-purple-600" />
-              </div>
-              <div>
-                <h3 className="text-sm font-semibold">
-                  <Trans defaults="Finalize" i18nKey="finalize" />
-                </h3>
-                <p className="text-muted-foreground mt-0.5 text-pretty text-sm">
-                  <Trans
-                    i18nKey="finalizeFeatureDescription"
-                    defaults="Select a final date for your event and notify participants."
-                  />
-                </p>
-              </div>
-            </li>
-            <li className="flex items-start gap-x-3">
-              <CopyIcon className="size-5 text-purple-600" />
-              <div>
-                <h3 className="text-sm font-semibold">
-                  <Trans defaults="Duplicate" i18nKey="duplicateTitle" />
-                </h3>
-                <p className="text-muted-foreground mt-0.5 text-pretty text-sm">
-                  <Trans
-                    i18nKey="duplicateFeatureDescription"
-                    defaults="Reuse dates and settings of a poll to create a new one."
-                  />
-                </p>
-              </div>
-            </li>
-            <li className="flex items-start gap-x-3">
-              <div>
-                <Settings2Icon className="size-5 text-purple-600" />
-              </div>
-              <div>
-                <h3 className="text-sm font-semibold">
-                  <Trans
-                    defaults="Advanced Settings"
-                    i18nKey="advancedSettingsTitle"
-                  />
-                </h3>
-                <p className="text-muted-foreground mt-0.5 text-pretty text-sm">
-                  <Trans
-                    i18nKey="advancedSettingsDescription"
-                    defaults="Hide participants, hide scores, require participant email address."
-                  />
-                </p>
-              </div>
-            </li>
-            <li className="flex items-start gap-x-3">
-              <div>
-                <ClockIcon className="size-5 text-purple-600" />
-              </div>
-              <div>
-                <h3 className="text-sm font-semibold">
-                  <Trans
-                    defaults="Keep Polls Indefinitely"
-                    i18nKey="keepPollsIndefinitely"
-                  />
-                </h3>
-                <p className="text-muted-foreground mt-0.5 text-pretty text-sm">
-                  <Trans
-                    i18nKey="keepPollsIndefinitelyDescription"
-                    defaults="Inactive polls will not be auto-deleted."
-                  />
-                </p>
-              </div>
-            </li>
-          </ul>
-          <div className="grid gap-2.5">
+          </header>
+          <section className="rounded-lg border bg-gray-50">
+            <ul className="divide-y text-left">
+              <li className="flex items-start gap-x-4 p-4">
+                <div>
+                  <div className="inline-flex rounded-lg bg-indigo-100 p-2">
+                    <CalendarCheck2Icon className="size-4 text-indigo-600" />
+                  </div>
+                </div>
+                <div>
+                  <h3 className="mb-1 text-sm font-semibold">
+                    <Trans defaults="Finalize" i18nKey="finalize" />
+                  </h3>
+                  <p className="text-muted-foreground text-pretty text-sm leading-relaxed">
+                    <Trans
+                      i18nKey="finalizeFeatureDescription"
+                      defaults="Select a final date for your event and notify participants."
+                    />
+                  </p>
+                </div>
+              </li>
+              <li className="flex items-start gap-x-4 p-4">
+                <div className="inline-flex rounded-lg bg-violet-100 p-2">
+                  <CopyIcon className="size-4 text-violet-600" />
+                </div>
+                <div>
+                  <h3 className="mb-1 text-sm font-semibold">
+                    <Trans defaults="Duplicate" i18nKey="duplicateTitle" />
+                  </h3>
+                  <p className="text-muted-foreground leading-rel text-pretty text-sm">
+                    <Trans
+                      i18nKey="duplicateFeatureDescription"
+                      defaults="Reuse dates and settings of a poll to create a new one."
+                    />
+                  </p>
+                </div>
+              </li>
+              <li className="flex items-start gap-x-4 p-4">
+                <div>
+                  <div className="inline-flex rounded-lg bg-purple-100 p-2">
+                    <Settings2Icon className="size-4 text-purple-600" />
+                  </div>
+                </div>
+                <div>
+                  <h3 className="mb-1 text-sm font-semibold">
+                    <Trans
+                      defaults="Advanced Settings"
+                      i18nKey="advancedSettingsTitle"
+                    />
+                  </h3>
+                  <p className="text-muted-foreground leading-rel text-pretty text-sm">
+                    <Trans
+                      i18nKey="advancedSettingsDescription"
+                      defaults="Hide participants, hide scores, require participant email address."
+                    />
+                  </p>
+                </div>
+              </li>
+              <li className="flex items-start gap-x-4 p-4">
+                <div>
+                  <div className="inline-flex rounded-lg bg-pink-100 p-2">
+                    <ClockIcon className="size-4 text-pink-600" />
+                  </div>
+                </div>
+                <div>
+                  <h3 className="mb-1 text-sm font-semibold">
+                    <Trans
+                      defaults="Keep Polls Indefinitely"
+                      i18nKey="keepPollsIndefinitely"
+                    />
+                  </h3>
+                  <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>
               <Link href="/settings/billing">
                 <Trans i18nKey="upgrade" defaults="Upgrade" />
               </Link>
             </Button>
             <DialogClose asChild>
-              <Button>
+              <Button variant="ghost">
                 <Trans i18nKey="notToday" defaults="Not Today" />
               </Button>
             </DialogClose>
-          </div>
-        </div>
+          </footer>
+        </article>
       </DialogContent>
     );
   }
diff --git a/packages/ui/src/dialog.tsx b/packages/ui/src/dialog.tsx
index b3c2e2c22..94ff54c49 100644
--- a/packages/ui/src/dialog.tsx
+++ b/packages/ui/src/dialog.tsx
@@ -53,7 +53,8 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       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-md": size === "md",