3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-31 06:59:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 More tweaks

Browse source
This commit is contained in:
Luke Vella 2025-03-31 22:32:47 +01:00
parent e3eaee864f
commit 8e7cf4a59e
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C
3 changed files with 29 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/web/src/app/[locale]/(admin)/sidebar.tsx
View file

@ -108,14 +108,14 @@ export function Sidebar() {
<li> <li>
<PayWallDialog> <PayWallDialog>
<DialogTrigger <DialogTrigger
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" 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"
onClick={() => onClick={() =>
posthog?.capture("trigger paywall", { from: "sidebar" }) posthog?.capture("trigger paywall", { from: "sidebar" })
} }
> >
<SparklesIcon className="absolute -left-2 -top-2 size-20 text-gray-500/10" /> <SparklesIcon className="pointer-events-none absolute -left-2 -top-2 size-20 text-gray-500/10" />
<div> <div>
<div className="inline-flex size-12 items-center justify-center rounded-md"> <div className="inline-flex size-12 items-center justify-center rounded-md duration-500">
<Badge variant="primary"> <Badge variant="primary">
<Trans i18nKey="planPro" /> <Trans i18nKey="planPro" />
</Badge> </Badge>

34
apps/web/src/components/pay-wall-dialog.tsx
View file

@ -95,7 +95,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
</header> </header>
<section> <section>
<RadioGroup value={period} onValueChange={setPeriod}> <RadioGroup value={period} onValueChange={setPeriod}>
<li className="focus-within:ring-primary relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:ring-2"> <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">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<RadioGroupItem id="monthly" value="monthly" /> <RadioGroupItem id="monthly" value="monthly" />
<label className="text-base font-semibold" htmlFor="monthly"> <label className="text-base font-semibold" htmlFor="monthly">
@ -108,21 +108,29 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
<span className="text-muted-foreground text-sm">/ mo</span> <span className="text-muted-foreground text-sm">/ mo</span>
</p> </p>
</li> </li>
<li className="focus-within:ring-primary relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:ring-2"> <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">
<div className="space-y-1"> <div className="space-y-1">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<RadioGroupItem id="yearly" value="yearly" /> <RadioGroupItem id="yearly" value="yearly" />
<label className="text-base font-semibold" htmlFor="yearly"> <div className="flex items-center gap-2">
<span role="presentation" className="absolute inset-0" /> <label
<Trans defaults="12 months" i18nKey="12months" /> className="text-base font-semibold"
</label> htmlFor="yearly"
<Badge variant="green"> >
<Trans <span
defaults="Save {percentage}%" role="presentation"
i18nKey="savePercentage" className="absolute inset-0"
values={{ percentage: annualSavingsPercentage }} />
/> <Trans defaults="12 months" i18nKey="12months" />
</Badge> </label>
<Badge variant="secondary">
<Trans
defaults="Save {percentage}%"
i18nKey="savePercentage"
values={{ percentage: annualSavingsPercentage }}
/>
</Badge>
</div>
</div> </div>
<p className="text-muted-foreground pointer-events-none flex items-baseline gap-1.5 pl-8 text-sm"> <p className="text-muted-foreground pointer-events-none flex items-baseline gap-1.5 pl-8 text-sm">
<span>${yearlyPrice}</span> <span>${yearlyPrice}</span>

10
packages/ui/src/badge.tsx
View file

@ -4,16 +4,16 @@ import * as React from "react";
import { cn } from "./lib/utils"; import { cn } from "./lib/utils";
const badgeVariants = cva( const badgeVariants = cva(
"inline-flex group whitespace-nowrap items-center rounded-full border justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "inline-flex group whitespace-nowrap items-center rounded-full justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{ {
variants: { variants: {
variant: { variant: {
primary: "border-transparent bg-primary text-primary-50", primary: "bg-primary text-primary-50",
default: "bg-gray-50 text-secondary-foreground", default: "bg-gray-50 text-secondary-foreground",
destructive: destructive: "bg-destructive text-destructive-foreground",
"border-transparent bg-destructive text-destructive-foreground",
outline: "text-foreground", outline: "text-foreground",
green: "border-transparent bg-green-500 text-green-50", green: "bg-green-600 text-white",
secondary: "text-primary bg-primary-50",
}, },
size: { size: {
md: "h-6 min-w-5 text-xs px-2", md: "h-6 min-w-5 text-xs px-2",