From 6615cb6b5b2470cdc0ae6d66392115c413e0adc8 Mon Sep 17 00:00:00 2001
From: David Crespo <david-crespo@users.noreply.github.com>
Date: Thu, 25 Jul 2024 18:28:19 -0500
Subject: [PATCH] Focus confirm button instead of cancel in modals (#2340)

focus confirm button instead of cancel in modals
---
 app/ui/lib/Modal.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/ui/lib/Modal.tsx b/app/ui/lib/Modal.tsx
index a5cd7a477..4632fcbcc 100644
--- a/app/ui/lib/Modal.tsx
+++ b/app/ui/lib/Modal.tsx
@@ -135,10 +135,9 @@ Modal.Footer = ({
 }) => (
   <footer className="flex items-center justify-between border-t px-3 py-3 border-secondary">
     <div className="mr-4">{children}</div>
-    <div className="space-x-2">
-      <Button variant="secondary" size="sm" onClick={onDismiss}>
-        {cancelText || 'Cancel'}
-      </Button>
+    <div className="flex flex-row-reverse gap-2">
+      {/* Note the confirm button is first so it autofocuses when the modal opens,
+          but it displays in the right order because of flex-row-reverse */}
       <Button
         size="sm"
         variant={actionType}
@@ -148,6 +147,9 @@ Modal.Footer = ({
       >
         {actionText}
       </Button>
+      <Button variant="secondary" size="sm" onClick={onDismiss}>
+        {cancelText || 'Cancel'}
+      </Button>
     </div>
   </footer>
 )