diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png
index a2e2fc3f1b967b26480683520384b0c83aa98999..a3662f61ca99935e1dfe92da8fca51080b3a8422 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png
index 6240ae33bc16d6a11b29a30885b9f498615b3459..13c57c3eb498edd81e6bd0852930b847331b4c70 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png
index 7290097d372f18c08304a03ca5acc30965445f08..a548f7784ff60b668cfd17c659d2a555e1cb668c 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..78b0b3392250f15be01d55104630551d70a76e1b
Binary files /dev/null and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png
index d4ff966a8dbc827faa8c7eaa8d95726d90c55b69..e2dd224a8f5ae2101f31fd3432e424995010c3c0 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
index 999849eb923234258817e3e9432c233d03e0776c..1a4cf70a851732debb0be10f473e875b7b65f2f9 100644
--- a/packages/desktop-client/src/components/Modals.tsx
+++ b/packages/desktop-client/src/components/Modals.tsx
@@ -23,9 +23,9 @@ import { ConfirmCategoryDelete } from './modals/ConfirmCategoryDelete';
import { ConfirmTransactionEdit } from './modals/ConfirmTransactionEdit';
import { ConfirmUnlinkAccount } from './modals/ConfirmUnlinkAccount';
import { CoverModal } from './modals/CoverModal';
-import { CreateAccount } from './modals/CreateAccount';
+import { CreateAccountModal } from './modals/CreateAccountModal';
import { CreateEncryptionKeyModal } from './modals/CreateEncryptionKeyModal';
-import { CreateLocalAccount } from './modals/CreateLocalAccount';
+import { CreateLocalAccountModal } from './modals/CreateLocalAccountModal';
import { EditField } from './modals/EditField';
import { EditRule } from './modals/EditRule';
import { FixEncryptionKeyModal } from './modals/FixEncryptionKeyModal';
@@ -105,7 +105,7 @@ export function Modals() {
case 'add-account':
return (
- <CreateAccount
+ <CreateAccountModal
key={name}
modalProps={modalProps}
syncServerStatus={syncServerStatus}
@@ -115,7 +115,7 @@ export function Modals() {
case 'add-local-account':
return (
- <CreateLocalAccount
+ <CreateLocalAccountModal
key={name}
modalProps={modalProps}
actions={actions}
diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
index 6d0e26e05f3906ddc3a6a5f212ea075efe7abb3f..3fc6574b49116d3c3a2b2ddcbfa740e60d0ed7ac 100644
--- a/packages/desktop-client/src/components/common/Modal.tsx
+++ b/packages/desktop-client/src/components/common/Modal.tsx
@@ -15,7 +15,6 @@ import ReactModal from 'react-modal';
import { AnimatedLoading } from '../../icons/AnimatedLoading';
import { SvgLogo } from '../../icons/logo';
import { SvgDelete } from '../../icons/v0';
-import { useResponsive } from '../../ResponsiveProvider';
import { type CSSProperties, styles, theme } from '../../style';
import { tokens } from '../../tokens';
@@ -52,7 +51,7 @@ export const Modal = ({
isCurrent,
isHidden,
size,
- padding = 20,
+ padding = 10,
showHeader = true,
leftHeaderContent,
CloseButton: CloseButtonComponent = ModalCloseButton,
@@ -69,7 +68,6 @@ export const Modal = ({
children,
onClose,
}: ModalProps) => {
- const { isNarrowWidth } = useResponsive();
const { enableScope, disableScope } = useHotkeysContext();
// This deactivates any key handlers in the "app" scope
@@ -133,12 +131,14 @@ export const Modal = ({
isCurrent={isCurrent}
size={size}
style={{
+ flex: 1,
+ padding,
willChange: 'opacity, transform',
maxWidth: '90vw',
minWidth: '90vw',
maxHeight: '90vh',
minHeight: 0,
- borderRadius: 4,
+ borderRadius: 6,
//border: '1px solid ' + theme.modalBorder,
color: theme.pageText,
backgroundColor: theme.modalBackground,
@@ -156,17 +156,14 @@ export const Modal = ({
style={{
justifyContent: 'center',
alignItems: 'center',
- padding: '0 20px',
position: 'relative',
- height: 70,
+ height: 60,
}}
>
<View
style={{
position: 'absolute',
left: 0,
- marginRight: !isNarrowWidth ? 5 : undefined,
- marginLeft: !isNarrowWidth ? 15 : undefined,
}}
>
{leftHeaderContent}
@@ -178,8 +175,7 @@ export const Modal = ({
textAlign: 'center',
// We need to force a width for the text-overflow
// ellipses to work because we are aligning center.
- // This effectively gives it a padding of 20px
- width: 'calc(100% - 40px)',
+ width: 'calc(100% - 60px)',
}}
>
{!title ? (
@@ -200,15 +196,13 @@ export const Modal = ({
style={{
position: 'absolute',
right: 0,
- marginRight: !isNarrowWidth ? 15 : undefined,
- marginLeft: !isNarrowWidth ? 5 : undefined,
}}
>
<CloseButtonComponent onClick={onClose} />
</View>
</View>
)}
- <View style={{ padding, paddingTop: 0, flex: 1 }}>
+ <View style={{ paddingTop: 0, flex: 1 }}>
{typeof children === 'function' ? children() : children}
</View>
{loading && (
diff --git a/packages/desktop-client/src/components/manager/DeleteFile.tsx b/packages/desktop-client/src/components/manager/DeleteFile.tsx
index 1418fa7bda7993de21f655341c8a7f0ec376e973..3b1cff19412696d05952cb1bf787b1b7bac74086 100644
--- a/packages/desktop-client/src/components/manager/DeleteFile.tsx
+++ b/packages/desktop-client/src/components/manager/DeleteFile.tsx
@@ -30,7 +30,6 @@ export function DeleteFile({ modalProps, actions, file }: DeleteFileProps) {
<Modal
{...modalProps}
title={'Delete ' + file.name}
- padding={0}
showOverlay={false}
onClose={modalProps.onBack}
>
diff --git a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx
index 15026d0d84da068f91c8f6ee0d7b0063ce79fa41..025c9a2658a3ca5d45354a8a21a82f1bf39ecb37 100644
--- a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx
+++ b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx
@@ -42,12 +42,8 @@ export function AccountAutocompleteModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
- padding={0}
style={{
- flex: 0,
height: isNarrowWidth ? '85vh' : 275,
- padding: '15px 10px',
- borderRadius: '6px',
backgroundColor: theme.menuAutoCompleteBackground,
}}
CloseButton={props => (
diff --git a/packages/desktop-client/src/components/modals/AccountMenuModal.tsx b/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
index 5e18914e4708eec7fe2469691842e1425f877f16..36dcfa3f91a8b9b5d904cb9e72f7ccf99e63a3b9 100644
--- a/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
@@ -85,12 +85,8 @@ export function AccountMenuModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
- padding={0}
style={{
- flex: 1,
height: '45vh',
- padding: '0 10px',
- borderRadius: '6px',
}}
leftHeaderContent={
<AdditionalAccountMenu
@@ -137,7 +133,6 @@ export function AccountMenuModal({
justifyContent: 'space-between',
alignContent: 'space-between',
paddingTop: 10,
- paddingBottom: 10,
}}
>
<Button style={buttonStyle} onClick={_onEditNotes}>
diff --git a/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx b/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
index beeffccbee3724746b36ae3e82b337a0c31c25f3..6c5a7f77ad5318e8a75af3c41ea3a3834981b43c 100644
--- a/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
@@ -27,18 +27,7 @@ export function BudgetPageMenuModal({
};
return (
- <Modal
- showHeader
- focusAfterClose={false}
- {...modalProps}
- padding={0}
- style={{
- flex: 1,
- padding: '0 10px',
- paddingBottom: 10,
- borderRadius: '6px',
- }}
- >
+ <Modal showHeader focusAfterClose={false} {...modalProps}>
<BudgetPageMenu
getItemStyle={() => defaultMenuItemStyle}
onAddCategoryGroup={onAddCategoryGroup}
diff --git a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx
index b561d27ca036fb420010d0fd1812555d0c6efddc..e158b63f13754de893bb0dc381116723cf4a83d0 100644
--- a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx
+++ b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx
@@ -48,12 +48,8 @@ export function CategoryAutocompleteModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
- padding={0}
style={{
- flex: 0,
height: isNarrowWidth ? '85vh' : 275,
- padding: '15px 10px',
- borderRadius: '6px',
backgroundColor: theme.menuAutoCompleteBackground,
}}
CloseButton={props => (
diff --git a/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
index e9d9a776827465f7cd3c1ca23e327cd011a147b7..aab94588eca56b738b246d6135cac01ef0a5bf56 100644
--- a/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
@@ -93,12 +93,8 @@ export function CategoryGroupMenuModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
- padding={0}
style={{
- flex: 1,
height: '45vh',
- padding: '0 10px',
- borderRadius: '6px',
}}
leftHeaderContent={
<AdditionalCategoryGroupMenu
@@ -142,7 +138,6 @@ export function CategoryGroupMenuModal({
justifyContent: 'space-between',
alignContent: 'space-between',
paddingTop: 10,
- paddingBottom: 10,
}}
>
<Button style={buttonStyle} onClick={_onAddCategory}>
diff --git a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
index 82c8bff783370298906045de154ff0b7fab05f51..1fa27a5cdfb7a892d47ab53b9826f46197c272fc 100644
--- a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
@@ -84,12 +84,8 @@ export function CategoryMenuModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
- padding={0}
style={{
- flex: 1,
height: '45vh',
- padding: '0 10px',
- borderRadius: '6px',
}}
leftHeaderContent={
<AdditionalCategoryMenu
@@ -133,7 +129,6 @@ export function CategoryMenuModal({
justifyContent: 'space-between',
alignContent: 'space-between',
paddingTop: 10,
- paddingBottom: 10,
}}
>
<Button style={buttonStyle} onClick={_onEditNotes}>
diff --git a/packages/desktop-client/src/components/modals/CoverModal.tsx b/packages/desktop-client/src/components/modals/CoverModal.tsx
index cf427a79d8b8198eef8c3b8db70342cfbd15225c..81386d44fb7c01e840c2e5f850698553a906a2bb 100644
--- a/packages/desktop-client/src/components/modals/CoverModal.tsx
+++ b/packages/desktop-client/src/components/modals/CoverModal.tsx
@@ -79,42 +79,31 @@ export function CoverModal({
showHeader
focusAfterClose={false}
{...modalProps}
- padding={0}
- style={{
- flex: 1,
- padding: '0 10px',
- paddingBottom: 10,
- borderRadius: '6px',
- }}
>
- {() => (
- <>
- <View>
- <FieldLabel title="Cover from category:" />
- <TapField value={fromCategory?.name} onClick={onCategoryClick} />
- </View>
+ <View>
+ <FieldLabel title="Cover from category:" />
+ <TapField value={fromCategory?.name} onClick={onCategoryClick} />
+ </View>
- <View
- style={{
- justifyContent: 'center',
- alignItems: 'center',
- marginTop: 10,
- }}
- >
- <Button
- type="primary"
- style={{
- height: styles.mobileMinHeight,
- marginLeft: styles.mobileEditingPadding,
- marginRight: styles.mobileEditingPadding,
- }}
- onClick={() => _onSubmit(fromCategoryId)}
- >
- Transfer
- </Button>
- </View>
- </>
- )}
+ <View
+ style={{
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingTop: 10,
+ }}
+ >
+ <Button
+ type="primary"
+ style={{
+ height: styles.mobileMinHeight,
+ marginLeft: styles.mobileEditingPadding,
+ marginRight: styles.mobileEditingPadding,
+ }}
+ onClick={() => _onSubmit(fromCategoryId)}
+ >
+ Transfer
+ </Button>
+ </View>
</Modal>
);
}
diff --git a/packages/desktop-client/src/components/modals/CreateAccount.tsx b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
similarity index 99%
rename from packages/desktop-client/src/components/modals/CreateAccount.tsx
rename to packages/desktop-client/src/components/modals/CreateAccountModal.tsx
index ae035dae4905ee5645752711e8ec2aa62a0fb8eb..9c4f4ed590e0cb8088abc75b6fa656b839934bd8 100644
--- a/packages/desktop-client/src/components/modals/CreateAccount.tsx
+++ b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
@@ -24,7 +24,7 @@ type CreateAccountProps = {
upgradingAccountId?: string;
};
-export function CreateAccount({
+export function CreateAccountModal({
modalProps,
syncServerStatus,
upgradingAccountId,
diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx b/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
index 20cfa1317c891f9686fd5e9e4dc8c2927a7d96f2..7de0a7da70832ea22d247576c58a3f48e3831c53 100644
--- a/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
+++ b/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
@@ -65,11 +65,8 @@ export function CreateEncryptionKeyModal({
<Modal
{...modalProps}
style={{
- flex: 1,
padding: '0 10px',
- borderRadius: '6px',
}}
- padding={10}
title={isRecreating ? 'Generate new key' : 'Enable encryption'}
onClose={modalProps.onClose}
>
diff --git a/packages/desktop-client/src/components/modals/CreateLocalAccount.tsx b/packages/desktop-client/src/components/modals/CreateLocalAccountModal.tsx
similarity index 93%
rename from packages/desktop-client/src/components/modals/CreateLocalAccount.tsx
rename to packages/desktop-client/src/components/modals/CreateLocalAccountModal.tsx
index 00dd36e108dccd513b9634ae66d5e0c416bed2f4..2783acf2c88b04619f6df2c72304b4138abe299b 100644
--- a/packages/desktop-client/src/components/modals/CreateLocalAccount.tsx
+++ b/packages/desktop-client/src/components/modals/CreateLocalAccountModal.tsx
@@ -12,7 +12,7 @@ import { InitialFocus } from '../common/InitialFocus';
import { InlineField } from '../common/InlineField';
import { Input } from '../common/Input';
import { Link } from '../common/Link';
-import { Modal, ModalButtons } from '../common/Modal';
+import { Modal, ModalButtons, ModalTitle } from '../common/Modal';
import { Text } from '../common/Text';
import { View } from '../common/View';
import { Checkbox } from '../forms';
@@ -23,7 +23,7 @@ type CreateLocalAccountProps = {
actions: BoundActions;
};
-export function CreateLocalAccount({
+export function CreateLocalAccountModal({
modalProps,
actions,
}: CreateLocalAccountProps) {
@@ -38,7 +38,10 @@ export function CreateLocalAccount({
const validateBalance = balance => !isNaN(parseFloat(balance));
return (
- <Modal title="Create Local Account" {...modalProps}>
+ <Modal
+ title={<ModalTitle title="Create Local Account" shrinkOnOverflow />}
+ {...modalProps}
+ >
{() => (
<View>
<form
@@ -62,7 +65,7 @@ export function CreateLocalAccount({
}
}}
>
- <InlineField label="Name" width="75%">
+ <InlineField label="Name" width="100%">
<InitialFocus>
<Input
name="name"
@@ -85,7 +88,7 @@ export function CreateLocalAccount({
<View
style={{
- width: '75%',
+ width: '100%',
flexDirection: 'row',
justifyContent: 'flex-end',
}}
@@ -137,7 +140,7 @@ export function CreateLocalAccount({
</View>
</View>
- <InlineField label="Balance" width="75%">
+ <InlineField label="Balance" width="100%">
<Input
name="balance"
inputMode="decimal"
diff --git a/packages/desktop-client/src/components/modals/EditField.jsx b/packages/desktop-client/src/components/modals/EditField.jsx
index bdcabb487e04a063049b2f6a1b51522a3b3afde4..295d77659c5283fa7dc0bb5e1cd951b91d03db05 100644
--- a/packages/desktop-client/src/components/modals/EditField.jsx
+++ b/packages/desktop-client/src/components/modals/EditField.jsx
@@ -221,12 +221,10 @@ export function EditField({ modalProps, name, onSubmit, onClose }) {
focusAfterClose={false}
{...modalProps}
onClose={onCloseInner}
- padding={0}
style={{
flex: 0,
height: isNarrowWidth ? '85vh' : 275,
padding: '15px 10px',
- borderRadius: '6px',
...(minWidth && { minWidth }),
backgroundColor: theme.menuAutoCompleteBackground,
}}
diff --git a/packages/desktop-client/src/components/modals/EditRule.jsx b/packages/desktop-client/src/components/modals/EditRule.jsx
index bbd547ddf228e6067050df24f75b398238b69281..cb3c6d3ac60a1f135ab826cf9a1ea67a199c977c 100644
--- a/packages/desktop-client/src/components/modals/EditRule.jsx
+++ b/packages/desktop-client/src/components/modals/EditRule.jsx
@@ -894,7 +894,6 @@ export function EditRule({ modalProps, defaultRule, onSave: originalOnSave }) {
return (
<Modal
title="Rule"
- padding={0}
{...modalProps}
style={{ ...modalProps.style, flex: 'inherit' }}
>
diff --git a/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx b/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx
index 30446306d5562cc1d50cca0c0a9897b088c9721c..a1a451cb6741f4de1a2b0c6791e9cbeb3d8f00e0 100644
--- a/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx
+++ b/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx
@@ -61,11 +61,8 @@ export function FixEncryptionKeyModal({
hasExistingKey ? 'Unable to decrypt file' : 'This file is encrypted'
}
style={{
- flex: 1,
padding: '0 10px',
- borderRadius: '6px',
}}
- padding={10}
onClose={modalProps.onClose}
>
<View
diff --git a/packages/desktop-client/src/components/modals/HoldBufferModal.tsx b/packages/desktop-client/src/components/modals/HoldBufferModal.tsx
index c7e249da239c2b2a6ac8cf08f8558f37524f5bcd..93304923ad7028f8f2366601136a24a349a992ab 100644
--- a/packages/desktop-client/src/components/modals/HoldBufferModal.tsx
+++ b/packages/desktop-client/src/components/modals/HoldBufferModal.tsx
@@ -42,48 +42,37 @@ export function HoldBufferModal({
showHeader
focusAfterClose={false}
{...modalProps}
- padding={0}
- style={{
- flex: 1,
- padding: '0 10px',
- paddingBottom: 10,
- borderRadius: '6px',
- }}
>
- {() => (
- <>
- <View>
- <FieldLabel title="Hold this amount:" />
- <InitialFocus>
- <InputField
- inputMode="decimal"
- defaultValue={initialAmount}
- onUpdate={value => setAmount(value)}
- onEnter={() => _onSubmit(amount)}
- />
- </InitialFocus>
- </View>
- <View
- style={{
- justifyContent: 'center',
- alignItems: 'center',
- marginTop: 10,
- }}
- >
- <Button
- type="primary"
- style={{
- height: styles.mobileMinHeight,
- marginLeft: styles.mobileEditingPadding,
- marginRight: styles.mobileEditingPadding,
- }}
- onClick={() => _onSubmit(amount)}
- >
- Hold
- </Button>
- </View>
- </>
- )}
+ <View>
+ <FieldLabel title="Hold this amount:" />
+ <InitialFocus>
+ <InputField
+ inputMode="decimal"
+ defaultValue={initialAmount}
+ onUpdate={value => setAmount(value)}
+ onEnter={() => _onSubmit(amount)}
+ />
+ </InitialFocus>
+ </View>
+ <View
+ style={{
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingTop: 10,
+ }}
+ >
+ <Button
+ type="primary"
+ style={{
+ height: styles.mobileMinHeight,
+ marginLeft: styles.mobileEditingPadding,
+ marginRight: styles.mobileEditingPadding,
+ }}
+ onClick={() => _onSubmit(amount)}
+ >
+ Hold
+ </Button>
+ </View>
</Modal>
);
}
diff --git a/packages/desktop-client/src/components/modals/LoadBackup.jsx b/packages/desktop-client/src/components/modals/LoadBackup.jsx
index e09f783322a8a35283491e310bc6469f518d5a58..741b41d7c03af239f4b0a2d53d5b75fe5ad74ee3 100644
--- a/packages/desktop-client/src/components/modals/LoadBackup.jsx
+++ b/packages/desktop-client/src/components/modals/LoadBackup.jsx
@@ -74,7 +74,7 @@ export function LoadBackup({
const previousBackups = backups.filter(backup => !backup.isLatest);
return (
- <Modal title="Load Backup" padding={0} {...modalProps} style={{ flex: 0 }}>
+ <Modal title="Load Backup" {...modalProps} style={{ flex: 0 }}>
{() => (
<View style={{ marginBottom: 30 }}>
<View
diff --git a/packages/desktop-client/src/components/modals/ManageRulesModal.tsx b/packages/desktop-client/src/components/modals/ManageRulesModal.tsx
index 6c625005ccbc5ebbdf17a949fa5d111228b1bb75..9d1a690222ec4d9b402e836985f669056dbdf158 100644
--- a/packages/desktop-client/src/components/modals/ManageRulesModal.tsx
+++ b/packages/desktop-client/src/components/modals/ManageRulesModal.tsx
@@ -28,15 +28,7 @@ export function ManageRulesModal({
}
return (
- <Modal
- title="Rules"
- padding={0}
- loading={loading}
- {...modalProps}
- style={{
- flex: 1,
- }}
- >
+ <Modal title="Rules" loading={loading} {...modalProps}>
{() => <ManageRules isModal payeeId={payeeId} setLoading={setLoading} />}
</Modal>
);
diff --git a/packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx b/packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx
index 33ca3d70328f19ce281c4a2474dde4d9e341f39b..78d0efc178371f34afb65ea70a2743a86484e15c 100644
--- a/packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx
+++ b/packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx
@@ -80,7 +80,6 @@ export function MergeUnusedPayees({ modalProps, payeeIds, targetPayeeId }) {
return (
<Modal
title="Merge payee?"
- padding={0}
showHeader={false}
{...modalProps}
style={modalProps.style}
diff --git a/packages/desktop-client/src/components/modals/Notes.tsx b/packages/desktop-client/src/components/modals/Notes.tsx
index 2391027219b9a79fceac5fddf487139a9b1ce7d9..e788e2734cb0c82b8b3405990ded673371ffb06f 100644
--- a/packages/desktop-client/src/components/modals/Notes.tsx
+++ b/packages/desktop-client/src/components/modals/Notes.tsx
@@ -41,57 +41,50 @@ export function Notes({ modalProps, id, name, onSave }: NotesProps) {
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
- padding={0}
style={{
- flex: 1,
height: '50vh',
- padding: '0 10px',
- borderRadius: '6px',
}}
>
- {() => (
+ <View
+ style={{
+ flex: 1,
+ flexDirection: 'column',
+ }}
+ >
+ <NotesComponent
+ notes={notes}
+ editable={true}
+ focused={true}
+ getStyle={() => ({
+ borderRadius: 6,
+ flex: 1,
+ minWidth: 0,
+ })}
+ onChange={setNotes}
+ />
<View
style={{
- flex: 1,
flexDirection: 'column',
+ alignItems: 'center',
+ justifyItems: 'center',
+ width: '100%',
+ paddingTop: 10,
}}
>
- <NotesComponent
- notes={notes}
- editable={true}
- focused={true}
- getStyle={() => ({
- borderRadius: 6,
- flex: 1,
- minWidth: 0,
- })}
- onChange={setNotes}
- />
- <View
+ <Button
+ type="primary"
style={{
- flexDirection: 'column',
- alignItems: 'center',
- justifyItems: 'center',
+ fontSize: 17,
+ fontWeight: 400,
width: '100%',
- paddingTop: 10,
- paddingBottom: 10,
}}
+ onClick={_onSave}
>
- <Button
- type="primary"
- style={{
- fontSize: 17,
- fontWeight: 400,
- width: '100%',
- }}
- onClick={_onSave}
- >
- <SvgCheck width={17} height={17} style={{ paddingRight: 5 }} />
- Save notes
- </Button>
- </View>
+ <SvgCheck width={17} height={17} style={{ paddingRight: 5 }} />
+ Save notes
+ </Button>
</View>
- )}
+ </View>
</Modal>
);
}
diff --git a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx
index 3d26dc45d53ab14afc23889bbd40953bada55345..5c860cacc38215afb0114c4b4e017c3daf0b19cf 100644
--- a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx
+++ b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx
@@ -45,12 +45,8 @@ export function PayeeAutocompleteModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
- padding={0}
style={{
- flex: 0,
height: isNarrowWidth ? '85vh' : 275,
- padding: '15px 10px',
- borderRadius: '6px',
backgroundColor: theme.menuAutoCompleteBackground,
}}
CloseButton={props => (
diff --git a/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx
index 1bd2fb83f4c4253c414df3839e601873cef08c6c..c77f4776d12019305ff30cbdbfd994eee8f13dae 100644
--- a/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx
@@ -41,13 +41,6 @@ export function ReportBalanceMenuModal({
showHeader
focusAfterClose={false}
{...modalProps}
- padding={0}
- style={{
- flex: 1,
- padding: '0 10px',
- paddingBottom: 10,
- borderRadius: '6px',
- }}
>
<View
style={{
diff --git a/packages/desktop-client/src/components/modals/ReportBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/ReportBudgetMenuModal.tsx
index 17cdc075fd8000a9d806565708b77dad53f95271..a76187e2f90f4fa1747549ac383d8d52b08539a8 100644
--- a/packages/desktop-client/src/components/modals/ReportBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ReportBudgetMenuModal.tsx
@@ -62,12 +62,9 @@ export function ReportBudgetMenuModal({
showHeader
focusAfterClose={false}
{...modalProps}
- padding={0}
style={{
- flex: 1,
padding: '0 10px',
paddingBottom: 10,
- borderRadius: '6px',
}}
>
<View
diff --git a/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx
index 18cab06ad8034ec98c1c948b2d29d7277d5b48b5..a70079bc0b33ebd692e8863f28fe383e8827e09f 100644
--- a/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ReportBudgetMonthMenuModal.tsx
@@ -72,11 +72,8 @@ export function ReportBudgetMonthMenuModal({
focusAfterClose={false}
{...modalProps}
onClose={onClose}
- padding={10}
style={{
- flex: 1,
height: '50vh',
- borderRadius: '6px',
}}
>
<View
diff --git a/packages/desktop-client/src/components/modals/ReportBudgetSummaryModal.tsx b/packages/desktop-client/src/components/modals/ReportBudgetSummaryModal.tsx
index a58338ce3b2e8623c213073332c22b2056721fd6..144da8fe02cdf44e4ff52a703b95c5209b86627f 100644
--- a/packages/desktop-client/src/components/modals/ReportBudgetSummaryModal.tsx
+++ b/packages/desktop-client/src/components/modals/ReportBudgetSummaryModal.tsx
@@ -24,25 +24,23 @@ export function ReportBudgetSummaryModal({
const currentMonth = monthUtils.currentMonth();
return (
<Modal title="Budget Summary" {...modalProps}>
- {() => (
- <NamespaceContext.Provider value={sheetForMonth(month)}>
- <Stack
- spacing={2}
- style={{
- alignSelf: 'center',
- backgroundColor: 'transparent',
- borderRadius: 4,
- }}
- >
- <IncomeTotal style={{ ...styles.mediumText }} />
- <ExpenseTotal style={{ ...styles.mediumText }} />
- </Stack>
- <Saved
- projected={month >= currentMonth}
- style={{ ...styles.mediumText, marginTop: 20 }}
- />
- </NamespaceContext.Provider>
- )}
+ <NamespaceContext.Provider value={sheetForMonth(month)}>
+ <Stack
+ spacing={2}
+ style={{
+ alignSelf: 'center',
+ backgroundColor: 'transparent',
+ borderRadius: 4,
+ }}
+ >
+ <IncomeTotal style={{ ...styles.mediumText }} />
+ <ExpenseTotal style={{ ...styles.mediumText }} />
+ </Stack>
+ <Saved
+ projected={month >= currentMonth}
+ style={{ ...styles.mediumText, marginTop: 20 }}
+ />
+ </NamespaceContext.Provider>
</Modal>
);
}
diff --git a/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx
index 33f707fdfd246982464aa8e18be11b20489e2c67..068c86b1f720079ac499bdee652b9be685265a6c 100644
--- a/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx
@@ -43,13 +43,6 @@ export function RolloverBalanceMenuModal({
showHeader
focusAfterClose={false}
{...modalProps}
- padding={0}
- style={{
- flex: 1,
- padding: '0 10px',
- paddingBottom: 10,
- borderRadius: '6px',
- }}
>
<View
style={{
diff --git a/packages/desktop-client/src/components/modals/RolloverBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/RolloverBudgetMenuModal.tsx
index 0130b6d3f6b4ce9238058d088aa0977f2f057de6..b64090c92b1b535b52e8afb33097d82c258eaa62 100644
--- a/packages/desktop-client/src/components/modals/RolloverBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/RolloverBudgetMenuModal.tsx
@@ -62,12 +62,9 @@ export function RolloverBudgetMenuModal({
showHeader
focusAfterClose={false}
{...modalProps}
- padding={0}
style={{
- flex: 1,
padding: '0 10px',
paddingBottom: 10,
- borderRadius: '6px',
}}
>
<View
diff --git a/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx
index caf9df76923bde849a582349d8697fb862ee8a68..18f4009f9b55e9387a046f107e2c56862fae071a 100644
--- a/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/RolloverBudgetMonthMenuModal.tsx
@@ -72,11 +72,8 @@ export function RolloverBudgetMonthMenuModal({
focusAfterClose={false}
{...modalProps}
onClose={onClose}
- padding={10}
style={{
- flex: 1,
height: '50vh',
- borderRadius: '6px',
}}
>
<View
diff --git a/packages/desktop-client/src/components/modals/RolloverBudgetSummaryModal.tsx b/packages/desktop-client/src/components/modals/RolloverBudgetSummaryModal.tsx
index 0cec233d86d144cf05770b688960c4e866756995..1970a1912a2bdb4e6f1cd6f928d36aa9ffbf3c5c 100644
--- a/packages/desktop-client/src/components/modals/RolloverBudgetSummaryModal.tsx
+++ b/packages/desktop-client/src/components/modals/RolloverBudgetSummaryModal.tsx
@@ -79,27 +79,25 @@ export function RolloverBudgetSummaryModal({
return (
<Modal title="Budget Summary" {...modalProps}>
- {() => (
- <NamespaceContext.Provider value={sheetForMonth(month)}>
- <TotalsList
- prevMonthName={prevMonthName}
- style={{
- ...styles.mediumText,
- }}
- />
- <ToBudgetAmount
- prevMonthName={prevMonthName}
- style={{
- ...styles.mediumText,
- marginTop: 15,
- }}
- amountStyle={{
- ...styles.underlinedText,
- }}
- onClick={onClick}
- />
- </NamespaceContext.Provider>
- )}
+ <NamespaceContext.Provider value={sheetForMonth(month)}>
+ <TotalsList
+ prevMonthName={prevMonthName}
+ style={{
+ ...styles.mediumText,
+ }}
+ />
+ <ToBudgetAmount
+ prevMonthName={prevMonthName}
+ style={{
+ ...styles.mediumText,
+ marginTop: 15,
+ }}
+ amountStyle={{
+ ...styles.underlinedText,
+ }}
+ onClick={onClick}
+ />
+ </NamespaceContext.Provider>
</Modal>
);
}
diff --git a/packages/desktop-client/src/components/modals/RolloverToBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/RolloverToBudgetMenuModal.tsx
index 9daa6ac60b1d12ca16b0149728e974dce2370baf..da1c28a1e2f4ca44a5820cb9a58164028236ddd5 100644
--- a/packages/desktop-client/src/components/modals/RolloverToBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/RolloverToBudgetMenuModal.tsx
@@ -25,18 +25,7 @@ export function RolloverToBudgetMenuModal({
};
return (
- <Modal
- showHeader
- focusAfterClose={false}
- {...modalProps}
- padding={0}
- style={{
- flex: 1,
- padding: '0 10px',
- paddingBottom: 10,
- borderRadius: '6px',
- }}
- >
+ <Modal showHeader focusAfterClose={false} {...modalProps}>
<ToBudgetMenu
getItemStyle={() => defaultMenuItemStyle}
onTransfer={onTransfer}
diff --git a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
index 8a70ceb15723efc3a9b9224e91a5f24d60e0ec05..bac14eeb56de189027427ec079103cda3a04eace 100644
--- a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
@@ -23,18 +23,7 @@ export function ScheduledTransactionMenuModal({
};
return (
- <Modal
- showHeader
- focusAfterClose={false}
- {...modalProps}
- padding={0}
- style={{
- flex: 1,
- padding: '0 10px',
- paddingBottom: 10,
- borderRadius: '6px',
- }}
- >
+ <Modal showHeader focusAfterClose={false} {...modalProps}>
<ScheduledTransactionMenu
transactionId={transactionId}
onPost={onPost}
diff --git a/packages/desktop-client/src/components/modals/SingleInputModal.tsx b/packages/desktop-client/src/components/modals/SingleInputModal.tsx
index 7ea44494095c490f557d70a6377c5abdafd6b244..4bda6b5d3fff9d9e0d6440b0e7846a4d26b4329e 100644
--- a/packages/desktop-client/src/components/modals/SingleInputModal.tsx
+++ b/packages/desktop-client/src/components/modals/SingleInputModal.tsx
@@ -42,61 +42,47 @@ export function SingleInputModal({
};
return (
- <Modal
- title={title}
- {...modalProps}
- padding={0}
- style={{
- flex: 1,
- padding: '0 10px',
- paddingBottom: 10,
- borderRadius: '6px',
- }}
- >
- {() => (
- <>
- <View>
- <InitialFocus>
- <InputField
- placeholder={inputPlaceholder}
- defaultValue={value}
- onUpdate={setValue}
- onEnter={e => _onSubmit(e.currentTarget.value)}
- />
- </InitialFocus>
- {errorMessage && (
- <FormError
- style={{
- paddingTop: 5,
- marginLeft: styles.mobileEditingPadding,
- marginRight: styles.mobileEditingPadding,
- }}
- >
- * {errorMessage}
- </FormError>
- )}
- </View>
- <View
+ <Modal title={title} {...modalProps}>
+ <View>
+ <InitialFocus>
+ <InputField
+ placeholder={inputPlaceholder}
+ defaultValue={value}
+ onUpdate={setValue}
+ onEnter={e => _onSubmit(e.currentTarget.value)}
+ />
+ </InitialFocus>
+ {errorMessage && (
+ <FormError
style={{
- justifyContent: 'center',
- alignItems: 'center',
- marginTop: 10,
+ paddingTop: 5,
+ marginLeft: styles.mobileEditingPadding,
+ marginRight: styles.mobileEditingPadding,
}}
>
- <Button
- type="primary"
- style={{
- height: styles.mobileMinHeight,
- marginLeft: styles.mobileEditingPadding,
- marginRight: styles.mobileEditingPadding,
- }}
- onClick={() => _onSubmit(value)}
- >
- {buttonText}
- </Button>
- </View>
- </>
- )}
+ * {errorMessage}
+ </FormError>
+ )}
+ </View>
+ <View
+ style={{
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingTop: 10,
+ }}
+ >
+ <Button
+ type="primary"
+ style={{
+ height: styles.mobileMinHeight,
+ marginLeft: styles.mobileEditingPadding,
+ marginRight: styles.mobileEditingPadding,
+ }}
+ onClick={() => _onSubmit(value)}
+ >
+ {buttonText}
+ </Button>
+ </View>
</Modal>
);
}
diff --git a/packages/desktop-client/src/components/modals/SwitchBudgetTypeModal.tsx b/packages/desktop-client/src/components/modals/SwitchBudgetTypeModal.tsx
index 27b92df6cb56195fb64827643487e0bf1ab4a547..e4b0c0b499da8171a0936c8db6f3c4f5f4274185 100644
--- a/packages/desktop-client/src/components/modals/SwitchBudgetTypeModal.tsx
+++ b/packages/desktop-client/src/components/modals/SwitchBudgetTypeModal.tsx
@@ -6,7 +6,7 @@ import { useResponsive } from '../../ResponsiveProvider';
import { styles } from '../../style';
import { Button } from '../common/Button';
import { Link } from '../common/Link';
-import { Modal } from '../common/Modal';
+import { Modal, ModalTitle } from '../common/Modal';
import { Paragraph } from '../common/Paragraph';
import { Text } from '../common/Text';
import { type CommonModalProps } from '../Modals';
@@ -28,45 +28,46 @@ export function SwitchBudgetTypeModal({
}
: {};
return (
- <Modal title="Switch budget type?" {...modalProps}>
- {() => (
- <>
- <Paragraph>
- You are currently using a{' '}
- <Text style={{ fontWeight: 600 }}>
- {budgetType === 'report' ? 'Report budget' : 'Rollover budget'}.
- </Text>{' '}
- Switching will not lose any data and you can always switch back.
- </Paragraph>
- <Button
- type="primary"
- style={{
- ...narrowStyle,
- }}
- onClick={() => {
- onSwitch?.();
- modalProps.onClose?.();
- }}
+ <Modal
+ title={<ModalTitle title="Switch budget type?" shrinkOnOverflow />}
+ {...modalProps}
+ >
+ <>
+ <Paragraph>
+ You are currently using a{' '}
+ <Text style={{ fontWeight: 600 }}>
+ {budgetType === 'report' ? 'Report budget' : 'Rollover budget'}.
+ </Text>{' '}
+ Switching will not lose any data and you can always switch back.
+ </Paragraph>
+ <Button
+ type="primary"
+ style={{
+ ...narrowStyle,
+ }}
+ onClick={() => {
+ onSwitch?.();
+ modalProps.onClose?.();
+ }}
+ >
+ Switch to a{' '}
+ {budgetType === 'report' ? 'Rollover budget' : 'Report budget'}
+ </Button>
+ <Paragraph
+ isLast={true}
+ style={{
+ marginTop: 10,
+ }}
+ >
+ <Link
+ variant="external"
+ to="https://actualbudget.org/docs/experimental/report-budget"
+ linkColor="muted"
>
- Switch to a{' '}
- {budgetType === 'report' ? 'Rollover budget' : 'Report budget'}
- </Button>
- <Paragraph
- isLast={true}
- style={{
- marginTop: 10,
- }}
- >
- <Link
- variant="external"
- to="https://actualbudget.org/docs/experimental/report-budget"
- linkColor="muted"
- >
- How do these types of budgeting work?
- </Link>
- </Paragraph>
- </>
- )}
+ How do these types of budgeting work?
+ </Link>
+ </Paragraph>
+ </>
</Modal>
);
}
diff --git a/packages/desktop-client/src/components/modals/TransferModal.tsx b/packages/desktop-client/src/components/modals/TransferModal.tsx
index 43bf3995dcf4a1e6baed7af692ae790d09801a3b..8b19a5dd5a4b82c68cf98e3239d3a464c4890ec5 100644
--- a/packages/desktop-client/src/components/modals/TransferModal.tsx
+++ b/packages/desktop-client/src/components/modals/TransferModal.tsx
@@ -72,67 +72,53 @@ export function TransferModal({
const toCategory = categories.find(c => c.id === toCategoryId);
return (
- <Modal
- title={title}
- showHeader
- focusAfterClose={false}
- {...modalProps}
- padding={0}
- style={{
- flex: 1,
- padding: '0 10px',
- paddingBottom: 10,
- borderRadius: '6px',
- }}
- >
- {() => (
- <>
- <View>
- <FieldLabel title="Transfer this amount:" />
- <InitialFocus>
- <InputField
- inputMode="decimal"
- tabIndex={0}
- defaultValue={_initialAmount}
- onUpdate={setAmount}
- onEnter={() => {
- if (!toCategoryId) {
- openCategoryModal();
- }
- }}
- />
- </InitialFocus>
- </View>
+ <Modal title={title} showHeader focusAfterClose={false} {...modalProps}>
+ <View>
+ <View>
+ <FieldLabel title="Transfer this amount:" />
+ <InitialFocus>
+ <InputField
+ inputMode="decimal"
+ tabIndex={0}
+ defaultValue={_initialAmount}
+ onUpdate={setAmount}
+ onEnter={() => {
+ if (!toCategoryId) {
+ openCategoryModal();
+ }
+ }}
+ />
+ </InitialFocus>
+ </View>
- <FieldLabel title="To:" />
- <TapField
- tabIndex={0}
- value={toCategory?.name}
- onClick={openCategoryModal}
- />
+ <FieldLabel title="To:" />
+ <TapField
+ tabIndex={0}
+ value={toCategory?.name}
+ onClick={openCategoryModal}
+ />
- <View
+ <View
+ style={{
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingTop: 10,
+ }}
+ >
+ <Button
+ type="primary"
+ tabIndex={0}
style={{
- justifyContent: 'center',
- alignItems: 'center',
- marginTop: 10,
+ height: styles.mobileMinHeight,
+ marginLeft: styles.mobileEditingPadding,
+ marginRight: styles.mobileEditingPadding,
}}
+ onClick={() => _onSubmit(amount, toCategoryId)}
>
- <Button
- type="primary"
- tabIndex={0}
- style={{
- height: styles.mobileMinHeight,
- marginLeft: styles.mobileEditingPadding,
- marginRight: styles.mobileEditingPadding,
- }}
- onClick={() => _onSubmit(amount, toCategoryId)}
- >
- Transfer
- </Button>
- </View>
- </>
- )}
+ Transfer
+ </Button>
+ </View>
+ </View>
</Modal>
);
}
diff --git a/upcoming-release-notes/2571.md b/upcoming-release-notes/2571.md
new file mode 100644
index 0000000000000000000000000000000000000000..c5d0d0172d30ced50c4eddeb46ac2a4c70493ea2
--- /dev/null
+++ b/upcoming-release-notes/2571.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Use consistent padding in modals