fix: Confirmation dialog call to action should be on the right

app/components/ConfirmationDialog.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
@@ -29,6 +30,7 @@ const ConfirmationDialog: React.FC<Props> = ({
   disabled = false,
 }: Props) => {
   const [isSaving, setIsSaving] = React.useState(false);
+  const { t } = useTranslation();
   const { dialogs } = useStores();
 
   const handleSubmit = React.useCallback(
@@ -48,19 +50,20 @@ const ConfirmationDialog: React.FC<Props> = ({
   );
 
   return (
-    <Flex column>
-      <form onSubmit={handleSubmit}>
-        <Text type="secondary">{children}</Text>
+    <form onSubmit={handleSubmit}>
+      <Text type="secondary">{children}</Text>
+
+      <Flex justify="flex-end">
         <Button
           type="submit"
           disabled={isSaving || disabled}
           danger={danger}
           autoFocus
         >
-          {isSaving && savingText ? savingText : submitText}
+          {isSaving && savingText ? savingText : submitText ?? t("Confirm")}
         </Button>
-      </form>
-    </Flex>
+      </Flex>
+    </form>
   );
 };
 

app/components/UserDialogs.tsx

@@ -21,11 +21,7 @@ export function UserChangeToViewerDialog({ user, onSubmit }: Props) {
   };
 
   return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Confirm")}
-      savingText={`${t("Saving")}…`}
-    >
+    <ConfirmationDialog onSubmit={handleSubmit} savingText={`${t("Saving")}…`}>
       {t(
         "Are you sure you want to make {{ userName }} a read-only viewer? They will not be able to edit any content",
         {
@@ -47,11 +43,7 @@ export function UserChangeToMemberDialog({ user, onSubmit }: Props) {
   };
 
   return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Confirm")}
-      savingText={`${t("Saving")}…`}
-    >
+    <ConfirmationDialog onSubmit={handleSubmit} savingText={`${t("Saving")}…`}>
       {t("Are you sure you want to make {{ userName }} a member?", {
         userName: user.name,
       })}
@@ -94,11 +86,7 @@ export function UserChangeToAdminDialog({ user, onSubmit }: Props) {
   };
 
   return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Confirm")}
-      savingText={`${t("Saving")}…`}
-    >
+    <ConfirmationDialog onSubmit={handleSubmit} savingText={`${t("Saving")}…`}>
       {t(
         "Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
         {
@@ -119,11 +107,7 @@ export function UserSuspendDialog({ user, onSubmit }: Props) {
   };
 
   return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Confirm")}
-      savingText={`${t("Saving")}…`}
-    >
+    <ConfirmationDialog onSubmit={handleSubmit} savingText={`${t("Saving")}…`}>
       {t(
         "Are you sure you want to suspend {{ userName }}? Suspended users will be prevented from logging in.",
         {