manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(activity): hover effect on log items to signal editability

Browse source 
- Add group + hover:bg-rose-50 + hover:shadow-sm to timeline log rows
- Add group + hover:bg-rose-50 to day-sheet log rows
- Chevron › turns rose-400 on hover (group-hover) in both places
- transition-all for smooth background + shadow animation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-24 13:14:10 +05:30
parent 2c016dbc8e
commit 1ae0986767
1 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/app/activity/page.tsx
View file

@ -346,7 +346,7 @@ export default function ActivityPage() {
<button <button
key={log.id} key={log.id}
onClick={() => { setSelectedLog(log); setDeleteConfirm(false); }} onClick={() => { setSelectedLog(log); setDeleteConfirm(false); }}
className="w-full flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-xl text-left active:scale-[0.98] transition-transform" className="group w-full flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-xl text-left transition-all active:scale-[0.98] hover:bg-rose-50/70 dark:hover:bg-gray-700/80 hover:shadow-sm"
> >
<span className="text-2xl">{getIcon(log.type)}</span> <span className="text-2xl">{getIcon(log.type)}</span>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
@ -359,8 +359,11 @@ export default function ActivityPage() {
].filter(Boolean).join(" · ")} ].filter(Boolean).join(" · ")}
</div> </div>
</div> </div>
<div className="text-sm text-gray-400 flex-shrink-0"> <div className="flex items-center gap-1.5 flex-shrink-0">
<span className="text-sm text-gray-400">
{new Date(log.loggedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} {new Date(log.loggedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
</span>
<span className="text-gray-300 dark:text-gray-600 group-hover:text-rose-400 transition-colors text-base leading-none">›</span>
</div> </div>
</button> </button>
))} ))}
@ -522,7 +525,7 @@ export default function ActivityPage() {
<button <button
key={log.id} key={log.id}
onClick={() => { setSelectedLog(log); setDeleteConfirm(false); setDaySheetDate(null); }} onClick={() => { setSelectedLog(log); setDeleteConfirm(false); setDaySheetDate(null); }}
className="w-full flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-xl text-left active:scale-[0.98] transition-transform" className="group w-full flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-xl text-left transition-all active:scale-[0.98] hover:bg-rose-50 dark:hover:bg-gray-700 hover:shadow-sm"
> >
<span className="text-2xl">{sheetTypeIcon}</span> <span className="text-2xl">{sheetTypeIcon}</span>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
@ -539,7 +542,7 @@ export default function ActivityPage() {
<span className="text-sm text-gray-400"> <span className="text-sm text-gray-400">
{new Date(log.loggedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} {new Date(log.loggedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
</span> </span>
<span className="text-gray-300 text-lg">›</span> <span className="text-gray-300 dark:text-gray-600 group-hover:text-rose-400 transition-colors text-lg">›</span>
</div> </div>
</button> </button>
)) ))