style: unify thumbnail indicators on the primary blue palette
The badges on a thumbnail were a rainbow — yellow stars, blue check, green heap pill, red discard, black duplicate — and read as five unrelated palettes. Collapse to a single family. PhotoThumbnail: - Rating stars: bg-primary pill with white star icons (was yellow on a translucent dark backing). - Heap basket / name chip: bg-primary (was bg-pick green). - Duplicate badge: bg-primary (was bg-black/70). - Discarded badge: bg-black/75 (kept neutral-dark, deliberately NOT blue, so "in this collection" and "trashed" never collapse into the same visual). - All badges share the white outer ring + thicker icon stroke from the previous contrast pass. HeapsPanel: - Active heap row uses bg-primary/8 instead of bg-pick/10. - Basket icon turns text-primary on the active row (was text-pick). - "Active" pill uses bg-primary/25 + text-primary (was bg-pick/25 + text-pick). The whole indicator family now reads as one consistent thing in the brand blue. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -266,10 +266,10 @@ export function HeapsPanel() {
|
||||
className={clsx(
|
||||
'group relative flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-[13px]',
|
||||
isFiltered ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2',
|
||||
// Active-heap row gets a left accent stripe so the
|
||||
// Active-heap row gets a soft primary wash so the
|
||||
// user always knows where Pick / T will land, even
|
||||
// when navigating to a different section.
|
||||
isActive && !isFiltered && 'bg-pick/10 text-text',
|
||||
// when viewing a different section.
|
||||
isActive && !isFiltered && 'bg-primary/8 text-text',
|
||||
isDropTarget && 'ring-2 ring-primary bg-primary/10'
|
||||
)}
|
||||
style={{ paddingLeft: '32px' }}
|
||||
@@ -312,11 +312,7 @@ export function HeapsPanel() {
|
||||
<ShoppingBasket
|
||||
className={clsx(
|
||||
'h-4 w-4 flex-shrink-0',
|
||||
isActive
|
||||
? 'text-pick'
|
||||
: isFiltered
|
||||
? 'text-primary'
|
||||
: 'text-text-muted'
|
||||
isActive || isFiltered ? 'text-primary' : 'text-text-muted'
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -347,7 +343,7 @@ export function HeapsPanel() {
|
||||
</span>
|
||||
{isActive && (
|
||||
<span
|
||||
className="ml-1 flex-shrink-0 rounded-full bg-pick/25 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-pick"
|
||||
className="ml-1 flex-shrink-0 rounded-full bg-primary/25 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-primary"
|
||||
title="Active heap — Pick (P) and the basket badge on photos point here"
|
||||
>
|
||||
Active
|
||||
|
||||
Reference in New Issue
Block a user