github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-22 00:13:45 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

fix: align action buttons in modal for confirming transaction edit (#4604)

Browse Source 
align the "Cancel" and "Confirm" buttons in the modal for confirming a transaction edit to the right-hand side for consistency
This commit is contained in:
Margarida Reis
2025-03-11 21:15:49 +00:00
committed by GitHub
parent 4b48f09112
commit bf154db3d6
2 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/desktop-client/src/components/modals/ConfirmTransactionEditModal.tsx
View File

@@ -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>
</>