style: align modal close button across apps

src/app/users/components/EditRoleModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertCircle, Edit3, Loader2 } from "lucide-react";
+import { AlertCircle, Edit3, Loader2, X } from "lucide-react";
 import { useState } from "react";
 import type { UserRecord, UserRole } from "@/lib/api";
 import { manageableRoles } from "@/app/users/components/user-role-config";
@@ -27,16 +27,28 @@ export default function EditRoleModal({
   return (
     <div className="modal-overlay" onClick={onClose}>
       <div
-        className="modal"
+        className="modal-shell"
         style={{ maxWidth: 420 }}
         onClick={(event) => event.stopPropagation()}
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          className="modal-close"
+          aria-label="Close edit role modal"
+        >
+          <X size={22} />
+        </button>
+      <div
+        className="modal"
+        style={{ maxWidth: 420 }}
       >
         <div
           style={{
             display: "flex",
-            justifyContent: "space-between",
             alignItems: "center",
             marginBottom: 20,
+            paddingRight: 36,
           }}
         >
           <div>
@@ -53,19 +65,6 @@ export default function EditRoleModal({
               {user.email}
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            style={{
-              background: "none",
-              border: "none",
-              color: "var(--text-muted)",
-              cursor: "pointer",
-              fontSize: 18,
-            }}
-          >
-            x
-          </button>
         </div>
 
         {error ? (
@@ -152,7 +151,8 @@ export default function EditRoleModal({
             Save Role
           </button>
         </div>
+        </div>
       </div>
     </div>
   );
-}
+}

src/app/users/components/InviteUserModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertCircle, CheckCircle, Copy, Key, Loader2 } from "lucide-react";
+import { AlertCircle, CheckCircle, Copy, Key, Loader2, X } from "lucide-react";
 import { useState } from "react";
 import type {
   CreateUserInvitationBody,
@@ -58,16 +58,28 @@ export default function InviteUserModal({
   return (
     <div className="modal-overlay" onClick={onClose}>
       <div
-        className="modal"
+        className="modal-shell"
         style={{ maxWidth: 560 }}
         onClick={(event) => event.stopPropagation()}
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          className="modal-close"
+          aria-label="Close invite user modal"
+        >
+          <X size={22} />
+        </button>
+      <div
+        className="modal"
+        style={{ maxWidth: 560 }}
       >
         <div
           style={{
             display: "flex",
-            justifyContent: "space-between",
             alignItems: "center",
             marginBottom: 20,
+            paddingRight: 36,
           }}
         >
           <div>
@@ -86,19 +98,6 @@ export default function InviteUserModal({
               Generate an onboarding link so the user sets their own password.
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            style={{
-              background: "none",
-              border: "none",
-              color: "var(--text-muted)",
-              cursor: "pointer",
-              fontSize: 18,
-            }}
-          >
-            x
-          </button>
         </div>
 
         {result ? (
@@ -379,6 +378,7 @@ export default function InviteUserModal({
             </div>
           </form>
         )}
+        </div>
       </div>
     </div>
   );

src/app/users/components/ServerAccessModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertCircle, Loader2, Shield } from "lucide-react";
+import { AlertCircle, Loader2, Shield, X } from "lucide-react";
 import { useState } from "react";
 import type { Server as ServerRecord, UserRecord } from "@/lib/api";
 import ServerAccessSelector from "@/app/users/components/ServerAccessSelector";
@@ -35,16 +35,28 @@ export default function ServerAccessModal({
   return (
     <div className="modal-overlay" onClick={onClose}>
       <div
-        className="modal"
+        className="modal-shell"
         style={{ maxWidth: 600 }}
         onClick={(event) => event.stopPropagation()}
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          className="modal-close"
+          aria-label="Close server access modal"
+        >
+          <X size={22} />
+        </button>
+      <div
+        className="modal"
+        style={{ maxWidth: 600 }}
       >
         <div
           style={{
             display: "flex",
-            justifyContent: "space-between",
             alignItems: "center",
             marginBottom: 20,
+            paddingRight: 36,
           }}
         >
           <div>
@@ -61,19 +73,6 @@ export default function ServerAccessModal({
               {user.email}
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            style={{
-              background: "none",
-              border: "none",
-              color: "var(--text-muted)",
-              cursor: "pointer",
-              fontSize: 18,
-            }}
-          >
-            x
-          </button>
         </div>
 
         {error ? (
@@ -140,7 +139,8 @@ export default function ServerAccessModal({
             Save Access
           </button>
         </div>
+        </div>
       </div>
     </div>
   );
-}
+}