feat: swap button and decompose dialog components

app/routes/users/dialogs/delete-user.tsx

@@ -1,4 +1,6 @@
-import Dialog from "~/components/Dialog";
+import Dialog, { DialogPanel } from "~/components/Dialog";
+import Text from "~/components/Text";
+import Title from "~/components/Title";
 import type { Machine, User } from "~/types";
 
 interface DeleteProps {
@@ -13,15 +15,15 @@ export default function DeleteUser({ user, machines, isOpen, setIsOpen }: Delete
 
   return (
     <Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
-      <Dialog.Panel variant={machines.length > 0 ? "unactionable" : "normal"}>
-        <Dialog.Title>Delete {name}?</Dialog.Title>
+      <DialogPanel variant={machines.length > 0 ? "unactionable" : "normal"}>
+        <Title>Delete {name}?</Title>
         {machines.length > 0 ? (
-          <Dialog.Text className="mb-6">
+          <Text className="mb-6">
             Users cannot be deleted if they have machines. Please delete or re-assign their machines
             to other users before proceeding.
-          </Dialog.Text>
+          </Text>
         ) : (
-          <Dialog.Text className="mb-6">
+          <Text className="mb-6">
             Deleted users cannot be recovered.
             {user.provider === "oidc" && (
               <p className="mt-4 text-sm text-mist-600 dark:text-mist-300">
@@ -29,11 +31,11 @@ export default function DeleteUser({ user, machines, isOpen, setIsOpen }: Delete
                 they sign in again.
               </p>
             )}
-          </Dialog.Text>
+          </Text>
         )}
         <input name="action_id" type="hidden" value="delete_user" />
         <input name="user_id" type="hidden" value={user.id} />
-      </Dialog.Panel>
+      </DialogPanel>
     </Dialog>
   );
 }