From 201be53ddd7a16c923c152637db932bbb0ce7d04 Mon Sep 17 00:00:00 2001
From: Admin <admin@localhost>
Date: Sun, 17 May 2026 01:39:49 +0330
Subject: [PATCH] bugfix: some minor ui updates for invitation history dialog.

---
 frontend/src/app/(dashboard)/staff/page.tsx   | 15 ++++--
 .../appointments/AppointmentBookingModal.tsx  | 11 +---
 .../ui/common/DialogCloseButton.tsx           | 21 ++++++++
 .../organizations/InvitationHistoryDialog.tsx | 12 ++---
 frontend/src/styles/globals.css               | 53 ++++++++++---------
 5 files changed, 68 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/components/ui/common/DialogCloseButton.tsx

diff --git a/frontend/src/app/(dashboard)/staff/page.tsx b/frontend/src/app/(dashboard)/staff/page.tsx
index afd483d..23c60fe 100644
--- a/frontend/src/app/(dashboard)/staff/page.tsx
+++ b/frontend/src/app/(dashboard)/staff/page.tsx
@@ -17,6 +17,7 @@ import {
   type FeaturePermState,
 } from '../../../components/staff/staff-permission-form';
 import { Pencil, Trash2, Copy, Check, X } from 'lucide-react';
+import { DialogCloseButton } from '@/components/ui/common/DialogCloseButton';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { staffApi, type StaffMemberDto } from '@/lib/api/staff';
 import { Button } from '@/components/ui/common/Button';
@@ -603,9 +604,12 @@ export default function StaffPage() {
             aria-modal="true"
             aria-labelledby="invite-staff-title"
           >
-            <h2 id="invite-staff-title" className="text-lg font-semibold text-text-primary">
-              Invite team member
-            </h2>
+            <div className="flex items-start justify-between gap-3">
+              <h2 id="invite-staff-title" className="text-lg font-semibold text-text-primary pr-2">
+                Invite team member
+              </h2>
+              <DialogCloseButton onClick={() => setInviteOpen(false)} />
+            </div>
             <Input
               label="Email"
               type="email"
@@ -650,7 +654,10 @@ export default function StaffPage() {
             role="dialog"
             aria-modal="true"
           >
-            <h2 className="text-lg font-semibold text-text-primary">Edit member</h2>
+            <div className="flex items-start justify-between gap-3">
+              <h2 className="text-lg font-semibold text-text-primary pr-2">Edit member</h2>
+              <DialogCloseButton onClick={() => setEditing(null)} />
+            </div>
             <p className="text-xs text-text-muted">{editing.email}</p>
             <Input label="Display name" value={editName} onChange={(e) => setEditName(e.target.value)} />
             <div>
diff --git a/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx b/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
index 770f753..acfb047 100644
--- a/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
+++ b/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">
diff --git a/frontend/src/components/ui/common/DialogCloseButton.tsx b/frontend/src/components/ui/common/DialogCloseButton.tsx
new file mode 100644
index 0000000..07631d9
--- /dev/null
+++ b/frontend/src/components/ui/common/DialogCloseButton.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { X } from 'lucide-react';
+
+type DialogCloseButtonProps = {
+  onClick: () => void;
+  className?: string;
+};
+
+export function DialogCloseButton({ onClick, className = '' }: DialogCloseButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`shrink-0 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 ${className}`}
+      aria-label="Close"
+    >
+      <X className="h-5 w-5 icon-flat" />
+    </button>
+  );
+}
diff --git a/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx b/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
index f4569df..bec6cd7 100644
--- a/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
+++ b/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
@@ -1,10 +1,10 @@
 'use client';
 
 import { Check, Copy } from 'lucide-react';
+import { DialogCloseButton } from '@/components/ui/common/DialogCloseButton';
 import type { OrganizationInvitationHistoryItemDto } from '@/lib/api/organization';
 import { canShareOrganizationInviteLink } from '@/components/invitations/organizationInviteLinks';
 import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
