💄 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 <Link
locale="en" locale="en"
href="/blog/introducing-quick-create" 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" /> <Trans ns="home" i18nKey="new" defaults="New" />
</Badge> </Badge>
<span className="flex items-center gap-x-1"> <span className="flex items-center gap-x-1">
@ -98,7 +98,10 @@ export const MarketingHero = ({
i18nKey="home:quickCreateBlog" i18nKey="home:quickCreateBlog"
defaults="Introducing Quick Create" 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> </span>
</Link> </Link>
</div> </div>
@ -122,7 +125,6 @@ export const MarketingHero = ({
"whitespace-nowrap text-center text-xs text-gray-600", "whitespace-nowrap text-center text-xs text-gray-600",
handwritten.className, handwritten.className,
"decoration underline decoration-gray-300 decoration-2 underline-offset-8", "decoration underline decoration-gray-300 decoration-2 underline-offset-8",
"skew-x-[-10deg]",
)} )}
> >
<Trans <Trans

View file

@ -108,7 +108,7 @@ export function Sidebar() {
<li> <li>
<PayWallDialog> <PayWallDialog>
<DialogTrigger <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={() => onClick={() =>
posthog?.capture("trigger paywall", { from: "sidebar" }) posthog?.capture("trigger paywall", { from: "sidebar" })
} }

View file

@ -3,7 +3,13 @@
import { pricingData } from "@rallly/billing/pricing"; import { pricingData } from "@rallly/billing/pricing";
import { Badge } from "@rallly/ui/badge"; import { Badge } from "@rallly/ui/badge";
import type { DialogProps } from "@rallly/ui/dialog"; 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 { RadioGroup, RadioGroupItem } from "@rallly/ui/radio-group";
import { CheckIcon, SparklesIcon } from "lucide-react"; import { CheckIcon, SparklesIcon } from "lucide-react";
import * as m from "motion/react-m"; import * as m from "motion/react-m";
@ -56,16 +62,18 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
</m.div> </m.div>
</div> </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" /> <Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
</h1> </DialogTitle>
<p className="text-muted-foreground mb-4 text-center text-sm leading-relaxed"> <DialogDescription className="text-muted-foreground mb-4 text-center text-sm leading-relaxed">
<Trans <Trans
i18nKey="upgradeOverlaySubtitle3" i18nKey="upgradeOverlaySubtitle3"
defaults="Unlock these feature by upgrading to a Pro plan." defaults="Unlock these feature by upgrading to a Pro plan."
/> />
</p> </DialogDescription>
<ul className="grid grid-cols-2 justify-center gap-2 text-center text-sm font-medium"> </header>
<section>
<ul className="grid grid-cols-2 justify-center gap-2 text-sm font-medium">
<li> <li>
<CheckIcon className="mr-2 inline-block size-4 text-green-600" /> <CheckIcon className="mr-2 inline-block size-4 text-green-600" />
<Trans i18nKey="featureNameFinalize" defaults="Finalize Poll" /> <Trans i18nKey="featureNameFinalize" defaults="Finalize Poll" />
@ -92,7 +100,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
/> />
</li> </li>
</ul> </ul>
</header> </section>
<section> <section>
<RadioGroup value={period} onValueChange={setPeriod}> <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"> <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">