From 72313920cead02f5a769be7ad8f59d225fb04d5c Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Tue, 1 Apr 2025 10:18:15 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Update=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/landing/src/components/home/hero.tsx     | 10 +++++----
 apps/web/src/app/[locale]/(admin)/sidebar.tsx |  2 +-
 apps/web/src/components/pay-wall-dialog.tsx   | 22 +++++++++++++------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/landing/src/components/home/hero.tsx b/apps/landing/src/components/home/hero.tsx
index 3494622ef..d7ea86afd 100644
--- a/apps/landing/src/components/home/hero.tsx
+++ b/apps/landing/src/components/home/hero.tsx
@@ -88,9 +88,9 @@ export const MarketingHero = ({
           <Link
             locale="en"
             href="/blog/introducing-quick-create"
-            className="hover:ring-primary relative inline-flex items-center gap-x-3 rounded-full border bg-gray-100 py-1 pl-1 pr-4 text-sm leading-6 text-gray-600 hover:bg-gray-50 focus:ring-2 focus:ring-gray-300 focus:ring-offset-1"
+            className="group relative inline-flex items-center gap-x-2 rounded-full border bg-gray-50 py-1 pl-1 pr-4 text-sm leading-6 text-gray-600 hover:bg-white"
           >
-            <Badge variant="green">
+            <Badge variant="secondary">
               <Trans ns="home" i18nKey="new" defaults="New" />
             </Badge>
             <span className="flex items-center gap-x-1">
@@ -98,7 +98,10 @@ export const MarketingHero = ({
                 i18nKey="home:quickCreateBlog"
                 defaults="Introducing Quick Create"
               />
-              <ChevronRightIcon className="-mr-1 size-4" aria-hidden="true" />
+              <ChevronRightIcon
+                className="-mr-1 size-4 transition-transform group-active:translate-x-0.5"
+                aria-hidden="true"
+              />
             </span>
           </Link>
         </div>
@@ -122,7 +125,6 @@ export const MarketingHero = ({
               "whitespace-nowrap text-center text-xs text-gray-600",
               handwritten.className,
               "decoration underline decoration-gray-300 decoration-2 underline-offset-8",
-              "skew-x-[-10deg]",
             )}
           >
             <Trans
diff --git a/apps/web/src/app/[locale]/(admin)/sidebar.tsx b/apps/web/src/app/[locale]/(admin)/sidebar.tsx
index 4f8419b99..2262e7bff 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-200/50 px-4 py-3 text-left ring-gray-200 hover:bg-gray-200 focus-visible:border-gray-300"
+                    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 ring-gray-200 hover:bg-gray-50 focus-visible:border-gray-300"
                     onClick={() =>
                       posthog?.capture("trigger paywall", { from: "sidebar" })
                     }
diff --git a/apps/web/src/components/pay-wall-dialog.tsx b/apps/web/src/components/pay-wall-dialog.tsx
index 63e72bc1d..cb401a83a 100644
--- a/apps/web/src/components/pay-wall-dialog.tsx
+++ b/apps/web/src/components/pay-wall-dialog.tsx
@@ -3,7 +3,13 @@
 import { pricingData } from "@rallly/billing/pricing";
 import { Badge } from "@rallly/ui/badge";
 import type { DialogProps } from "@rallly/ui/dialog";
-import { Dialog, DialogContent, useDialog } from "@rallly/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  useDialog,
+} from "@rallly/ui/dialog";
 import { RadioGroup, RadioGroupItem } from "@rallly/ui/radio-group";
 import { CheckIcon, SparklesIcon } from "lucide-react";
 import * as m from "motion/react-m";
@@ -56,16 +62,18 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
                 </m.div>
               </div>
             </div>
-            <h1 className="mb-2 mt-4 text-center text-xl font-bold">
+            <DialogTitle className="mb-1 mt-2 text-center text-xl font-bold">
               <Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
-            </h1>
-            <p className="text-muted-foreground mb-4 text-center text-sm leading-relaxed">
+            </DialogTitle>
+            <DialogDescription className="text-muted-foreground mb-4 text-center text-sm leading-relaxed">
               <Trans
                 i18nKey="upgradeOverlaySubtitle3"
                 defaults="Unlock these feature by upgrading to a Pro plan."
               />
-            </p>
-            <ul className="grid grid-cols-2 justify-center gap-2 text-center text-sm font-medium">
+            </DialogDescription>
+          </header>
+          <section>
+            <ul className="grid grid-cols-2 justify-center gap-2 text-sm font-medium">
               <li>
                 <CheckIcon className="mr-2 inline-block size-4 text-green-600" />
                 <Trans i18nKey="featureNameFinalize" defaults="Finalize Poll" />
@@ -92,7 +100,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
                 />
               </li>
             </ul>
-          </header>
+          </section>
           <section>
             <RadioGroup value={period} onValueChange={setPeriod}>
               <li className="relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:bg-gray-100 focus-within:ring-gray-300 hover:bg-gray-100">