From 386e2e03bf0f0ccca79ba769de700211872ed4ec Mon Sep 17 00:00:00 2001
From: iamkiddy <francisyoungson@gmail.com>
Date: Thu, 4 Dec 2025 19:01:16 +0000
Subject: [PATCH] Refactor meeting information display in user appointment
 detail page. Update styling and structure for clarity, enhancing user
 experience while maintaining essential details for scheduled meetings.

---
 app/(user)/user/appointments/[id]/page.tsx | 50 +++++++++++-----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/app/(user)/user/appointments/[id]/page.tsx b/app/(user)/user/appointments/[id]/page.tsx
index 8aef9ac..cb04f7a 100644
--- a/app/(user)/user/appointments/[id]/page.tsx
+++ b/app/(user)/user/appointments/[id]/page.tsx
@@ -472,31 +472,6 @@ export default function UserAppointmentDetailPage() {
                       </p>
                     </div>
                   )}
-                  {appointment.scheduled_datetime && (
-                    <div className={`px-4 py-3 rounded-lg border ${isDark ? "bg-blue-500/10 border-blue-500/30" : "bg-blue-50 border-blue-200"}`}>
-                      <p className={`text-sm font-semibold mb-2 ${isDark ? "text-blue-300" : "text-blue-700"}`}>
-                        Meeting Information
-                      </p>
-                      <div className="space-y-2">
-                        <div>
-                          <p className={`text-xs font-medium mb-1 ${isDark ? "text-blue-200" : "text-blue-600"}`}>
-                            Meeting Start Time:
-                          </p>
-                          <p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
-                            {formatDate(appointment.scheduled_datetime)} at {formatTime(appointment.scheduled_datetime)}
-                          </p>
-                        </div>
-                        <div>
-                          <p className={`text-xs font-medium mb-1 ${isDark ? "text-blue-200" : "text-blue-600"}`}>
-                            How to Access:
-                          </p>
-                          <p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
-                            Click the "Join Now" button below when the meeting becomes available. The meeting will be accessible shortly before the scheduled start time.
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  )}
                 </div>
               </div>
             )}
@@ -536,6 +511,31 @@ export default function UserAppointmentDetailPage() {
                     {formatStatus(appointment.status)}
                   </span>
                 </div>
+                {appointment.scheduled_datetime && (
+                  <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <p className={`text-xs font-medium mb-2 uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                      Meeting Information
+                    </p>
+                    <div className="space-y-3">
+                      <div>
+                        <p className={`text-xs font-medium mb-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                          Meeting Start Time:
+                        </p>
+                        <p className={`text-sm font-medium ${isDark ? "text-white" : "text-gray-900"}`}>
+                          {formatDate(appointment.scheduled_datetime)} at {formatTime(appointment.scheduled_datetime)}
+                        </p>
+                      </div>
+                      <div>
+                        <p className={`text-xs font-medium mb-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                          How to Access:
+                        </p>
+                        <p className={`text-sm ${isDark ? "text-gray-300" : "text-gray-700"}`}>
+                          Click the "Join Now" button below when the meeting becomes available. The meeting will be accessible shortly before the scheduled start time.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>