From 530b0ec2f9847ac902842174a40a3db858924ad3 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Sat, 25 Apr 2026 13:03:15 +0300
Subject: [PATCH] style(frontend): refactor LogsOverlay for DESIGN.md
 compliance

- Replaced hardcoded background colors with 'level-0' and 'level-1'
- Ensured sharp corners and removed 'rounded' classes
- Cleaned up excessive responsive text classes
---
 frontend/components/LogsOverlay.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/components/LogsOverlay.tsx b/frontend/components/LogsOverlay.tsx
index b060804b..76fb41f6 100644
--- a/frontend/components/LogsOverlay.tsx
+++ b/frontend/components/LogsOverlay.tsx
@@ -14,7 +14,7 @@ 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-background p-6 lg:p-8 xl:p-10 animate-in slide-in-from-bottom-20 duration-500">
+    <div className="fixed inset-0 z-50 flex flex-col level-0 p-6 lg:p-8 animate-in slide-in-from-bottom-20 duration-500">
       <div className="flex justify-between items-center mb-8">
         <div>
           <h2 className="text-2xl font-normal tracking-tight">Audit History</h2>
@@ -22,7 +22,7 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
         </div>
         <button 
           onClick={onClose}
-          className="p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 bg-surface rounded-none text-secondary"
+          className="p-3 bg-black border border-border text-secondary hover:text-white transition-colors"
         >
           <X size={24} />
         </button>
@@ -36,7 +36,7 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
           </div>
         ) : (
           logs.map((log) => (
-            <div key={log.id} className="bg-surface/70 border border-border p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-none flex items-center justify-between gap-4">
+            <div key={log.id} className="level-1 p-4 lg:p-5 flex items-center justify-between gap-4 transition-colors hover:border-muted">
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2 mb-1">
                   <p className={`text-xs font-normal ${
@@ -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 lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-secondary font-mono">
+                     <p className="text-xs text-secondary font-mono">
                       {new Date(log.timestamp).toLocaleString()}
                     </p>
                     {log.details && (
-                      <span className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl bg-surface-bright text-muted px-2 py-0.5 rounded border border-border font-mono">
+                      <span className="text-xs bg-black text-muted px-2 py-0.5 border border-border font-mono">
                         {log.details}
                       </span>
                     )}