From c54bc63a741c66dd931ee34515b12c4fb9e32374 Mon Sep 17 00:00:00 2001
From: Pablo Gonzalez <pablo.gonzalez.carreira@telefonica.com>
Date: Wed, 29 Jul 2026 12:51:17 +0200
Subject: [PATCH] feat(desktop): use add-line glyph for maximize/restore
 traffic light

Replaces the custom corner-triangle SVG with Remixicon's `add` (+) glyph
for both maximize and restore states in traffic-lights style, matching the
close/minimize glyphs. The restore vs maximize label still flips via
isMaximized.
---
 .../desktop/WindowsWindowControls.tsx         | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/components/desktop/WindowsWindowControls.tsx b/packages/ui/src/components/desktop/WindowsWindowControls.tsx
index 9db608d8..e722fc11 100644
--- a/packages/ui/src/components/desktop/WindowsWindowControls.tsx
+++ b/packages/ui/src/components/desktop/WindowsWindowControls.tsx
@@ -16,28 +16,16 @@ const TRAFFIC_LIGHT_COLORS: Record<DesktopWindowControlAction, { fill: string; g
   maximize: { fill: '#28C940', glyph: '#006200' },
 };
 
-const TrafficLightGlyph: React.FC<{ action: DesktopWindowControlAction; isMaximized: boolean }> = ({ action, isMaximized }) => {
+const TrafficLightGlyph: React.FC<{ action: DesktopWindowControlAction }> = ({ action }) => {
   if (action === 'close') {
     return <Icon name="close" className="size-[10px]" />;
   }
   if (action === 'minimize') {
     return <Icon name="subtract" className="size-[10px]" />;
   }
-  // Green expand: two filled corner triangles pointing outward (maximize)
-  // or inward (restore). No Remixicon equivalent exists.
-  // Glyphs are 10px inside the 14px circle on purpose: 9px left a half-pixel
-  // (2.5px) padding that rasterized lopsided at 1x DPR.
-  return isMaximized ? (
-    <svg viewBox="0 0 12 12" fill="currentColor" className="size-[10px]" aria-hidden>
-      <path d="M5.25 6.75 L9.75 6.75 L9.75 2.25 Z" />
-      <path d="M6.75 5.25 L2.25 5.25 L2.25 9.75 Z" />
-    </svg>
-  ) : (
-    <svg viewBox="0 0 12 12" fill="currentColor" className="size-[10px]" aria-hidden>
-      <path d="M5.25 2.25 L9.75 2.25 L9.75 6.75 Z" />
-      <path d="M6.75 9.75 L2.25 9.75 L2.25 5.25 Z" />
-    </svg>
-  );
+  // Green maximize/restore: same `add` (+) glyph for both states. The label
+  // (restore vs maximize) still flips via isMaximized in TrafficLightButton.
+  return <Icon name="add" className="size-[10px]" />;
 };
 
 type TrafficLightButtonProps = {
@@ -73,7 +61,7 @@ const TrafficLightButton: React.FC<TrafficLightButtonProps> = ({ action, isMaxim
         style={{ backgroundColor: fill, color: glyph }}
       >
         <span className="flex items-center justify-center opacity-0 transition-opacity duration-75 group-hover/wctl:opacity-100">
-          <TrafficLightGlyph action={action} isMaximized={isMaximized} />
+          <TrafficLightGlyph action={action} />
         </span>
       </span>
     </button>