From 0af4b6f4d1cd1970ef6e8dd17f5b67213648e6a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Fri, 7 Aug 2026 03:31:28 +0000
Subject: [PATCH] keep a maximized panel legible and amber its button

---
 .../src/components/Workspace/PanelSlot.tsx         | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx b/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
index b45c3639..f618040a 100644
--- a/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
+++ b/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
@@ -196,6 +196,9 @@ const TrafficLights = ({
   );
 };
 
+// Locked screens get maximize only — no close, no clear. Green means "there is room to grow", amber
+// means "this one is already filling the screen", the same way the two colours read on a mac window;
+// `TrafficLights` below switches on the same pair.
 const MaximizeButton = ({ panelId }: { panelId: string }) => {
   const { maximizedPanelId, setMaximizedPanelId } = useWorkspace();
   const isMaximized = maximizedPanelId === panelId;
@@ -205,12 +208,12 @@ const MaximizeButton = ({ panelId }: { panelId: string }) => {
       <button
         type="button"
         onClick={() => setMaximizedPanelId(isMaximized ? null : panelId)}
-        className="group/btn h-3 w-3 rounded-full bg-[#28c840] hover:brightness-90 transition-all cursor-pointer flex items-center justify-center"
+        className={`group/btn h-3 w-3 rounded-full hover:brightness-90 transition-all cursor-pointer flex items-center justify-center ${isMaximized ? 'bg-[#febc2e]' : 'bg-[#28c840]'}`}
         title={isMaximized ? 'Restore' : 'Maximize'}
       >
         {isMaximized ? (
           <Minus
-            className="h-2 w-2 text-[#006500] opacity-0 group-hover/btn:opacity-100 transition-opacity"
+            className="h-2 w-2 text-[#5f4a00] opacity-0 group-hover/btn:opacity-100 transition-opacity"
             strokeWidth={3}
           />
         ) : (
@@ -540,7 +543,12 @@ export const PanelSlot = ({
   // Header (z-10) — so a full-viewport overlay would hide the panel's own header/Restore behind the nav.
   // Clearing the header keeps it visible + the nav accessible. (Maximize only happens in the dashboard
   // shell; previews/mobile no-op it, so the header offset is always the right reference.)
-  const maximizedStyle = { backgroundColor: 'rgba(30, 30, 30, 0.95)', borderColor: 'rgba(255, 255, 255, 0.2)' };
+  // Denser glass than a tiled panel, not a darker one. Panel chrome — header text, icons, the zoom
+  // control — is black throughout, so the old near-opaque dark fill left every one of them unreadable
+  // the moment you maximised. This is the nav Header's exact recipe (`rgba(255,255,255,0.25)` over a
+  // 0.35 border), which is the app's established "raised above the rest" surface and is already proven
+  // to carry black text.
+  const maximizedStyle = { backgroundColor: 'rgba(255, 255, 255, 0.25)', borderColor: 'rgba(255, 255, 255, 0.35)' };
   const normalStyle = noHeader
     ? { backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(0, 0, 0, 0.25)' }
     : { backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(255, 255, 255, 0.2)' };