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

46
frontend/app/logs/page.tsx
View File

@@ -95,7 +95,7 @@ export default function LogsPage() {
</div>
<div>
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Operations Audit</h1>
<p className="text-xs md:text-sm text-slate-400 font-bold uppercase tracking-widest mt-0.5">Real-time Intervention Tracking</p>
<p className="text-xs md:text-sm text-secondary font-bold uppercase tracking-widest mt-0.5">Real-time Intervention Tracking</p>
</div>
</div>
@@ -103,7 +103,7 @@ export default function LogsPage() {
<button
onClick={loadData}
disabled={loading}
className="flex items-center gap-2 px-5 py-2.5 bg-slate-900 border border-slate-800 text-slate-400 hover:text-white rounded-2xl text-xs font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl"
className="flex items-center gap-2 px-5 py-2.5 bg-surface border border-slate-800 text-secondary hover:text-white rounded-2xl text-xs font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl"
>
<RefreshCw size={14} className={cn(loading && "animate-spin")} />
Sync Logs
@@ -142,9 +142,9 @@ export default function LogsPage() {
placeholder="Filter by user, action or asset..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full bg-slate-900/40 border border-slate-800 rounded-2xl py-3.5 pr-4 pl-12 text-sm focus:border-primary outline-none transition-all placeholder:text-slate-600 shadow-2xl"
className="w-full bg-surface/50 border border-slate-800 rounded-2xl py-3.5 pr-4 pl-12 text-sm focus:border-primary outline-none transition-all placeholder:text-secondary shadow-2xl"
/>
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-600 transition-colors group-focus-within:text-primary">
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-secondary transition-colors group-focus-within:text-primary">
<Search size={18} />
</div>
</div>
@@ -156,7 +156,7 @@ export default function LogsPage() {
"px-5 py-2 rounded-full text-xs font-bold transition-all whitespace-nowrap border uppercase tracking-widest",
filterAction === 'ALL'
? "bg-white text-slate-950 border-white shadow-xl shadow-white/10"
: "bg-slate-900/50 text-slate-400 border-slate-800 hover:border-slate-700"
: "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700"
)}
>
All Streams
@@ -169,7 +169,7 @@ export default function LogsPage() {
"px-5 py-2 rounded-full text-xs font-bold transition-all whitespace-nowrap border uppercase tracking-widest",
filterAction === f
? "bg-primary text-white border-primary shadow-xl shadow-primary/10"
: "bg-slate-900/50 text-slate-400 border-slate-800 hover:border-slate-700"
: "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700"
)}
>
{f}
@@ -180,18 +180,18 @@ export default function LogsPage() {
<section className="space-y-3">
{loading ? (
<div className="flex flex-col items-center justify-center py-32 text-slate-600 gap-4 animate-pulse">
<div className="flex flex-col items-center justify-center py-32 text-secondary gap-4 animate-pulse">
<div className="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
<p className="text-xs font-black tracking-widest uppercase italic">Securing Audit Stream...</p>
</div>
) : filteredLogs.length === 0 ? (
<div className="bg-slate-900/20 border border-slate-800/50 border-dashed rounded-[2.5rem] py-20 flex flex-col items-center justify-center text-center gap-6">
<div className="w-16 h-16 bg-slate-900 rounded-2xl flex items-center justify-center text-slate-700 border border-slate-800">
<div className="bg-surface/20 border border-slate-800/50 border-dashed rounded-[2.5rem] py-20 flex flex-col items-center justify-center text-center gap-6">
<div className="w-16 h-16 bg-surface rounded-2xl flex items-center justify-center text-slate-700 border border-slate-800">
<Search size={32} />
</div>
<div>
<p className="text-xl font-black text-slate-300 tracking-tight">No events found</p>
<p className="text-xs text-slate-600 font-bold mt-1">Refine your strategic filters</p>
<p className="text-xs text-secondary font-bold mt-1">Refine your strategic filters</p>
</div>
</div>
) : (
@@ -200,7 +200,7 @@ export default function LogsPage() {
<button
key={log.id}
onClick={() => setSelectedLog(log)}
className="w-full text-left bg-slate-900/40 border border-slate-800/30 p-3 px-4 rounded-2xl flex items-center justify-between gap-4 hover:bg-slate-800/40 hover:border-primary/30 transition-all group active:scale-[0.99] relative overflow-hidden shadow-sm"
className="w-full text-left bg-surface/50 border border-slate-800/30 p-3 px-4 rounded-2xl flex items-center justify-between gap-4 hover:bg-slate-800/40 hover:border-primary/30 transition-all group active:scale-[0.99] relative overflow-hidden shadow-sm"
>
<div className="flex-1 min-w-0 z-10 flex items-center gap-4">
{/* Compact Action Badge */}
@@ -245,8 +245,8 @@ export default function LogsPage() {
{/* 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-slate-950/90 animate-in fade-in duration-300">
<div className="bg-slate-900 border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[3rem] p-6 sm:p-10 max-w-lg w-full shadow-2xl space-y-8 animate-in slide-in-from-bottom-10 duration-300 overflow-hidden">
<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 border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[3rem] p-6 sm:p-10 max-w-lg w-full shadow-2xl space-y-8 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(
@@ -260,18 +260,18 @@ export default function LogsPage() {
{selectedLog.resolved_name}
</h2>
</div>
<button onClick={() => setSelectedLog(null)} className="p-3 bg-slate-800/50 hover:bg-slate-800 rounded-2xl text-slate-500 transition-colors border border-slate-800 shrink-0 shadow-lg">
<button onClick={() => setSelectedLog(null)} className="p-3 bg-slate-800/50 hover:bg-slate-800 rounded-2xl text-muted transition-colors border border-slate-800 shrink-0 shadow-lg">
<X size={20} />
</button>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1 bg-slate-950/50 p-4 rounded-2xl border border-slate-800/50">
<p className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Protocol Operator</p>
<div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50">
<p className="text-[11px] font-bold text-muted uppercase tracking-widest">Protocol Operator</p>
<p className="text-sm font-black text-slate-200">{selectedLog.username || 'Automated Process'}</p>
</div>
<div className="space-y-1 bg-slate-950/50 p-4 rounded-2xl border border-slate-800/50">
<p className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Quantity Delta</p>
<div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50">
<p className="text-[11px] font-bold text-muted uppercase tracking-widest">Quantity Delta</p>
<p className={cn(
"text-xl font-black tabular-nums",
(selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500"
@@ -285,8 +285,8 @@ export default function LogsPage() {
<div className="space-y-5">
<div className="space-y-1">
<p className="text-[11px] font-bold text-slate-500 uppercase tracking-widest ml-1">Universal Timestamp</p>
<p className="text-xs font-bold text-slate-400 bg-slate-950/30 p-4 rounded-2xl border border-slate-800/30 tabular-nums">
<p className="text-[11px] font-bold text-muted uppercase tracking-widest ml-1">Universal Timestamp</p>
<p className="text-xs font-bold text-secondary bg-background/30 p-4 rounded-2xl border border-slate-800/30 tabular-nums">
{new Date(selectedLog.timestamp).toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'medium' })}
</p>
</div>
@@ -304,8 +304,8 @@ export default function LogsPage() {
<div className="grid grid-cols-2 gap-2.5">
{Object.entries(snap).map(([key, val]) => (
(val && key !== 'image_url' && key !== 'id') ? (
<div key={key} className="bg-slate-950/20 p-3 rounded-xl border border-slate-800/20">
<p className="text-[10px] font-bold text-slate-500 uppercase mb-1 tracking-tight opacity-70">{key.replace('_', ' ')}</p>
<div key={key} className="bg-background/20 p-3 rounded-xl border border-slate-800/20">
<p className="text-[10px] font-bold text-muted uppercase mb-1 tracking-tight opacity-70">{key.replace('_', ' ')}</p>
<p className="text-xs font-bold text-slate-300 truncate" title={String(val)}>{String(val)}</p>
</div>
) : null
@@ -318,7 +318,7 @@ export default function LogsPage() {
{selectedLog.details && (
<div className="space-y-1.5">
<p className="text-[11px] font-bold text-slate-500 uppercase tracking-widest ml-1">Intervention Details</p>
<p className="text-[11px] font-bold text-muted uppercase tracking-widest ml-1">Intervention Details</p>
<div className="bg-primary/5 text-primary/80 p-5 rounded-3xl border border-primary/10 text-sm font-medium leading-relaxed italic shadow-inner">
"{selectedLog.details}"
</div>