BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(desktop): use add-line glyph for maximize/restore traffic light

Browse Source 
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.
This commit is contained in:
Pablo Gonzalez
2026-07-29 19:38:48 +02:00
parent 9001e38c54
commit c54bc63a74
1 changed files with 5 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/desktop/WindowsWindowControls.tsx
+5 -17
View File
@@ -16,28 +16,16 @@ const TRAFFIC_LIGHT_COLORS: Record<DesktopWindowControlAction, { fill: string; g
maximize: { fill: '#28C940', glyph: '#006200' }, 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') { if (action === 'close') {
return <Icon name="close" className="size-[10px]" />; return <Icon name="close" className="size-[10px]" />;
} }
if (action === 'minimize') { if (action === 'minimize') {
return <Icon name="subtract" className="size-[10px]" />; return <Icon name="subtract" className="size-[10px]" />;
} }
// Green expand: two filled corner triangles pointing outward (maximize) // Green maximize/restore: same `add` (+) glyph for both states. The label
// or inward (restore). No Remixicon equivalent exists. // (restore vs maximize) still flips via isMaximized in TrafficLightButton.
// Glyphs are 10px inside the 14px circle on purpose: 9px left a half-pixel return <Icon name="add" className="size-[10px]" />;
// (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>
);
}; };
type TrafficLightButtonProps = { type TrafficLightButtonProps = {
@@ -73,7 +61,7 @@ const TrafficLightButton: React.FC<TrafficLightButtonProps> = ({ action, isMaxim
style={{ backgroundColor: fill, color: glyph }} style={{ backgroundColor: fill, color: glyph }}
> >
<span className="flex items-center justify-center opacity-0 transition-opacity duration-75 group-hover/wctl:opacity-100"> <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>
</span> </span>
</button> </button>