ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
iamkiddy 2025-12-04 19:01:16 +00:00
parent 9d401ae4b1
commit 386e2e03bf
1 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/(user)/user/appointments/[id]/page.tsx
View File

@ -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>