bugfix: some minor ui updates for invitation history dialog.

frontend/src/components/ui/appointments/AppointmentBookingModal.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { X } from 'lucide-react';
 import { Button } from '@/components/ui/common/Button';
+import { DialogCloseButton } from '@/components/ui/common/DialogCloseButton';
 import { Dropdown } from '@/components/ui/common/Dropdown';
 import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
 import { APPOINTMENT_PURPOSE_LABEL } from '@/components/ui/appointments/appointmentPurposeStyles';
@@ -161,14 +161,7 @@ export function AppointmentBookingModal({
           <h2 id="appointment-modal-title" className="text-lg font-semibold text-text-primary pr-2">
             {editingAppointment ? 'Edit appointment' : 'New appointment'}
           </h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-[var(--radius-sm)] p-1.5 text-text-muted hover:text-text-primary hover:bg-background-secondary/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
-            aria-label="Close"
-          >
-            <X className="h-5 w-5 icon-flat" />
-          </button>
+          <DialogCloseButton onClick={onClose} />
         </div>
 
         <p className="text-sm text-text-secondary">