-import { Button } from '@/components/ui/common/Button';
 import { Table } from '@/components/ui/common/Table';
 
 function formatInvitationStatusLabel(status: OrganizationInvitationHistoryItemDto['status']): string {
@@ -49,18 +49,16 @@ export function InvitationHistoryDialog({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
       <div
-        className="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
+        className="w-full max-w-[min(56rem,calc(100vw-17rem))] max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
         role="dialog"
         aria-modal="true"
         aria-labelledby="invitation-history-title"
       >
-        <div className="flex items-center justify-between gap-3">
-          <h2 id="invitation-history-title" className="text-lg font-semibold text-text-primary">
+        <div className="flex items-start justify-between gap-3">
+          <h2 id="invitation-history-title" className="text-lg font-semibold text-text-primary pr-2">
             Invitation History
           </h2>
-          <Button type="button" size="sm" onClick={onClose}>
-            Close
-          </Button>
+          <DialogCloseButton onClick={onClose} />
         </div>
 
         {copyError && (
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 6205780..ccb02d4 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -81,18 +81,18 @@
   --color-card-muted: #b6c6dd;
   --color-card-border: #29456a;
 
-  --color-badge-default-bg: #1b2f4e;
-  --color-badge-default-fg: #b6c6dd;
-  --color-badge-default-border: #3b5f8f;
-  --color-badge-success-bg: rgba(6, 78, 59, 0.45);
-  --color-badge-success-fg: #86efac;
-  --color-badge-success-border: rgba(21, 128, 61, 0.5);
-  --color-badge-warning-bg: rgba(120, 53, 15, 0.48);
-  --color-badge-warning-fg: #fcd34d;
-  --color-badge-warning-border: rgba(180, 83, 9, 0.55);
-  --color-badge-danger-bg: rgba(127, 29, 29, 0.42);
-  --color-badge-danger-fg: #fca5a5;
-  --color-badge-danger-border: rgba(185, 28, 28, 0.52);
+  --color-badge-default-bg: rgba(27, 47, 78, 0.32);
+  --color-badge-default-fg: #9eb1cb;
+  --color-badge-default-border: rgba(59, 95, 143, 0.32);
+  --color-badge-success-bg: rgba(6, 78, 59, 0.22);
+  --color-badge-success-fg: #7dd3a8;
+  --color-badge-success-border: rgba(34, 100, 68, 0.28);
+  --color-badge-warning-bg: rgba(120, 53, 15, 0.22);
+  --color-badge-warning-fg: #dfc06a;
+  --color-badge-warning-border: rgba(146, 88, 20, 0.28);
+  --color-badge-danger-bg: rgba(127, 29, 29, 0.22);
+  --color-badge-danger-fg: #e4a6a6;
+  --color-badge-danger-border: rgba(153, 50, 50, 0.28);
 
   --color-purpose-consultation-bg: rgba(139, 92, 246, 0.25);
   --color-purpose-consultation-fg: #ddd6fe;
@@ -139,18 +139,18 @@
   --color-card-muted: #b6c6dd;
   --color-card-border: #29456a;
 
-  --color-badge-default-bg: #1b2f4e;
-  --color-badge-default-fg: #b6c6dd;
-  --color-badge-default-border: #3b5f8f;
-  --color-badge-success-bg: rgba(6, 78, 59, 0.45);
-  --color-badge-success-fg: #86efac;
-  --color-badge-success-border: rgba(21, 128, 61, 0.5);
-  --color-badge-warning-bg: rgba(120, 53, 15, 0.48);
-  --color-badge-warning-fg: #fcd34d;
-  --color-badge-warning-border: rgba(180, 83, 9, 0.55);
-  --color-badge-danger-bg: rgba(127, 29, 29, 0.42);
-  --color-badge-danger-fg: #fca5a5;
-  --color-badge-danger-border: rgba(185, 28, 28, 0.52);
+  --color-badge-default-bg: rgba(27, 47, 78, 0.32);
+  --color-badge-default-fg: #9eb1cb;
+  --color-badge-default-border: rgba(59, 95, 143, 0.32);
+  --color-badge-success-bg: rgba(6, 78, 59, 0.22);
+  --color-badge-success-fg: #7dd3a8;
+  --color-badge-success-border: rgba(34, 100, 68, 0.28);
+  --color-badge-warning-bg: rgba(120, 53, 15, 0.22);
+  --color-badge-warning-fg: #dfc06a;
+  --color-badge-warning-border: rgba(146, 88, 20, 0.28);
+  --color-badge-danger-bg: rgba(127, 29, 29, 0.22);
+  --color-badge-danger-fg: #e4a6a6;
+  --color-badge-danger-border: rgba(153, 50, 50, 0.28);
 
   --color-purpose-consultation-bg: rgba(139, 92, 246, 0.25);
   --color-purpose-consultation-fg: #ddd6fe;
@@ -254,6 +254,11 @@ body {
   border-radius: var(--radius-lg);
 }
 
+:root[data-theme='dark'] .surface-card,
+:root:not([data-theme='light']) .surface-card {
+  background: color-mix(in srgb, var(--color-card-background) 82%, var(--color-background-primary));
+}
+
 .surface-panel {
   background: color-mix(in srgb, var(--color-background-secondary) 96%, transparent);
   border: 1px solid var(--color-border);