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:
@@ -196,25 +196,27 @@ export function PhotoThumbnail({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rating Stars — sit in a translucent dark pill so yellow stars
|
||||
* don't disappear against a yellow / sandy photo. */}
|
||||
{/* Rating Stars — same primary blue as every other indicator,
|
||||
* in a matching pill so the rating reads as part of the same
|
||||
* badge family instead of a yellow accent from a different
|
||||
* palette. */}
|
||||
{photo.rating > 0 && (
|
||||
<div className="absolute bottom-1 left-1 flex items-center gap-0.5 rounded bg-black/55 px-1 py-0.5 shadow-sm backdrop-blur-[2px]">
|
||||
<div className="absolute bottom-1 left-1 flex h-5 items-center gap-0.5 rounded-full bg-primary px-1.5 text-white shadow-md ring-2 ring-white/90">
|
||||
{Array.from({ length: photo.rating }).map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className="h-3 w-3 fill-star text-star drop-shadow"
|
||||
/>
|
||||
<Star key={i} className="h-3 w-3 fill-white text-white" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Flag Indicators — every badge gets a white ring so it survives
|
||||
* any photo content. */}
|
||||
{/* Flag Indicators — all share the same blue-primary chip style
|
||||
* + white ring so the family reads as one thing. The discard
|
||||
* indicator is the only exception: it stays neutral-dark
|
||||
* because mixing it with the positive blue chips would conflate
|
||||
* "in this collection" with "trashed". */}
|
||||
<div className="absolute bottom-1 right-1 flex items-center gap-1">
|
||||
{isInActiveHeap && (
|
||||
<div
|
||||
className="flex h-5 max-w-[120px] items-center gap-1 rounded-full bg-pick px-1.5 text-white shadow-md ring-2 ring-white/90"
|
||||
className="flex h-5 max-w-[120px] items-center gap-1 rounded-full bg-primary px-1.5 text-white shadow-md ring-2 ring-white/90"
|
||||
title={activeHeapName ? `In heap: ${activeHeapName}` : 'In active heap'}
|
||||
>
|
||||
<ShoppingBasket className="h-3 w-3 flex-shrink-0" strokeWidth={2.5} />
|
||||
@@ -227,7 +229,7 @@ export function PhotoThumbnail({
|
||||
)}
|
||||
{photo.is_duplicate && (
|
||||
<div
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full bg-black/70 text-white shadow-md ring-2 ring-white/90"
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white shadow-md ring-2 ring-white/90"
|
||||
title="Duplicate (matches another photo's hash)"
|
||||
>
|
||||
<Copy className="h-3 w-3" strokeWidth={2.5} />
|
||||
@@ -235,7 +237,7 @@ export function PhotoThumbnail({
|
||||
)}
|
||||
{photo.is_discarded && (
|
||||
<div
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full bg-reject text-white shadow-md ring-2 ring-white/90"
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full bg-black/75 text-white shadow-md ring-2 ring-white/90"
|
||||
title="Discarded"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" strokeWidth={2.5} />
|
||||
|
||||
Reference in New Issue
Block a user