A personal media tracker built on the AT Protocol
opnshelf.xyz
style: change selected week highlighting to bottom accent bar
- Remove background tint from selected week days
- Add small 2px accent bar at bottom of each selected week day
- Keeps normal appearance but provides clear visual indicator
+5
-1
+5
-1
apps/web/src/routes/calendar.tsx
+5
-1
apps/web/src/routes/calendar.tsx
···
330
330
}}
331
331
className={`relative h-24 flex flex-col items-start rounded-lg border p-1.5 text-left transition-all ${
332
332
inSelectedWeek
333
-
? "border-[var(--border)] bg-[var(--accent)]/5"
333
+
? "border-[var(--border)] bg-[var(--background-elevated)]"
334
334
: isToday
335
335
? "border-[var(--accent)] bg-[var(--accent-subtle)]"
336
336
: "border-[var(--border)] bg-[var(--background-elevated)] hover:border-[var(--border-strong)]"
···
371
371
</span>
372
372
)}
373
373
</div>
374
+
)}
375
+
{/* Selected week indicator */}
376
+
{inSelectedWeek && (
377
+
<div className="absolute bottom-1.5 left-1.5 right-1.5 h-0.5 rounded-full bg-[var(--accent)]" />
374
378
)}
375
379
</button>
376
380
);