Jakob Wennberg
e51a2c8102
The founder wants the yellow boxes gone everywhere. The design system already agreed: status colors are data, not chrome (convention 12) and attention is a single ochre sentence, never a banner (convention 6). This enforces it: - ConfirmationDialog: the amber warning panel is now an AttnLine, and the hardcoded Swedish default warningText is gone: it injected an immutability warning into dialogs whose authors never asked for one (every current caller passes the prop explicitly, so no behavior change at any call site). - Badge warning variant: amber fill replaced with a hairline chip and ochre text. - DestructiveConfirmDialog warning variant: neutral icon disc, default primary confirm button (only --destructive survives as chrome). - BankSyncStatusChip stale state: same neutral shape as the healthy chip, ochre text carries the signal. - SandboxBanner: solid amber bar becomes secondary-on-border chrome. - BankIdAuth, BankIdCompanyPicker, SessionTimeoutModal: the last three raw-amber (bg-amber-*) holdouts moved onto tokens, the company-picker banner becoming a plain AttnLine. - Mechanical sweep of the ~58 hand-rolled bg-warning/border-warning boxes across 45 files: fills to bg-muted/30 (icon discs bg-muted), borders to border-border, text-warning-foreground to text-attn. The account-class dots in account-number.tsx keep bg-warning: they are data indicators, not chrome. Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { FlaskConical, X, Replace } from 'lucide-react'
|
|
|
|
interface MockDataBannerProps {
|
|
importedAt: string | null
|
|
onClear: () => void
|
|
onReplace: () => void
|
|
}
|
|
|
|
export default function MockDataBanner({ importedAt, onClear, onReplace }: MockDataBannerProps) {
|
|
const formatted = importedAt
|
|
? new Date(importedAt).toLocaleString('sv-SE', {
|
|
year: 'numeric', month: 'short', day: 'numeric',
|
|
hour: '2-digit', minute: '2-digit',
|
|
})
|
|
: null
|
|
|
|
return (
|
|
<Card className="border-l-4 border-l-warning bg-muted/30">
|
|
<CardContent className="pt-4 pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<FlaskConical className="h-5 w-5 text-attn shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-attn">
|
|
Testdata aktivt
|
|
</p>
|
|
<p className="text-xs text-attn mt-0.5">
|
|
Rapporten visar importerad testdata istället för bokföringsdata.
|
|
{formatted && <> Importerat {formatted}.</>}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-1.5 shrink-0">
|
|
<Button variant="outline" size="sm" onClick={onReplace} className="h-7 text-xs">
|
|
<Replace className="h-3.5 w-3.5 mr-1" />
|
|
Ersätt
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={onClear} className="h-7 text-xs">
|
|
<X className="h-3.5 w-3.5 mr-1" />
|
|
Rensa
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|