From f37e5bfad4e2611be037ab36cb381c98e0d0782c Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 24 May 2026 13:19:50 +0530
Subject: [PATCH] feat(activity): hover effect on 4-day strip individual rows

- Non-today rows: hover:bg-rose-50 / dark:hover:bg-gray-700
- Today (rose) rows: hover:bg-white/20 overlay so highlight still reads on rose bg
- transition-all for smooth fade

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/activity/page.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/app/activity/page.tsx b/src/app/activity/page.tsx
index 5feb1a5..2a07bcc 100644
--- a/src/app/activity/page.tsx
+++ b/src/app/activity/page.tsx
@@ -286,16 +286,14 @@ export default function ActivityPage() {
                     <button
                       key={row.type}
                       onClick={() => setDaySheetDate({ date: d.date, type: row.type })}
-                      className={`w-full flex items-center justify-center py-1.5 text-xs active:opacity-60 transition-opacity ${
-                        idx === 0
-                          ? isToday ? "border-t border-rose-300" : "border-t border-gray-100 dark:border-gray-700"
-                          : isToday ? "border-t border-rose-300" : "border-t border-gray-100 dark:border-gray-700"
+                      className={`w-full flex items-center justify-center py-1.5 text-xs transition-all active:opacity-60 ${
+                        isToday ? "border-t border-rose-300" : "border-t border-gray-100 dark:border-gray-700"
                       } ${
                         isToday
-                          ? "text-white"
+                          ? "text-white hover:bg-white/20"
                           : row.count === 0
-                            ? "text-gray-300 dark:text-gray-600"
-                            : "text-gray-700 dark:text-gray-200"
+                            ? "text-gray-300 dark:text-gray-600 hover:bg-rose-50 dark:hover:bg-gray-700"
+                            : "text-gray-700 dark:text-gray-200 hover:bg-rose-50 dark:hover:bg-gray-700"
                       }`}
                     >
                       {row.icon}×{row.count}