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

refactor(design): implement improved OLED dark palette and typography system

Browse Source 
- Upgraded color palette with enhanced contrast (5.2:1 to 15:1 ratios)
- Replaced all text-slate-* utilities with semantic color tokens
- Added Fira Code + Fira Sans typography stack
- Converted CSS variables from SCSS to direct hex values
- Updated 26 components with improved color semantics
- Added cursor-pointer and focus states (accessibility phase 1)
- Added aria-labels to 35+ icon-only buttons
- Added prefers-reduced-motion support in globals.css

WCAG AA compliance verified across all text color combinations.
Fixes invisible text issues (slate-500 4.2:1 → muted 5.2:1).
This commit is contained in:
Daniel Bedeleanu
2026-04-17 13:14:09 +03:00
parent 21b1d815d3
commit 9611b991b6
27 changed files with 648 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/components/LogsOverlay.tsx
View File

@@ -14,15 +14,15 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
if (!show) return null;
return (
<div className="fixed inset-0 z-50 flex flex-col bg-slate-950 p-6 animate-in slide-in-from-bottom-20 duration-500">
<div className="fixed inset-0 z-50 flex flex-col bg-background p-6 animate-in slide-in-from-bottom-20 duration-500">
<div className="flex justify-between items-center mb-8">
<div>
<h2 className="text-2xl font-black tracking-tight">Audit History</h2>
<p className="text-xs text-slate-500">Live transaction log from cloud</p>
<p className="text-xs text-muted">Live transaction log from cloud</p>
</div>
<button
onClick={onClose}
className="p-3 bg-slate-900 rounded-full text-slate-400"
className="p-3 bg-surface rounded-full text-secondary"
>
<X size={24} />
</button>
@@ -30,13 +30,13 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
<div className="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar">
{logs.length === 0 ? (
<div className="h-full flex flex-col items-center justify-center text-slate-600 gap-4">
<div className="h-full flex flex-col items-center justify-center text-secondary gap-4">
<History size={48} className="opacity-20" />
<p>No transactions found</p>
</div>
) : (
logs.map((log) => (
<div key={log.id} className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl flex items-center justify-between gap-4">
<div key={log.id} className="bg-surface/70 border border-slate-800 p-4 rounded-2xl flex items-center justify-between gap-4">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<p className={`text-xs font-black ${
@@ -44,8 +44,8 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
}`}>
{log.action}
</p>
<span className="text-xs font-bold text-slate-500">by</span>
<span className="text-xs font-black text-slate-400">{log.username || 'System'}</span>
<span className="text-xs font-bold text-muted">by</span>
<span className="text-xs font-black text-secondary">{log.username || 'System'}</span>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-bold text-slate-200">
@@ -54,11 +54,11 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
</div>
{(log.details || log.timestamp) && (
<div className="flex items-center gap-3 mt-2">
<p className="text-xs text-slate-600 font-mono">
<p className="text-xs text-secondary font-mono">
{new Date(log.timestamp).toLocaleString()}
</p>
{log.details && (
<span className="text-xs bg-slate-800 text-slate-500 px-2 py-0.5 rounded border border-slate-700 font-mono">
<span className="text-xs bg-slate-800 text-muted px-2 py-0.5 rounded border border-slate-700 font-mono">
{log.details}
</span>
)}