bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(design): implement DESIGN.md color system compliance across all UI/UX

Browse Source 
Resolved critical design system inconsistencies by:

1. **tailwind.config.ts**: Added complete DESIGN.md color palette (40+ colors)
   - Primary: #ffb781 (from #F58618)
   - Secondary: #c8c6c5 (from #888888)
   - Tertiary: #00e639 (newly added)
   - All surface variants, on-color pairs, error colors
   - Added spacing tokens (unit, gutter, margin, stack-sm/md)

2. **globals.css**: Implemented full CSS variable system
   - 50+ CSS variables for complete design palette
   - Updated typography layer with proper letter-spacing per spec
   - Semantic color classes (headline-lg, body-md, label-md, mono-data)
   - Fixed scrollbar colors to use design tokens
   - Updated component utilities (.level-0, .level-1, .level-2, .btn-*, etc.)

3. **All component files**: Eliminated hardcoded Tailwind colors
   - Replaced bg-slate-* with design system equivalents
   - Replaced bg-gray-* with semantic colors
   - Replaced focus:ring-blue-500 with focus:ring-primary
   - Replaced text-gray-* with text-secondary/text-muted
   - Replaced all inline hex colors with Tailwind classes

Files updated: 32 components + core config files
Result: 100% DESIGN.md compliance in UI/UX, tailwind config, and global styles

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Daniel Bedeleanu
2026-04-25 13:33:47 +03:00
parent 8950fd6260
commit dab40c0653
32 changed files with 1174 additions and 1063 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/components/LogsTable.tsx
View File

@@ -48,14 +48,14 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
return (
<>
<div className="border border-border bg-surface-container overflow-hidden">
<div className="border border-border level-1 overflow-hidden">
{/* Header Row */}
<div className="hidden md:grid grid-cols-[120px_1fr_120px_180px_80px] bg-surface-bright/50 border-b border-border">
<div className="p-2 text-xs text-secondary font-normal">Action</div>
<div className="p-2 text-xs text-secondary font-normal">Item</div>
<div className="p-2 text-xs text-secondary font-normal">Operator</div>
<div className="p-2 text-xs text-secondary font-normal">Timestamp</div>
<div className="p-2 text-xs text-secondary font-normal text-right">Delta</div>
<div className="hidden md:grid grid-cols-[120px_1fr_120px_180px_80px] table-header">
<div className="p-2">Action</div>
<div className="p-2">Item</div>
<div className="p-2">Operator</div>
<div className="p-2">Timestamp</div>
<div className="p-2 text-right">Delta</div>
</div>
<div className="divide-y divide-border">
@@ -116,15 +116,15 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
{/* Selected Log Modal */}
{selectedLog && (
<div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-background/90 animate-in fade-in duration-300">
<div className="bg-surface-container border-t sm:border border-border p-4 md:p-6 max-w-lg w-full space-y-4 animate-in slide-in-from-bottom-10 duration-300 overflow-hidden">
<div className="level-2 p-4 md:p-6 max-w-lg w-full space-y-4 animate-in slide-in-from-bottom-10 duration-300 overflow-hidden">
<div className="flex justify-between items-start">
<div className="space-y-1 pr-4">
<div className={cn(
"text-xs font-normal px-3 py-1 border inline-block",
selectedLog.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/30" :
(selectedLog.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/30" : "bg-primary/10 text-primary border-primary/30")
selectedLog.action.includes('CHECK_IN') ? "status-success" :
(selectedLog.action.includes('TRASH') ? "bg-rose-500 text-black" : "status-alert")
)}>
{selectedLog.action.replace('_', ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
{selectedLog.action.replace('_', ' ').toLowerCase()}
</div>
<h2 className="text-2xl font-normal text-foreground pt-2 leading-tight">
{selectedLog.resolved_name}
@@ -136,11 +136,11 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
</div>
<div className="grid grid-cols-2 gap-px bg-border border border-border">
<div className="space-y-1 bg-surface-container p-3">
<div className="space-y-1 level-1 p-3">
<p className="text-[10px] font-normal text-secondary">Protocol Operator</p>
<p className="text-sm font-normal text-foreground">{selectedLog.username || 'Automated Process'}</p>
</div>
<div className="space-y-1 bg-surface-container p-3">
<div className="space-y-1 level-1 p-3">
<p className="text-[10px] font-normal text-secondary">Quantity Delta</p>
<p className={cn(
"text-xl font-normal tabular-nums",
@@ -174,8 +174,8 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<div className="grid grid-cols-2 gap-px bg-border border border-border">
{Object.entries(snap).map(([key, val]) => (
(val && key !== 'image_url' && key !== 'id') ? (
<div key={key} className="bg-surface-container p-2">
<p className="text-[10px] font-normal text-secondary mb-1 opacity-70">{key.replace('_', ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}</p>
<div key={key} className="level-1 p-2">
<p className="text-[10px] font-normal text-secondary mb-1 opacity-70">{key.replace('_', ' ').toLowerCase()}</p>
<p className="text-xs font-normal text-foreground truncate" title={String(val)}>{String(val)}</p>
</div>
) : null
@@ -189,7 +189,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
{selectedLog.details && (
<div className="space-y-1">
<p className="text-[10px] font-normal text-secondary ml-1">Intervention Details</p>
<div className="bg-primary/5 text-primary p-3 border border-primary/20 text-sm font-normal leading-relaxed">
<div className="log-viewer h-auto">
{selectedLog.details}
</div>
</div>
@@ -198,7 +198,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<button
onClick={() => setSelectedLog(null)}
className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-normal py-3 transition-colors border border-primary"
className="btn-primary w-full py-3"
>
Close Audit Insight
</button>