💄 Update styles

This commit is contained in:
Luke Vella 2025-04-01 10:18:15 +01:00
parent 9ad31999d6
commit 72313920ce
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C
3 changed files with 22 additions and 12 deletions

View file

@ -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

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-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" })
}

View file

@ -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">