Skip to content

fix: replace color-picker square glyph with a palette icon #287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sahil-noon merged 1 commit into from
Jun 25, 2026
Merged

fix: replace color-picker square glyph with a palette icon #287

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 36 additions & 2 deletions app/frontend/src/components/sidebar/window-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,9 +329,9 @@ function WindowRowInner({
e.stopPropagation();
setShowColorPicker((v) => !v);
}}
className="text-[12px] text-text-secondary hover:text-text-primary transition-opacity cursor-pointer opacity-0 group-hover:opacity-100 coarse:opacity-100 focus-visible:opacity-100 px-0.5 min-h-[36px] flex items-center justify-center"
className="text-text-secondary hover:text-text-primary transition-opacity cursor-pointer opacity-0 group-hover:opacity-100 coarse:opacity-100 focus-visible:opacity-100 px-0.5 min-h-[36px] flex items-center justify-center"
>
■
<PaletteIcon />
</button>
)}
<button
Expand Down Expand Up @@ -448,3 +448,37 @@ function PinIcon({ filled }: { filled: boolean }) {
</svg>
);
}

/** Small palette icon for the color-picker trigger — an artist's palette
* silhouette with four paint blobs. Line-art to match PinIcon's stroke style;
* rendered at 13px so the blobs stay legible at sidebar scale. Replaces the
* former U+25A0 glyph, which read as a media "stop" button rather than a color
* control. Blobs are pure fills (stroke="none") so they read as dots, not
* stroked rings.
*
* strokeWidth is 2 (not the lucide-default 1.7) so the *effective* stroke
* weight matches PinIcon: 2 ÷ 24-viewBox × 13px ≈ 1.08px, vs the pin's
* 1.5 ÷ 16 × 12 ≈ 1.125px. A thinner stroke reads as a lighter color even
* though both inherit the same `currentColor` token, so weight parity is what
* makes the two icons look like the same color in the cluster. */
function PaletteIcon() {
return (
<svg
width={13}
height={13}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<circle cx="13.5" cy="6.5" r="1.4" fill="currentColor" stroke="none" />
<circle cx="17.5" cy="10.5" r="1.4" fill="currentColor" stroke="none" />
<circle cx="8.5" cy="7.5" r="1.4" fill="currentColor" stroke="none" />
<circle cx="6.5" cy="12.5" r="1.4" fill="currentColor" stroke="none" />
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.93 0 1.65-.75 1.65-1.69 0-.44-.18-.83-.44-1.12-.29-.29-.44-.65-.44-1.13a1.64 1.64 0 0 1 1.67-1.67h2c3.05 0 5.56-2.5 5.56-5.55C21.96 6.01 17.46 2 12 2z" />
</svg>
);
}
Loading