3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-29 22:27:25 +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>
<PayWallDialog>
<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={() =>
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 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">
<Trans i18nKey="planPro" />
</Badge>

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

@ -95,7 +95,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
</header>
<section>
<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">
<RadioGroupItem id="monthly" value="monthly" />
<label className="text-base font-semibold" htmlFor="monthly">
@ -108,15 +108,22 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
<span className="text-muted-foreground text-sm">/ mo</span>
</p>
</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="flex items-center gap-4">
<RadioGroupItem id="yearly" value="yearly" />
<label className="text-base font-semibold" htmlFor="yearly">
<span role="presentation" className="absolute inset-0" />
<div className="flex items-center gap-2">
<label
className="text-base font-semibold"
htmlFor="yearly"
>
<span
role="presentation"
className="absolute inset-0"
/>
<Trans defaults="12 months" i18nKey="12months" />
</label>
<Badge variant="green">
<Badge variant="secondary">
<Trans
defaults="Save {percentage}%"
i18nKey="savePercentage"
@ -124,6 +131,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
/>
</Badge>
</div>
</div>
<p className="text-muted-foreground pointer-events-none flex items-baseline gap-1.5 pl-8 text-sm">
<span>${yearlyPrice}</span>
<span className="line-through opacity-50">

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

@ -4,16 +4,16 @@ import * as React from "react";
import { cn } from "./lib/utils";
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: {
variant: {
primary: "border-transparent bg-primary text-primary-50",
primary: "bg-primary text-primary-50",
default: "bg-gray-50 text-secondary-foreground",
destructive:
"border-transparent bg-destructive text-destructive-foreground",
destructive: "bg-destructive text-destructive-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: {
md: "h-6 min-w-5 text-xs px-2",