Fix inbox selection highlight to show on individual items
Replace outline approach (blended with card border, invisible) with: - 3px blue left-border bar (absolute positioned, like Gmail) - Subtle tinted background with forced transparent children so the highlight shows through opaque child backgrounds Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
parent
c33dcbd202
commit
44f052f4c5
1 changed files with 7 additions and 1 deletions
|
|
@ -1233,9 +1233,15 @@ export function Inbox() {
|
||||||
<div
|
<div
|
||||||
key={`sel-${key}`}
|
key={`sel-${key}`}
|
||||||
data-inbox-item
|
data-inbox-item
|
||||||
className={isSelected ? "bg-primary/10 outline outline-2 -outline-offset-2 outline-primary/30" : ""}
|
className={cn(
|
||||||
|
"relative",
|
||||||
|
isSelected && "bg-primary/[0.06] [&>*]:bg-transparent",
|
||||||
|
)}
|
||||||
onClick={() => setSelectedIndex(index)}
|
onClick={() => setSelectedIndex(index)}
|
||||||
>
|
>
|
||||||
|
{isSelected && (
|
||||||
|
<div className="absolute inset-y-0 left-0 w-[3px] bg-primary rounded-r-sm" />
|
||||||
|
)}
|
||||||
{child}
|
{child}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue