From d13c82b7c8598fc8fdde52392ba865798b0b9e8f Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Sat, 28 Feb 2026 12:09:04 -0300
Subject: [PATCH] fix: replace tailwind utility classes with custom css in
 window manager to ensure theme consistency

---
 ui/suite/css/desktop.css      | 42 +++++++++++++++++++++++++++++++++++
 ui/suite/js/window-manager.js |  8 +++----
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/ui/suite/css/desktop.css b/ui/suite/css/desktop.css
index fc27fc5..1b8aa1c 100644
--- a/ui/suite/css/desktop.css
+++ b/ui/suite/css/desktop.css
@@ -136,3 +136,45 @@
 .overflow-y-auto { overflow-y: auto; }
 .bg-\[\#fafdfa\] { background-color: var(--bg, #fafdfa); }
 
+
+.window-header {
+    height: 40px;
+    background-color: var(--surface, rgba(255, 255, 255, 0.95));
+    border-bottom: 1px solid var(--border, #e5e7eb);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    user-select: none;
+    cursor: move;
+}
+.window-header .font-mono {
+    font-family: 'Fira Code', monospace;
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--accent, #16a34a);
+    letter-spacing: 0.025em;
+}
+.window-header .flex {
+    display: flex;
+    gap: 12px;
+    color: var(--text-muted, #9ca3af);
+}
+.window-header button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: color 0.15s ease;
+}
+.window-header button:hover {
+    color: var(--text, #4b5563);
+}
+.window-header .btn-close:hover {
+    color: var(--error, #ef4444);
+}
+.window-content {
+    flex: 1;
+    overflow-y: auto;
+    position: relative;
+    background-color: var(--bg, #ffffff);
+}
diff --git a/ui/suite/js/window-manager.js b/ui/suite/js/window-manager.js
index 8f6c39e..3475763 100644
--- a/ui/suite/js/window-manager.js
+++ b/ui/suite/js/window-manager.js
@@ -39,14 +39,14 @@ if (typeof window.WindowManager === 'undefined') {
             const top = 100 + offset;
             const left = 150 + offset;
 
-            windowEl.className = 'absolute w-[700px] h-[500px]  rounded-lg shadow-2xl flex flex-col border  overflow-hidden window-element';
+            windowEl.className = 'window-element';
             windowEl.style.top = `${top}px`;
             windowEl.style.left = `${left}px`;
             windowEl.style.zIndex = this.zIndexCounter++;
 
             windowEl.innerHTML = `
                 <!-- Header (Draggable) -->
-                <div class="window-header h-10  backdrop-blur flex items-center justify-between px-4 border-b  select-none cursor-move">
+                <div class="window-header">
                     <div class="font-mono text-xs font-bold text-brand-600 tracking-wide">${title}</div>
                     <div class="flex space-x-3 text-gray-400">
                         <button class="btn-minimize hover:text-gray-600" onclick="window.WindowManager.toggleMinimize('${id}')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></svg></button>
@@ -70,7 +70,7 @@ if (typeof window.WindowManager === 'undefined') {
             if (this.taskbarApps) {
                 const taskbarIcon = document.createElement('div');
                 taskbarIcon.id = `taskbar-item-${id}`;
-                taskbarIcon.className = 'h-10 w-12 flex items-center justify-center cursor-pointer  rounded border-b-2  transition-all taskbar-icon';
+                taskbarIcon.className = 'taskbar-item taskbar-icon';
                 taskbarIcon.onclick = () => this.toggleMinimize(id);
                 
                 let iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>';
@@ -284,7 +284,7 @@ if (typeof window.WindowManager === 'undefined') {
 
         makeResizable(windowEl) {
             // Implement simple bottom-right resize for now
-            // In a full implementation, you'd add invisible border handles
+            // In a full implementation, you'd add invisible handles
             windowEl.style.resize = 'both';
             // Note: CSS resize creates conflicts with custom dragging/resizing if not careful.
             // For a true "WinBox" feel, custom handles (divs) on all 8 edges/corners are needed.