Jakob Wennberg
b800dcd403
* style(ui): system-wide UX/UI polish pass — design-system conformance + copy cleanup Multi-agent scan of all 404 UI files against the locked design system, then 141 verified surgical fixes across 109 files (net -32 lines): - Remove forbidden elevation/motion: shadow-* and rounded-xl on cards, active:scale bounce, hover:shadow on list items, transition-all -> transition-colors. - Drop font-medium from single-weight Hedvig display headings/numerals. - Replace raw rainbow Tailwind status colors with Badge variants / brand tokens / neutral surfaces (achromatic chrome, semantic colors stay data-only). - Route raw dates through formatDate(), hand-rolled currency through formatCurrency(), add tabular-nums to financial figures; text-gray-* -> text-foreground tokens. - Swap hand-rolled skeletons for the Skeleton primitive; off-scale spacing -> token scale. - Fix copy: mislabeled "Leverantörsfakturor" -> "Utgifter" on bank-import outflow total, collapse no-op identical-branch ternaries, broken Swedish diacritics (mojibake), correct mismatch-password toast, correct supplier currency-field label. - Remove PII-leaking debug console.log on register, stray console.logs. Verified: tsc clean on all changed files, eslint clean, production build passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(auth): sanitize residual error logs in register flow Follow-up to PR review (compliance swarm V16 / GDPR Art.5(1)(f)): the remaining console.error calls in the register flow passed raw error objects, which Supabase may populate with PII (email) in nested fields. Log only sanitized message strings instead. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Check } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface SuccessAnimationProps {
|
|
show: boolean
|
|
title?: string
|
|
description?: string
|
|
onComplete?: () => void
|
|
variant?: 'default' | 'celebration'
|
|
}
|
|
|
|
export function SuccessAnimation({
|
|
show,
|
|
title = 'Klart!',
|
|
description,
|
|
onComplete,
|
|
variant = 'default',
|
|
}: SuccessAnimationProps) {
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (show) {
|
|
setVisible(true)
|
|
const timer = setTimeout(() => {
|
|
setVisible(false)
|
|
onComplete?.()
|
|
}, 2000)
|
|
return () => clearTimeout(timer)
|
|
}
|
|
}, [show, onComplete])
|
|
|
|
if (!visible) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/80 backdrop-blur-sm animate-fade-in">
|
|
<div className="flex flex-col items-center gap-4 animate-scale-in">
|
|
{/* Animated checkmark */}
|
|
<div className="relative">
|
|
<div className={cn(
|
|
"w-20 h-20 rounded-full flex items-center justify-center",
|
|
"bg-success/10 ring-4 ring-success/20"
|
|
)}>
|
|
<Check className="h-10 w-10 text-success animate-scale-in" style={{ animationDelay: '200ms' }} />
|
|
</div>
|
|
{/* Pulse ring */}
|
|
<div className="absolute inset-0 rounded-full bg-success/10 animate-ping" style={{ animationDuration: '1s', animationIterationCount: '1' }} />
|
|
</div>
|
|
|
|
{/* Text */}
|
|
<div className="text-center animate-slide-up" style={{ animationDelay: '300ms' }}>
|
|
<p className="text-lg font-display">{title}</p>
|
|
{description && (
|
|
<p className="text-sm text-muted-foreground mt-1">{description}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Celebration particles */}
|
|
{variant === 'celebration' && (
|
|
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
|
{Array.from({ length: 12 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute w-2 h-2 rounded-full"
|
|
style={{
|
|
left: `${50 + Math.cos((i * 30 * Math.PI) / 180) * 40}%`,
|
|
top: `${50 + Math.sin((i * 30 * Math.PI) / 180) * 40}%`,
|
|
backgroundColor: ['hsl(145, 20%, 36%)', 'hsl(18, 45%, 55%)', 'hsl(38, 70%, 55%)', 'hsl(150, 30%, 40%)'][i % 4],
|
|
animation: `fadeIn 0.3s ${i * 50}ms both`,
|
|
opacity: 0.8,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|