External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify analytics consent page for higher opt-in

Browse Source 
Remove two-column bullet lists, vendor names, and fear-priming "NEVER"
list. Replace with a single benefit-led paragraph and privacy note.
This commit is contained in:
ashim-hq
2026-04-23 22:08:27 +08:00
parent b03c428e4f
commit 8c5945362a
2 changed files with 14 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/analytics-consent-page.tsx
+10 -41
View File
@@ -40,63 +40,32 @@ export function AnalyticsConsentPage() {
return (
<div className="flex min-h-screen items-center justify-center bg-background p-6">
<div className="w-full max-w-lg space-y-6 rounded-2xl border border-border bg-card p-8 shadow-lg">
<div className="w-full max-w-[400px] space-y-6 rounded-2xl border border-border bg-card p-9 shadow-lg">
<div className="flex justify-center">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
<Shield className="h-6 w-6 text-primary" />
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10">
<Shield className="h-[22px] w-[22px] text-primary" />
</div>
</div>
<div className="space-y-2 text-center">
<h1 className="text-xl font-semibold text-foreground">{t.consentTitle}</h1>
<p className="text-sm text-muted-foreground">{t.consentDescription}</p>
<div className="space-y-3 text-center">
<h1 className="text-lg font-semibold text-foreground">{t.consentTitle}</h1>
<p className="text-sm leading-relaxed text-muted-foreground">{t.consentDescription}</p>
</div>
<p className="text-center text-sm font-medium text-foreground">{t.consentPrivacy}</p>
<p className="text-center text-xs text-muted-foreground/60">{t.consentChangeable}</p>
<div className="grid grid-cols-2 gap-6 text-sm">
<div>
<p className="mb-2 font-medium text-foreground">{t.whatShared}</p>
<ul className="space-y-1 text-muted-foreground">
{t.whatSharedItems.map((item) => (
<li key={item} className="flex items-start gap-1.5">
<span className="mt-1 text-xs">·</span>
{item}
</li>
))}
</ul>
</div>
<div>
<p className="mb-2 font-medium text-foreground">{t.whatNever}</p>
<ul className="space-y-1 text-muted-foreground">
{t.whatNeverItems.map((item) => (
<li key={item} className="flex items-start gap-1.5">
<span className="mt-1 text-xs">·</span>
{item}
</li>
))}
</ul>
</div>
</div>
<p className="text-center text-xs text-muted-foreground">
{t.consentProviders}
<br />
{t.consentChangeable}
</p>
<div className="flex gap-3">
<div className="flex gap-2.5">
<button
type="button"
onClick={handleAccept}
className="flex-1 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
className="flex-1 rounded-[10px] bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
>
{t.acceptButton}
</button>
<button
type="button"
onClick={handleDecline}
className="flex-1 rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-muted"
className="flex-1 rounded-[10px] border border-border px-4 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted"
>
{t.declineButton}
</button>