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

## Summary

The confirmation dialog for leaving a team or removing a teammate was
still built on the old `Alert` primitive: the entire question sat in the
title, there was no header divider or `Esc` affordance, and the footer
used small buttons pinned to the right.

It now uses the standard `Dialog` layout the rest of the dashboard uses.
The title is static ("Remove team member" / "Leave team"), the question
moves into the body with the person's name and the organization
highlighted, and the footer is a bordered row with medium Cancel and
confirm buttons. A member who has not set a name is now identified by
their email instead of "them".

Verified against a local dashboard on both dialogs. Confirming a removal
posts the member id, deletes the membership and shows the success toast.
Cancel, `Esc`, and Enter while Cancel is focused all close the dialog
without issuing a request, leaving the member in place.

No release note needed: this is a visual restyle of an existing dialog
with no behaviour change.

Author: samejr

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>
   );
 }