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

style(ui): system-wide UX/UI polish pass — design-system conformance + copy cleanup (#835)

Browse Source 
* 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>
This commit is contained in:
Jakob Wennberg
2026-06-30 13:14:13 +02:00
committed by GitHub
co-authored by Claude Opus 4.8
parent a8072f6423
commit b800dcd403
109 changed files with 270 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/import/AccountMappingStep.tsx
+1 -1
View File
@@ -343,7 +343,7 @@ function ConfidenceBadge({
}
if (confidence >= 0.9) {
return <Badge variant="default" className="bg-success">Exakt</Badge>
return <Badge variant="success">Exakt</Badge>
}
if (confidence >= 0.7) {
components/import/ArticlesEditStep.tsx
+1
View File
@@ -259,6 +259,7 @@ export default function ArticlesEditStep({
variant="ghost"
size="icon"
className="h-7 w-7"
aria-label="Ta bort rad"
onClick={() => deleteRow(row.id)}
>
<Trash2 className="h-3.5 w-3.5 text-muted-foreground" />
components/import/BankFileConfirmStep.tsx
+4 -4
View File
@@ -103,7 +103,7 @@ export default function BankFileConfirmStep({
<FileText className="h-4 w-4" />
<span className="text-xs">Transaktioner</span>
</div>
<p className="text-xl font-display font-medium tabular-nums">{stats.parsed_rows}</p>
<p className="text-xl font-display tabular-nums">{stats.parsed_rows}</p>
{stats.skipped_rows > 0 && (
<p className="text-xs text-muted-foreground mt-1">
{stats.skipped_rows} rader hoppades över
@@ -125,16 +125,16 @@ export default function BankFileConfirmStep({
<div className="flex items-center gap-2 text-muted-foreground mb-1">
<span className="text-xs">Inkomster</span>
</div>
<p className="text-xl font-display font-medium tabular-nums">
<p className="text-xl font-display tabular-nums">
{formatCurrency(stats.total_income)}
</p>
</div>
<div className="p-4 bg-muted/50 rounded-lg">
<div className="flex items-center gap-2 text-muted-foreground mb-1">
<span className="text-xs">Leverantörsfakturor</span>
<span className="text-xs">Utgifter</span>
</div>
<p className="text-xl font-display font-medium tabular-nums">
<p className="text-xl font-display tabular-nums">
{formatCurrency(stats.total_expenses)}
</p>
</div>
components/import/BankFilePreviewStep.tsx
+6 -6
View File
@@ -48,7 +48,7 @@ export default function BankFilePreviewStep({
<FileText className="h-4 w-4" />
<span className="text-sm">Transaktioner</span>
</div>
<p className="text-2xl font-display font-medium tabular-nums">{stats.parsed_rows}</p>
<p className="text-2xl font-display tabular-nums">{stats.parsed_rows}</p>
{stats.skipped_rows > 0 && (
<p className="text-xs text-muted-foreground mt-1">
{stats.skipped_rows} rader hoppades över
@@ -75,7 +75,7 @@ export default function BankFilePreviewStep({
<TrendingUp className="h-4 w-4" />
<span className="text-sm">Inkomster</span>
</div>
<p className="text-lg font-display font-medium tabular-nums">
<p className="text-lg font-display tabular-nums">
{formatCurrency(stats.total_income)}
</p>
</CardContent>
@@ -85,9 +85,9 @@ export default function BankFilePreviewStep({
<CardContent className="pt-6">
<div className="flex items-center gap-2 text-muted-foreground mb-1">
<TrendingDown className="h-4 w-4" />
<span className="text-sm">Leverantörsfakturor</span>
<span className="text-sm">Utgifter</span>
</div>
<p className="text-lg font-display font-medium tabular-nums">
<p className="text-lg font-display tabular-nums">
{formatCurrency(stats.total_expenses)}
</p>
</CardContent>
@@ -96,9 +96,9 @@ export default function BankFilePreviewStep({
{/* Warnings */}
{warnings.length > 0 && (
<Card className="border-yellow-300">
<Card>
<CardHeader className="py-3">
<CardTitle className="text-sm flex items-center gap-2 text-yellow-600">
<CardTitle className="text-sm flex items-center gap-2 text-warning">
<AlertTriangle className="h-4 w-4" />
{warnings.length} varning{warnings.length !== 1 ? 'ar' : ''}
</CardTitle>
components/import/ImportResultStep.tsx
+6 -6
View File
@@ -50,7 +50,7 @@ export default function ImportResultStep({ result, onNewImport, onUndo }: Import
return (
<div className="space-y-6">
{/* Success/Failure header */}
<Card className={result.success ? 'border-success/50' : 'border-destructive/50'}>
<Card className={result.success ? 'border-border' : 'border-destructive/50'}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
{result.success ? (
@@ -116,7 +116,7 @@ export default function ImportResultStep({ result, onNewImport, onUndo }: Import
<FileText className="h-4 w-4" />
<span className="text-sm">Verifikationer skapade</span>
</div>
<p className="text-2xl font-display font-medium tabular-nums">{result.journalEntriesCreated}</p>
<p className="text-2xl font-display tabular-nums">{result.journalEntriesCreated}</p>
</CardContent>
</Card>
@@ -125,9 +125,9 @@ export default function ImportResultStep({ result, onNewImport, onUndo }: Import
<div className="flex items-center gap-2 text-muted-foreground mb-1">
<span className="text-sm">Räkenskapsår</span>
</div>
<div className="text-2xl font-display font-medium">
<div className="text-2xl font-display">
{result.fiscalPeriodId ? (
<Badge variant="default" className="bg-success">Skapat</Badge>
<Badge variant="success">Skapat</Badge>
) : (
<Badge variant="secondary">Befintligt</Badge>
)}
@@ -140,9 +140,9 @@ export default function ImportResultStep({ result, onNewImport, onUndo }: Import
<div className="flex items-center gap-2 text-muted-foreground mb-1">
<span className="text-sm">Ingående balanser</span>
</div>
<div className="text-2xl font-display font-medium">
<div className="text-2xl font-display">
{result.openingBalanceEntryId ? (
<Badge variant="default" className="bg-success">Importerade</Badge>
<Badge variant="success">Importerade</Badge>
) : (
<Badge variant="secondary">Inga</Badge>
)}
components/import/ImportReviewStep.tsx
+4 -4
View File
@@ -13,7 +13,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { formatCurrency } from '@/lib/utils'
import { formatCurrency, formatDate } from '@/lib/utils'
import {
CheckCircle,
AlertCircle,
@@ -183,7 +183,7 @@ export default function ImportReviewStep({
{preview.voucherCount} verifikationer bearbetas
</p>
</div>
<div className="text-2xl font-display font-medium tabular-nums text-muted-foreground">
<div className="text-2xl font-display tabular-nums text-muted-foreground">
{elapsed}s
</div>
<p className="text-sm text-muted-foreground max-w-sm">
@@ -224,11 +224,11 @@ export default function ImportReviewStep({
<p className="font-medium">Räkenskapsår</p>
<p className="text-sm text-muted-foreground">
{preview.fiscalYearStart
? new Date(preview.fiscalYearStart).toLocaleDateString('sv-SE')
? formatDate(preview.fiscalYearStart)
: '?'}{' '}
-{' '}
{preview.fiscalYearEnd
? new Date(preview.fiscalYearEnd).toLocaleDateString('sv-SE')
? formatDate(preview.fiscalYearEnd)
: '?'}
</p>
</div>
components/import/SIEPreviewStep.tsx
+5 -5
View File
@@ -103,7 +103,7 @@ export default function SIEPreviewStep({
<FileText className="h-4 w-4" />
<span className="text-sm">Konton</span>
</div>
<p className="text-2xl font-display font-medium tabular-nums">{preview.accountCount}</p>
<p className="text-2xl font-display tabular-nums">{preview.accountCount}</p>
</CardContent>
</Card>
@@ -113,7 +113,7 @@ export default function SIEPreviewStep({
<BarChart3 className="h-4 w-4" />
<span className="text-sm">Verifikationer</span>
</div>
<p className="text-2xl font-display font-medium tabular-nums">{preview.voucherCount}</p>
<p className="text-2xl font-display tabular-nums">{preview.voucherCount}</p>
</CardContent>
</Card>
@@ -122,7 +122,7 @@ export default function SIEPreviewStep({
<div className="flex items-center gap-2 text-muted-foreground mb-1">
<span className="text-sm">Transaktionsrader</span>
</div>
<p className="text-2xl font-display font-medium tabular-nums">{preview.transactionLineCount}</p>
<p className="text-2xl font-display tabular-nums">{preview.transactionLineCount}</p>
</CardContent>
</Card>
@@ -131,7 +131,7 @@ export default function SIEPreviewStep({
<div className="flex items-center gap-2 text-muted-foreground mb-1">
<span className="text-sm">IB Summa</span>
</div>
<p className="text-2xl font-display font-medium tabular-nums">{formatCurrency(preview.openingBalanceTotal)}</p>
<p className="text-2xl font-display tabular-nums">{formatCurrency(preview.openingBalanceTotal)}</p>
</CardContent>
</Card>
</div>
@@ -161,7 +161,7 @@ export default function SIEPreviewStep({
<div>
<p className="text-sm text-muted-foreground">Status</p>
{preview.trialBalance.isBalanced ? (
<Badge variant="default" className="bg-success">Balanserar</Badge>
<Badge variant="success">Balanserar</Badge>
) : (
<Badge variant="secondary">
Diff: {formatCurrency(preview.trialBalance.totalDebit - preview.trialBalance.totalCredit)}
components/import/SuppliersEditStep.tsx
+2 -1
View File
@@ -193,7 +193,8 @@ export default function SuppliersEditStep({
<Button
variant="ghost"
size="icon"
className="h-7 w-7"
className="h-8 w-8"
aria-label="Ta bort rad"
onClick={() => deleteRow(row.id)}
>
<Trash2 className="h-3.5 w-3.5 text-muted-foreground" />