From bf154db3d6400864e8f7cbb32d298b1f869ce67b Mon Sep 17 00:00:00 2001
From: Margarida Reis <margarida.reis@tecnico.ulisboa.pt>
Date: Tue, 11 Mar 2025 21:15:49 +0000
Subject: [PATCH] fix: align action buttons in modal for confirming transaction
 edit (#4604)

align the "Cancel" and "Confirm" buttons in the modal for confirming a transaction edit to the right-hand side for consistency
---
 .../modals/ConfirmTransactionEditModal.tsx    | 53 +++++++++++--------
 upcoming-release-notes/4604.md                |  6 +++
 2 files changed, 36 insertions(+), 23 deletions(-)
 create mode 100644 upcoming-release-notes/4604.md

diff --git a/packages/desktop-client/src/components/modals/ConfirmTransactionEditModal.tsx b/packages/desktop-client/src/components/modals/ConfirmTransactionEditModal.tsx
index 3fbc8e8d4f..4daaed85be 100644
--- a/packages/desktop-client/src/components/modals/ConfirmTransactionEditModal.tsx
+++ b/packages/desktop-client/src/components/modals/ConfirmTransactionEditModal.tsx
@@ -4,7 +4,9 @@ import { useTranslation, Trans } from 'react-i18next';
 
 import { Block } from '@actual-app/components/block';
 import { Button } from '@actual-app/components/button';
+import { useResponsive } from '@actual-app/components/hooks/useResponsive';
 import { InitialFocus } from '@actual-app/components/initial-focus';
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 
 import { type Modal as ModalType } from 'loot-core/client/modals/modalsSlice';
@@ -23,6 +25,13 @@ export function ConfirmTransactionEditModal({
 }: ConfirmTransactionEditModalProps) {
   const { t } = useTranslation();
 
+  const { isNarrowWidth } = useResponsive();
+  const narrowButtonStyle = isNarrowWidth
+    ? {
+        height: styles.mobileMinHeight,
+      }
+    : {};
+
   return (
     <Modal
       name="confirm-transaction-edit"
@@ -83,44 +92,42 @@ export function ConfirmTransactionEditModal({
                 <Trans>Are you sure you want to edit this transaction?</Trans>
               </Block>
             )}
-
             <View
               style={{
                 marginTop: 20,
                 flexDirection: 'row',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
+                justifyContent: 'flex-end',
               }}
             >
-              <View
+              <Button
+                aria-label={t('Cancel')}
                 style={{
-                  flexDirection: 'row',
-                  justifyContent: 'flex-end',
+                  marginRight: 10,
+                  ...narrowButtonStyle,
+                }}
+                onPress={() => {
+                  close();
+                  onCancel();
                 }}
               >
+                <Trans>Cancel</Trans>
+              </Button>
+              <InitialFocus>
                 <Button
-                  aria-label={t('Cancel')}
-                  style={{ marginRight: 10 }}
+                  aria-label={t('Confirm')}
+                  variant="primary"
+                  style={{
+                    marginRight: 10,
+                    ...narrowButtonStyle,
+                  }}
                   onPress={() => {
                     close();
-                    onCancel();
+                    onConfirm();
                   }}
                 >
-                  <Trans>Cancel</Trans>
+                  <Trans>Confirm</Trans>
                 </Button>
-                <InitialFocus>
-                  <Button
-                    aria-label={t('Confirm')}
-                    variant="primary"
-                    onPress={() => {
-                      close();
-                      onConfirm();
-                    }}
-                  >
-                    <Trans>Confirm</Trans>
-                  </Button>
-                </InitialFocus>
-              </View>
+              </InitialFocus>
             </View>
           </View>
         </>
diff --git a/upcoming-release-notes/4604.md b/upcoming-release-notes/4604.md
new file mode 100644
index 0000000000..08eb773ec0
--- /dev/null
+++ b/upcoming-release-notes/4604.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [tostasmistas]
+---
+
+Align action buttons in modal for confirming transaction edit