admin/accounted
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(design): no amber boxes, attention is one ochre sentence (#1562)

Browse Source 
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>
This commit is contained in:
Jakob Wennberg
2026-08-13 11:20:16 +02:00
committed by GitHub
co-authored by Jakob Wennberg Claude Fable 5
parent abff8d90f6
commit e51a2c8102
50 changed files with 157 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/import/ArticlesEditStep.tsx
+5 -5
View File
@@ -99,7 +99,7 @@ export default function ArticlesEditStep({
<CardContent className="space-y-4">
{/* Duplicate handling banner */}
{liveDuplicateCount > 0 && (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<RefreshCw className="h-4 w-4 text-warning mt-0.5 shrink-0" />
<div className="flex-1 space-y-2">
<p className="text-sm">
@@ -129,7 +129,7 @@ export default function ArticlesEditStep({
{/* VAT-adjustment notice: rows whose rate was snapped/defaulted */}
{adjustedVatCount > 0 && (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<AlertTriangle className="h-4 w-4 text-warning mt-0.5 shrink-0" />
<p className="text-sm">
<span className="font-medium">{adjustedVatCount} rad{adjustedVatCount === 1 ? '' : 'er'}</span> fick
@@ -209,7 +209,7 @@ export default function ArticlesEditStep({
}
>
<SelectTrigger
className={cn('h-8', row.vat_rate_adjusted && 'border-warning text-warning')}
className={cn('h-8', row.vat_rate_adjusted && 'border-border text-warning')}
>
<SelectValue />
</SelectTrigger>
@@ -246,7 +246,7 @@ export default function ArticlesEditStep({
className={cn(
'text-[11px] font-medium px-1.5 py-0.5 rounded',
updateDuplicates
? 'bg-warning/15 text-warning'
? 'bg-muted text-warning'
: 'bg-muted text-muted-foreground',
)}
title={`Matchar ${row.duplicate_match.existing_name} (${row.duplicate_match.matched_by})`}
@@ -278,7 +278,7 @@ export default function ArticlesEditStep({
</div>
{hasErrors && (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<AlertTriangle className="h-4 w-4 text-warning mt-0.5 shrink-0" />
<p className="text-sm text-warning">
Vissa rader har valideringsfel (markerade i rött). Åtgärda eller ta bort dem
components/import/CustomersEditStep.tsx
+3 -3
View File
@@ -89,7 +89,7 @@ export default function CustomersEditStep({
<CardContent className="space-y-4">
{/* Duplicate handling banner */}
{liveDuplicateCount > 0 && (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<RefreshCw className="h-4 w-4 text-warning mt-0.5 shrink-0" />
<div className="flex-1 space-y-2">
<p className="text-sm">
@@ -185,7 +185,7 @@ export default function CustomersEditStep({
className={cn(
'text-[11px] font-medium px-1.5 py-0.5 rounded',
updateDuplicates
? 'bg-warning/15 text-warning'
? 'bg-muted text-warning'
: 'bg-muted text-muted-foreground',
)}
title={`Matchar ${row.duplicate_match.existing_name} (${row.duplicate_match.matched_by})`}
@@ -216,7 +216,7 @@ export default function CustomersEditStep({
</div>
{hasErrors && (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<AlertTriangle className="h-4 w-4 text-warning mt-0.5 shrink-0" />
<p className="text-sm text-warning">
Vissa rader har valideringsfel (markerade i rött). Åtgärda eller ta bort dem
components/import/ImportResultStep.tsx
+3 -3
View File
@@ -179,7 +179,7 @@ export default function ImportResultStep({
)}
{result.success && result.nextPeriodIBResyncSkipped && (
<Card className="border-warning/50">
<Card className="border-border">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base text-warning">
<AlertCircle className="h-5 w-5" />
@@ -347,7 +347,7 @@ export default function ImportResultStep({
{/* Untransferred prior-year results — the year-end omföring is missing */}
{untransferred && untransferred.length > 0 && (
<Card className="border-warning/50">
<Card className="border-border">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-warning">
<AlertCircle className="h-5 w-5" />
@@ -376,7 +376,7 @@ export default function ImportResultStep({
{/* Other warnings (filtered) */}
{otherWarnings.length > 0 && (
<Card className="border-warning/50">
<Card className="border-border">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-warning">
<AlertCircle className="h-5 w-5" />
components/import/ImportReviewStep.tsx
+1 -1
View File
@@ -413,7 +413,7 @@ export default function ImportReviewStep({
{/* Warnings */}
{!preview.trialBalance.isBalanced && (
<Card className="border-warning/50 bg-warning/5">
<Card className="border-border bg-muted/30">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-warning">
<AlertCircle className="h-5 w-5" />
components/import/OpeningBalancePeriodStep.tsx
+2 -2
View File
@@ -115,7 +115,7 @@ export default function OpeningBalancePeriodStep({
Hämtar perioder...
</div>
) : periods.length === 0 ? (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<AlertCircle className="h-4 w-4 text-warning mt-0.5 shrink-0" />
<p className="text-sm text-warning">
Inga räkenskapsperioder hittades. Skapa en räkenskapsperiod under Bokföring först.
@@ -142,7 +142,7 @@ export default function OpeningBalancePeriodStep({
{/* Replace notice: selecting a period that already has IB corrects it */}
{periodHasOB && !periodIsClosed && !periodIsLocked && (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<AlertCircle className="h-4 w-4 text-warning mt-0.5 shrink-0" />
<p className="text-sm text-warning">
Denna period har redan ingående balanser. Om du fortsätter makuleras (stornas) den
components/import/OpeningBalanceRowEditor.tsx
+1 -1
View File
@@ -415,7 +415,7 @@ export default function OpeningBalanceRowEditor({
{/* Warnings */}
{!totals.isBalanced && Math.abs(totals.diff) > 1 && (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<AlertTriangle className="h-4 w-4 text-warning mt-0.5 shrink-0" />
<p className="text-sm text-warning">
Debet och kredit balanserar inte. Differens:{' '}
components/import/RegisterResultStep.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ export default function RegisterResultStep({
{result.warnings && result.warnings.length > 0 && (
<div className="space-y-2">
<h4 className="text-sm font-medium">Att notera</h4>
<div className="rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="rounded-lg border border-border bg-muted/30 px-4 py-3">
<ul className="space-y-1 text-sm text-muted-foreground">
{result.warnings.map((w, i) => (
<li key={i} className="flex items-start gap-2">
components/import/SIEPreviewStep.tsx
+4 -4
View File
@@ -150,7 +150,7 @@ export default function SIEPreviewStep({
</div>
{/* Trial balance check */}
<Card className={preview.trialBalance.isBalanced ? 'border-success/50' : 'border-warning/50'}>
<Card className={preview.trialBalance.isBalanced ? 'border-success/50' : 'border-border'}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
{preview.trialBalance.isBalanced ? (
@@ -185,7 +185,7 @@ export default function SIEPreviewStep({
{/* Significant imbalance: explain + require acknowledgement before continuing */}
{significantImbalance && (
<div className="mt-4 space-y-3 rounded-lg border border-warning/40 bg-warning/5 px-4 py-3">
<div className="mt-4 space-y-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<div className="flex items-start gap-2 text-sm">
<AlertCircle className="h-4 w-4 text-warning mt-0.5 flex-shrink-0" />
<div className="space-y-1">
@@ -222,7 +222,7 @@ export default function SIEPreviewStep({
preview.mappingStatus.unmapped > 0
? 'border-destructive/50'
: preview.mappingStatus.lowConfidence > 0
? 'border-warning/50'
? 'border-border'
: 'border-success/50'
}
>
@@ -356,7 +356,7 @@ export default function SIEPreviewStep({
{/* Warnings */}
{warnings.length > 0 && (
<Card className="border-warning/50">
<Card className="border-border">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<AlertCircle className="h-5 w-5 text-warning" />
components/import/SIEUploadStep.tsx
+3 -3
View File
@@ -168,7 +168,7 @@ export default function SIEUploadStep({ onFileSelect, isLoading, error, errorTyp
<div className="mt-4 space-y-3">
<div className={`p-4 rounded-lg flex gap-3 ${
errorType === 'duplicate' || errorType === 'duplicate_period'
? 'bg-warning/10 border border-warning/20'
? 'bg-muted/30 border border-border'
: 'bg-destructive/10 border border-destructive/20'
}`}>
<AlertCircle className={`h-5 w-5 flex-shrink-0 mt-0.5 ${
@@ -200,7 +200,7 @@ export default function SIEUploadStep({ onFileSelect, isLoading, error, errorTyp
<Button
variant="outline"
size="sm"
className="border-warning/50 text-warning hover:bg-warning/10"
className="border-border text-warning hover:bg-muted/30"
disabled={isReplacing}
onClick={(e) => {
e.stopPropagation()
@@ -246,7 +246,7 @@ export default function SIEUploadStep({ onFileSelect, isLoading, error, errorTyp
{/* Validation warnings list */}
{validationWarnings && validationWarnings.length > 0 && (
<div className="p-4 bg-warning/5 border border-warning/15 rounded-lg space-y-2">
<div className="p-4 bg-muted/30 border border-border rounded-lg space-y-2">
<p className="text-sm font-medium text-warning">Varningar ({validationWarnings.length})</p>
<div className="space-y-1.5 max-h-32 overflow-y-auto">
{validationWarnings.map((warn, i) => (
components/import/SuppliersEditStep.tsx
+3 -3
View File
@@ -80,7 +80,7 @@ export default function SuppliersEditStep({
</CardHeader>
<CardContent className="space-y-4">
{liveDuplicateCount > 0 && (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<RefreshCw className="h-4 w-4 text-warning mt-0.5 shrink-0" />
<div className="flex-1 space-y-2">
<p className="text-sm">
@@ -175,7 +175,7 @@ export default function SuppliersEditStep({
className={cn(
'text-[11px] font-medium px-1.5 py-0.5 rounded',
updateDuplicates
? 'bg-warning/15 text-warning'
? 'bg-muted text-warning'
: 'bg-muted text-muted-foreground',
)}
title={`Matchar ${row.duplicate_match.existing_name} (${row.duplicate_match.matched_by})`}
@@ -207,7 +207,7 @@ export default function SuppliersEditStep({
</div>
{hasErrors && (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 px-4 py-3">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
<AlertTriangle className="h-4 w-4 text-warning mt-0.5 shrink-0" />
<p className="text-sm text-warning">
Vissa rader har valideringsfel (markerade i rött). Åtgärda eller ta bort dem