From cb362d675429900144a63e6c53a88f0d1806898e Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Sat, 27 Dec 2025 10:35:40 -0500
Subject: [PATCH] Add micro-interactions and transitions for page and table
 elements

Wrap page content in a new div for animation effects and implement fade-in transitions for table rows.
---
 .../Components/Shared/Layout/MainLayout.razor |  4 +++-
 WebApp/wwwroot/app.css                        | 19 +++++++++++++++++++
 docs/plans/style-improvements.md              |  4 ++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/WebApp/Components/Shared/Layout/MainLayout.razor b/WebApp/Components/Shared/Layout/MainLayout.razor
index 95f2cbb..690d22f 100644
--- a/WebApp/Components/Shared/Layout/MainLayout.razor
+++ b/WebApp/Components/Shared/Layout/MainLayout.razor
@@ -26,7 +26,9 @@
     </MudDrawer>
     <MudMainContent>
         <MudContainer MaxWidth="MaxWidth.ExtraLarge">
-        @Body
+            <div class="page-enter">
+                @Body
+            </div>
         </MudContainer>
     </MudMainContent>
 </MudLayout>
diff --git a/WebApp/wwwroot/app.css b/WebApp/wwwroot/app.css
index 13f61d3..5349abd 100644
--- a/WebApp/wwwroot/app.css
+++ b/WebApp/wwwroot/app.css
@@ -68,4 +68,23 @@
 
 .icon-button-hover-error:hover {
     color: var(--mud-palette-error) !important;
+}
+
+/* Micro-interactions: Table row transitions */
+.mud-table-row {
+    transition: background-color 0.2s ease;
+}
+
+/* Micro-interactions: Page transitions */
+.page-enter {
+    animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
\ No newline at end of file
diff --git a/docs/plans/style-improvements.md b/docs/plans/style-improvements.md
index 813cef9..4610fcf 100644
--- a/docs/plans/style-improvements.md
+++ b/docs/plans/style-improvements.md
@@ -289,7 +289,7 @@ Consider using MudChip components with rank colors for better visual distinction
 
 ---
 
-### 10. Add Micro-interactions
+### 10. Add Micro-interactions ✅ COMPLETED
 **Current State**: Hover effect for delete buttons implemented ✓
 
 **Additional Opportunities**:
@@ -338,7 +338,7 @@ Consider using MudChip components with rank colors for better visual distinction
 7. Audit and ensure button hierarchy consistency
 8. ✅ Enhance event rank visualization
 9. ✅ Improve form layout grouping
-10. Add micro-interactions and transitions
+10. ✅ Add micro-interactions and transitions
 
 ---