From 1474202a25164df517cfb7170f3c75eae14eca6b Mon Sep 17 00:00:00 2001
From: dzinesco <tmartinez@gmail.com>
Date: Tue, 15 Jul 2025 08:48:10 -0600
Subject: [PATCH] feat: enhance admin dashboard with glassmorphism design
 system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Updated central container with semi-transparent glass effects
- Added subtle inner glow with gradient overlay
- Enhanced quick action buttons with hover animations and blue-purple highlights
- Improved recent activity cards with glassmorphism styling
- Updated modal styling with deeper shadows and glass effects
- Added smooth transitions and scaling animations throughout
- Maintained excellent text legibility with white text on dark backgrounds
- Harmonized visual design with deep purple gradient theme

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/pages/admin/dashboard.astro | 46 ++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/pages/admin/dashboard.astro b/src/pages/admin/dashboard.astro
index 13480ac..fef48b2 100644
--- a/src/pages/admin/dashboard.astro
+++ b/src/pages/admin/dashboard.astro
@@ -158,7 +158,10 @@ const auth = {
         </div>
 
         <!-- Tab Content -->
-        <div class="bg-white/10 backdrop-blur-xl border border-white/20 shadow-lg rounded-2xl">
+        <div class="bg-white/5 backdrop-blur-xl border border-white/10 shadow-2xl rounded-2xl backdrop-saturate-150 hover:bg-white/10 transition-all duration-300 relative overflow-hidden" style="box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1), 0 25px 50px -12px rgba(0,0,0,0.5);">
+          <!-- Inner glow effect -->
+          <div class="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/5 to-purple-500/5 pointer-events-none"></div>
+          <div class="relative z-10">
           <!-- Overview Tab -->
           <div id="content-overview" class="tab-content p-6">
             <h3 class="text-lg font-medium text-white mb-6">Platform Overview</h3>
@@ -179,34 +182,34 @@ const auth = {
                   <button 
                     id="create-test-event-btn"
                     onclick="createTestEvent()"
-                    class="w-full text-left px-4 py-3 bg-white/10 backdrop-blur-xl rounded-lg hover:bg-gray-100 transition-colors duration-200"
+                    class="w-full text-left px-4 py-3 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg hover:bg-white/10 hover:border-white/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-300 group"
                   >
-                    <div class="text-sm font-medium text-white">Create Test Event</div>
-                    <div class="text-xs text-white/80">Setup demo event with sample data</div>
+                    <div class="text-sm font-medium text-white group-hover:text-blue-200">Create Test Event</div>
+                    <div class="text-xs text-white/70 group-hover:text-purple-200">Setup demo event with sample data</div>
                   </button>
                   <button 
                     id="create-admin-user-btn"
                     onclick="createAdminUser()"
-                    class="w-full text-left px-4 py-3 bg-white/10 backdrop-blur-xl rounded-lg hover:bg-gray-100 transition-colors duration-200"
+                    class="w-full text-left px-4 py-3 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg hover:bg-white/10 hover:border-white/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-300 group"
                   >
-                    <div class="text-sm font-medium text-white">Create Admin User</div>
-                    <div class="text-xs text-white/80">Add new administrator account</div>
+                    <div class="text-sm font-medium text-white group-hover:text-blue-200">Create Admin User</div>
+                    <div class="text-xs text-white/70 group-hover:text-purple-200">Add new administrator account</div>
                   </button>
                   <button 
                     id="quick-settings-btn"
                     onclick="goToSettings()"
-                    class="w-full text-left px-4 py-3 bg-white/10 backdrop-blur-xl rounded-lg hover:bg-gray-100 transition-colors duration-200"
+                    class="w-full text-left px-4 py-3 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg hover:bg-white/10 hover:border-white/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-300 group"
                   >
-                    <div class="text-sm font-medium text-white">Platform Settings</div>
-                    <div class="text-xs text-white/80">Configure platform-wide settings</div>
+                    <div class="text-sm font-medium text-white group-hover:text-blue-200">Platform Settings</div>
+                    <div class="text-xs text-white/70 group-hover:text-purple-200">Configure platform-wide settings</div>
                   </button>
                   <button 
                     id="export-data-btn"
                     onclick="exportPlatformData()"
-                    class="w-full text-left px-4 py-3 bg-white/10 backdrop-blur-xl rounded-lg hover:bg-gray-100 transition-colors duration-200"
+                    class="w-full text-left px-4 py-3 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg hover:bg-white/10 hover:border-white/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-300 group"
                   >
-                    <div class="text-sm font-medium text-white">Export Data</div>
-                    <div class="text-xs text-white/80">Download platform reports</div>
+                    <div class="text-sm font-medium text-white group-hover:text-blue-200">Export Data</div>
+                    <div class="text-xs text-white/70 group-hover:text-purple-200">Download platform reports</div>
                   </button>
                 </div>
               </div>
@@ -268,6 +271,7 @@ const auth = {
               <!-- Settings form will be loaded here -->
             </div>
           </div>
+          </div>
         </div>
       </div>
     </main>
@@ -471,16 +475,16 @@ const auth = {
       const activities = await adminApi.getRecentActivity();
 
       const activityHtml = activities.length > 0 ? activities.map(activity => `
-        <div class="flex items-start space-x-3 p-3 bg-white/10 backdrop-blur-xl rounded-lg">
+        <div class="flex items-start space-x-3 p-3 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg hover:bg-white/10 hover:border-white/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-300">
           <div class="text-lg">${activity.icon}</div>
           <div class="flex-1 min-w-0">
             <p class="text-sm font-medium text-white">${activity.title}</p>
-            <p class="text-xs text-white/80">${activity.subtitle}</p>
-            <p class="text-xs text-white/60 mt-1">${activity.time.toLocaleString()}</p>
+            <p class="text-xs text-white/70">${activity.subtitle}</p>
+            <p class="text-xs text-blue-200/60 mt-1">${activity.time.toLocaleString()}</p>
           </div>
         </div>
       `).join('') : `
-        <div class="text-center py-8">
+        <div class="text-center py-8 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg">
           <div class="text-4xl mb-2">📊</div>
           <p class="text-white/80">No recent activity</p>
           <p class="text-white/60 text-sm">Activity will appear here as users interact with the platform</p>
@@ -556,9 +560,9 @@ const auth = {
         </div>
         
         <!-- Fee Edit Modal -->
-        <div id="fee-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
+        <div id="fee-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-50">
           <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div class="inline-block align-bottom bg-white/10 backdrop-blur-xl border border-white/20 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+            <div class="inline-block align-bottom bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full backdrop-saturate-150">
               <form id="fee-form" class="bg-white/5 backdrop-blur-xl px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div class="sm:flex sm:items-start">
                   <div class="w-full">
@@ -636,14 +640,14 @@ const auth = {
                 <div class="mt-5 sm:mt-6 sm:flex sm:flex-row-reverse">
                   <button 
                     type="submit" 
-                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
+                    class="w-full inline-flex justify-center rounded-xl border border-transparent shadow-lg px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-base font-medium text-white hover:from-indigo-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm transition-all duration-200"
                   >
                     Save Changes
                   </button>
                   <button 
                     type="button" 
                     onclick="closeFeeModal()" 
-                    class="mt-3 w-full inline-flex justify-center rounded-md border border-white/20 shadow-sm px-4 py-2 bg-white text-base font-medium text-white/80 hover:bg-white/10 backdrop-blur-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
+                    class="mt-3 w-full inline-flex justify-center rounded-xl border border-white/20 shadow-lg px-4 py-2 bg-white/5 text-base font-medium text-white hover:bg-white/10 hover:border-white/30 backdrop-blur-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm transition-all duration-200"
                   >
                     Cancel
                   </button>