fix(webapp): restyle the leave and remove team member dialogs

The dialog was still built on the old Alert primitive, so the whole
question sat in the title, there was no header divider or Esc
affordance, and the footer used small right-aligned buttons. It now
uses the standard Dialog layout, and the copy names the person being
removed instead of only saying "them".

Author: samejr

.server-changes/remove-teammate-dialog.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Removing a teammate now shows a clearer confirmation dialog that names the person you're removing.

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx

@@ -20,16 +20,6 @@ import { UserAvatar } from "~/components/UserProfilePhoto";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { CopyableText } from "~/components/primitives/CopyableText";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import {
-  Alert,
-  AlertCancel,
-  AlertContent,
-  AlertDescription,
-  AlertFooter,
-  AlertHeader,
-  AlertTitle,
-  AlertTrigger,
-} from "~/components/primitives/Alert";
 import { Button, ButtonContent, LinkButton } from "~/components/primitives/Buttons";
 import { PermissionButton } from "~/components/primitives/PermissionButton";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -659,8 +649,14 @@ function LeaveRemoveButton({
       <LeaveTeamModal
         member={member}
         buttonText="Leave team"
-        title="Are you sure you want to leave the team?"
-        description={`You will no longer have access to ${organization.title}. To regain access, you will need to be invited again.`}
+        title="Leave team"
+        description={
+          <>
+            Are you sure you want to leave the team? You will no longer have access to{" "}
+            <span className="text-text-bright">{organization.title}</span>. To regain access, you
+            will need to be invited again.
+          </>
+        }
         actionText="Leave team"
       />
     );
@@ -684,8 +680,16 @@ function LeaveRemoveButton({
     <LeaveTeamModal
       member={member}
       buttonText="Remove from team"
-      title={`Are you sure you want to remove ${member.user.name ?? "them"} from the team?`}
-      description={`They will no longer have access to ${organization.title}. To regain access, you will need to invite them again.`}
+      title="Remove team member"
+      description={
+        <>
+          Are you sure you want to remove{" "}
+          <span className="text-text-bright">{member.user.name ?? member.user.email}</span> from the
+          team? They will no longer have access to{" "}
+          <span className="text-text-bright">{organization.title}</span>. To regain access, you will
+          need to invite them again.
+        </>
+      }
       actionText="Remove from team"
     />
   );
@@ -795,7 +799,7 @@ function LeaveTeamModal({
   member: Member;
   buttonText: string;
   title: string;
-  description: string;
+  description: React.ReactNode;
   actionText: string;
 }) {
   const [open, setOpen] = useState(false);
@@ -811,28 +815,32 @@ function LeaveTeamModal({
   });
 
   return (
-    <Alert open={open} onOpenChange={(o) => setOpen(o)}>
-      <AlertTrigger asChild>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
         <Button variant="secondary/small">{buttonText}</Button>
-      </AlertTrigger>
-      <AlertContent>
-        <AlertHeader>
-          <AlertTitle>{title}</AlertTitle>
-          <AlertDescription>{description}</AlertDescription>
-        </AlertHeader>
-        <AlertFooter>
-          <AlertCancel asChild>
-            <Button variant="secondary/small">Cancel</Button>
-          </AlertCancel>
-          <Form method="post" {...getFormProps(form)} onSubmit={() => setOpen(false)}>
-            <input type="hidden" value={member.id} name="memberId" />
-            <Button type="submit" variant="danger/small" form={form.id}>
-              {actionText}
-            </Button>
-          </Form>
-        </AlertFooter>
-      </AlertContent>
-    </Alert>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>{title}</DialogHeader>
+        <Form method="post" {...getFormProps(form)} onSubmit={() => setOpen(false)}>
+          <input type="hidden" value={member.id} name="memberId" />
+          <Paragraph variant="small" className="pb-4 pt-2">
+            {description}
+          </Paragraph>
+          <FormButtons
+            confirmButton={
+              <Button type="submit" variant="danger/medium">
+                {actionText}
+              </Button>
+            }
+            cancelButton={
+              <DialogClose asChild>
+                <Button variant="secondary/medium">Cancel</Button>
+              </DialogClose>
+            }
+          />
+        </Form>
+      </DialogContent>
+    </Dialog>
   );
 }