mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dark mode inbox selection color

Browse source 
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-03-30 06:40:08 -05:00
parent a3e125f796
commit 9684e7bf30
2 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/src/components/SwipeToArchive.test.tsx
View file

@ -136,7 +136,10 @@ describe("SwipeToArchive", () => {
const surface = container.querySelector("[data-inbox-row-surface]") as HTMLDivElement | null; const surface = container.querySelector("[data-inbox-row-surface]") as HTMLDivElement | null;
expect(surface).not.toBeNull(); expect(surface).not.toBeNull();
expect(surface?.style.backgroundColor).toBe("hsl(var(--muted))"); expect(surface?.className).toContain("bg-zinc-100");
expect(surface?.className).toContain("dark:bg-zinc-800");
expect(surface?.className).not.toContain("bg-card");
expect(surface?.style.backgroundColor).toBe("");
expect(surface?.style.boxShadow).toBe(""); expect(surface?.style.boxShadow).toBe("");
act(() => { act(() => {

7
ui/src/components/SwipeToArchive.tsx
View file

@ -13,7 +13,6 @@ interface SwipeToArchiveProps {
const COMMIT_THRESHOLD = 0.32; const COMMIT_THRESHOLD = 0.32;
const MAX_SWIPE = 0.88; const MAX_SWIPE = 0.88;
const COMMIT_DELAY_MS = 140; const COMMIT_DELAY_MS = 140;
const SELECTED_ROW_BACKGROUND = "hsl(var(--muted))";
export function SwipeToArchive({ export function SwipeToArchive({
children, children,
@ -152,11 +151,13 @@ export function SwipeToArchive({
</div> </div>
<div <div
data-inbox-row-surface data-inbox-row-surface
className="relative bg-card will-change-transform" className={cn(
"relative will-change-transform",
selected ? "bg-zinc-100 dark:bg-zinc-800" : "bg-card",
)}
style={{ style={{
transform: `translate3d(${offsetX}px, 0, 0)`, transform: `translate3d(${offsetX}px, 0, 0)`,
transition: isDragging ? "none" : "transform 180ms ease-out", transition: isDragging ? "none" : "transform 180ms ease-out",
backgroundColor: selected ? SELECTED_ROW_BACKGROUND : undefined,
}} }}
> >
{children} {children}