From 10bd8c0f22d9a98f4080323b805c004a45c080b5 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Wed, 10 Apr 2024 08:22:41 -0700 Subject: [PATCH 1/8] Use desktop colors for mobile autocomplete modals --- .../src/components/autocomplete/AccountAutocomplete.tsx | 3 +++ .../src/components/autocomplete/CategoryAutocomplete.tsx | 7 +------ .../src/components/autocomplete/ItemHeader.tsx | 1 - .../src/components/autocomplete/PayeeAutocomplete.tsx | 4 ---- .../src/components/modals/AccountAutocompleteModal.tsx | 6 ++---- .../src/components/modals/CategoryAutocompleteModal.tsx | 6 ++---- .../src/components/modals/PayeeAutocompleteModal.tsx | 6 ++---- 7 files changed, 10 insertions(+), 23 deletions(-) diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx index bc053ed99b2..210eebaf05a 100644 --- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx @@ -212,6 +212,9 @@ function AccountItem({ backgroundColor: highlighted ? theme.menuAutoCompleteBackgroundHover : 'transparent', + color: highlighted + ? theme.menuAutoCompleteItemTextHover + : theme.menuAutoCompleteItemText, padding: 4, paddingLeft: 20, borderRadius: embedded ? 4 : 0, diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx index ec9b40b2b5b..419467e2a26 100644 --- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx @@ -299,8 +299,7 @@ type CategoryItemProps = { embedded?: boolean; }; -// eslint-disable-next-line import/no-unused-modules -export function CategoryItem({ +function CategoryItem({ item, className, style, @@ -312,7 +311,6 @@ export function CategoryItem({ const narrowStyle = isNarrowWidth ? { ...styles.mobileMenuItem, - color: theme.menuAutoCompleteText, borderRadius: 0, borderTop: `1px solid ${theme.pillBorder}`, } @@ -331,9 +329,6 @@ export function CategoryItem({ color: highlighted ? theme.menuAutoCompleteItemTextHover : theme.menuAutoCompleteItemText, - ':hover': { - color: theme.menuAutoCompleteItemTextHover, - }, padding: 4, paddingLeft: 20, borderRadius: embedded ? 4 : 0, diff --git a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx index 0bdc87ba811..2b0004faa5c 100644 --- a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx +++ b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx @@ -15,7 +15,6 @@ export function ItemHeader({ title, style, type, ...props }: ItemHeaderProps) { const narrowStyle = isNarrowWidth ? { ...styles.largeText, - color: theme.menuItemTextHeader, paddingTop: 10, paddingBottom: 10, } diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx index ae676abeebb..daa8294c26e 100644 --- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx @@ -484,7 +484,6 @@ function PayeeItem({ const narrowStyle = isNarrowWidth ? { ...styles.mobileMenuItem, - color: theme.menuAutoCompleteText, borderRadius: 0, borderTop: `1px solid ${theme.pillBorder}`, } @@ -522,9 +521,6 @@ function PayeeItem({ color: highlighted ? theme.menuAutoCompleteItemTextHover : theme.menuAutoCompleteItemText, - ':hover': { - color: theme.menuAutoCompleteItemTextHover, - }, borderRadius: embedded ? 4 : 0, padding: 4, paddingLeft: 20, diff --git a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx index 5ec7911bef1..ef4a143928d 100644 --- a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx @@ -43,10 +43,8 @@ export function AccountAutocompleteModal({ height: isNarrowWidth ? '85vh' : 275, padding: '15px 10px', borderRadius: '6px', - ...(!isNarrowWidth && { - backgroundColor: theme.mobileModalBackground, - color: theme.mobileModalText, - }), + backgroundColor: theme.mobileModalBackground, + color: theme.mobileModalText, }} > {() => ( diff --git a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx index 6d5c9f9722f..0eb043b95c8 100644 --- a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx @@ -44,10 +44,8 @@ export function CategoryAutocompleteModal({ height: isNarrowWidth ? '85vh' : 275, padding: '15px 10px', borderRadius: '6px', - ...(!isNarrowWidth && { - backgroundColor: theme.mobileModalBackground, - color: theme.mobileModalText, - }), + backgroundColor: theme.mobileModalBackground, + color: theme.mobileModalText, }} > {() => ( diff --git a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx index 6eaf1a5a58b..17b9390ddc6 100644 --- a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx @@ -46,10 +46,8 @@ export function PayeeAutocompleteModal({ height: isNarrowWidth ? '85vh' : 275, padding: '15px 10px', borderRadius: '6px', - ...(!isNarrowWidth && { - backgroundColor: theme.mobileModalBackground, - color: theme.mobileModalText, - }), + backgroundColor: theme.mobileModalBackground, + color: theme.mobileModalText, }} > {() => ( From daf18744af4b3279d13420bc82afd62c25404b16 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Wed, 10 Apr 2024 08:24:49 -0700 Subject: [PATCH 2/8] Release notes --- upcoming-release-notes/2577.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 upcoming-release-notes/2577.md diff --git a/upcoming-release-notes/2577.md b/upcoming-release-notes/2577.md new file mode 100644 index 00000000000..a1def19a83d --- /dev/null +++ b/upcoming-release-notes/2577.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [joel-jeremy] +--- + +Use desktop colors for mobile autocomplete modals. From dbf157fcd18135b2e339b325a30271b0ede2921e Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Wed, 10 Apr 2024 09:35:35 -0700 Subject: [PATCH 3/8] Color updates --- packages/desktop-client/src/components/MobileWebMessage.tsx | 4 ++-- .../src/components/mobile/transactions/Option.jsx | 2 +- .../src/components/modals/AccountAutocompleteModal.tsx | 5 ++--- .../src/components/modals/CategoryAutocompleteModal.tsx | 5 ++--- packages/desktop-client/src/components/modals/EditField.jsx | 5 ++--- .../src/components/modals/PayeeAutocompleteModal.tsx | 3 +-- packages/desktop-client/src/style/themes/dark.ts | 3 +-- packages/desktop-client/src/style/themes/development.ts | 3 +-- packages/desktop-client/src/style/themes/light.ts | 3 +-- packages/desktop-client/src/style/themes/midnight.ts | 3 +-- 10 files changed, 14 insertions(+), 22 deletions(-) diff --git a/packages/desktop-client/src/components/MobileWebMessage.tsx b/packages/desktop-client/src/components/MobileWebMessage.tsx index c54da6eedf1..8d73f22d0fd 100644 --- a/packages/desktop-client/src/components/MobileWebMessage.tsx +++ b/packages/desktop-client/src/components/MobileWebMessage.tsx @@ -50,8 +50,8 @@ export function MobileWebMessage() { bottom: 0, left: 0, right: 0, - backgroundColor: theme.mobileModalBackground, - color: theme.mobileModalText, + backgroundColor: theme.menuAutoCompleteBackground, + color: theme.modalText, padding: 10, margin: 10, borderRadius: 6, diff --git a/packages/desktop-client/src/components/mobile/transactions/Option.jsx b/packages/desktop-client/src/components/mobile/transactions/Option.jsx index 8fc46836ee0..f8711105cb0 100644 --- a/packages/desktop-client/src/components/mobile/transactions/Option.jsx +++ b/packages/desktop-client/src/components/mobile/transactions/Option.jsx @@ -22,7 +22,7 @@ export function Option({ isLast, item, state }) { background: isSelected ? theme.tableRowBackgroundHighlight : theme.tableBackground, - color: isSelected ? theme.mobileModalText : null, + color: isSelected ? theme.tableText : null, outline: isFocusVisible ? '2px solid orange' : 'none', ...(!isLast && { borderBottom: `1px solid ${theme.tableBorder}` }), }} diff --git a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx index ef4a143928d..59fae73cb28 100644 --- a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx @@ -43,8 +43,7 @@ export function AccountAutocompleteModal({ height: isNarrowWidth ? '85vh' : 275, padding: '15px 10px', borderRadius: '6px', - backgroundColor: theme.mobileModalBackground, - color: theme.mobileModalText, + backgroundColor: theme.menuAutoCompleteBackground, }} > {() => ( @@ -54,7 +53,7 @@ export function AccountAutocompleteModal({ title="Account" style={{ alignSelf: 'center', - color: theme.mobileModalText, + color: theme.modalText, marginBottom: 10, }} /> diff --git a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx index 0eb043b95c8..51a66395959 100644 --- a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx @@ -44,8 +44,7 @@ export function CategoryAutocompleteModal({ height: isNarrowWidth ? '85vh' : 275, padding: '15px 10px', borderRadius: '6px', - backgroundColor: theme.mobileModalBackground, - color: theme.mobileModalText, + backgroundColor: theme.menuAutoCompleteBackground, }} > {() => ( @@ -55,7 +54,7 @@ export function CategoryAutocompleteModal({ title="Category" style={{ alignSelf: 'center', - color: theme.mobileModalText, + color: theme.modalText, marginBottom: 10, }} /> diff --git a/packages/desktop-client/src/components/modals/EditField.jsx b/packages/desktop-client/src/components/modals/EditField.jsx index a4822faf32f..641c186391c 100644 --- a/packages/desktop-client/src/components/modals/EditField.jsx +++ b/packages/desktop-client/src/components/modals/EditField.jsx @@ -279,8 +279,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) { borderRadius: '6px', ...(minWidth && { minWidth }), ...(!isNarrowWidth && { - backgroundColor: theme.mobileModalBackground, - color: theme.mobileModalText, + backgroundColor: theme.menuAutoCompleteBackground, }), }} > @@ -291,7 +290,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) { title={label} style={{ alignSelf: 'center', - color: theme.mobileModalText, + color: theme.modalText, marginBottom: 10, }} /> diff --git a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx index 17b9390ddc6..4873d42a490 100644 --- a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx @@ -46,8 +46,7 @@ export function PayeeAutocompleteModal({ height: isNarrowWidth ? '85vh' : 275, padding: '15px 10px', borderRadius: '6px', - backgroundColor: theme.mobileModalBackground, - color: theme.mobileModalText, + backgroundColor: theme.menuAutoCompleteBackground, }} > {() => ( diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index 45e8dca039a..b7b5831d9b3 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/packages/desktop-client/src/style/themes/dark.ts @@ -63,6 +63,7 @@ export const menuAutoCompleteText = colorPalette.navy200; export const menuAutoCompleteTextHeader = colorPalette.purple200; export const menuAutoCompleteItemText = menuItemText; +export const modalText = colorPalette.white; export const modalBackground = colorPalette.gray800; export const modalBorder = colorPalette.navy600; export const mobileHeaderBackground = colorPalette.purple800; @@ -75,8 +76,6 @@ export const mobileNavItem = colorPalette.navy150; export const mobileNavItemSelected = colorPalette.purple400; export const mobileAccountShadow = cardShadow; export const mobileAccountText = colorPalette.blue800; -export const mobileModalBackground = colorPalette.navy900; -export const mobileModalText = colorPalette.white; // Mobile view themes (for the top bar) export const mobileViewTheme = mobileHeaderBackground; diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts index e90f8de7395..46cd0fa4401 100644 --- a/packages/desktop-client/src/style/themes/development.ts +++ b/packages/desktop-client/src/style/themes/development.ts @@ -63,6 +63,7 @@ export const menuAutoCompleteText = colorPalette.white; export const menuAutoCompleteTextHeader = colorPalette.orange150; export const menuAutoCompleteItemText = menuAutoCompleteText; +export const modalText = colorPalette.white; export const modalBackground = colorPalette.white; export const modalBorder = colorPalette.white; export const mobileHeaderBackground = colorPalette.purple400; @@ -75,8 +76,6 @@ export const mobileNavItem = colorPalette.gray300; export const mobileNavItemSelected = colorPalette.purple500; export const mobileAccountShadow = colorPalette.navy300; export const mobileAccountText = colorPalette.blue800; -export const mobileModalBackground = colorPalette.navy900; -export const mobileModalText = colorPalette.white; // Mobile view themes (for the top bar) export const mobileViewTheme = mobileHeaderBackground; diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts index 1696f5fd0f0..c0a3c4da424 100644 --- a/packages/desktop-client/src/style/themes/light.ts +++ b/packages/desktop-client/src/style/themes/light.ts @@ -65,6 +65,7 @@ export const menuAutoCompleteTextHeader = colorPalette.orange150; export const menuAutoCompleteItemTextHover = menuAutoCompleteText; export const menuAutoCompleteItemText = menuAutoCompleteText; +export const modalText = colorPalette.white; export const modalBackground = colorPalette.white; export const modalBorder = colorPalette.white; export const mobileHeaderBackground = colorPalette.purple400; @@ -77,8 +78,6 @@ export const mobileNavItem = colorPalette.gray300; export const mobileNavItemSelected = colorPalette.purple500; export const mobileAccountShadow = colorPalette.navy300; export const mobileAccountText = colorPalette.blue800; -export const mobileModalBackground = colorPalette.navy900; -export const mobileModalText = colorPalette.white; // Mobile view themes (for the top bar) export const mobileViewTheme = mobileHeaderBackground; diff --git a/packages/desktop-client/src/style/themes/midnight.ts b/packages/desktop-client/src/style/themes/midnight.ts index 1d07595a9c2..2adeacc4435 100644 --- a/packages/desktop-client/src/style/themes/midnight.ts +++ b/packages/desktop-client/src/style/themes/midnight.ts @@ -64,6 +64,7 @@ export const menuAutoCompleteTextHover = colorPalette.green900; export const menuAutoCompleteTextHeader = colorPalette.purple200; export const menuAutoCompleteItemTextHover = colorPalette.gray700; export const menuAutoCompleteItemText = menuItemText; +export const modalText = colorPalette.white; export const modalBackground = colorPalette.gray700; export const modalBorder = colorPalette.gray200; export const mobileHeaderBackground = colorPalette.gray900; @@ -76,8 +77,6 @@ export const mobileNavItem = colorPalette.gray150; export const mobileNavItemSelected = colorPalette.purple200; export const mobileAccountShadow = cardShadow; export const mobileAccountText = colorPalette.blue800; -export const mobileModalBackground = menuAutoCompleteBackground; -export const mobileModalText = colorPalette.white; // Mobile view themes (for the top bar) export const mobileViewTheme = mobileHeaderBackground; From c811c0156c325ddf506942440ab3762cf0c1bd04 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Wed, 10 Apr 2024 12:09:30 -0700 Subject: [PATCH 4/8] Color updates --- packages/desktop-client/src/components/MobileWebMessage.tsx | 2 +- .../src/components/modals/AccountAutocompleteModal.tsx | 5 ++++- .../src/components/modals/CategoryAutocompleteModal.tsx | 5 ++++- packages/desktop-client/src/components/modals/EditField.jsx | 6 ++---- .../src/components/modals/PayeeAutocompleteModal.tsx | 3 +++ packages/desktop-client/src/style/themes/dark.ts | 1 - packages/desktop-client/src/style/themes/development.ts | 1 - packages/desktop-client/src/style/themes/light.ts | 1 - packages/desktop-client/src/style/themes/midnight.ts | 1 - 9 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/desktop-client/src/components/MobileWebMessage.tsx b/packages/desktop-client/src/components/MobileWebMessage.tsx index 8d73f22d0fd..ae4b17ebaac 100644 --- a/packages/desktop-client/src/components/MobileWebMessage.tsx +++ b/packages/desktop-client/src/components/MobileWebMessage.tsx @@ -51,7 +51,7 @@ export function MobileWebMessage() { left: 0, right: 0, backgroundColor: theme.menuAutoCompleteBackground, - color: theme.modalText, + color: theme.menuAutoCompleteText, padding: 10, margin: 10, borderRadius: 6, diff --git a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx index 59fae73cb28..3db3104f884 100644 --- a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx @@ -32,6 +32,9 @@ export function AccountAutocompleteModal({ return ( diff --git a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx index 51a66395959..886bd221a68 100644 --- a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx @@ -33,6 +33,9 @@ export function CategoryAutocompleteModal({ return ( diff --git a/packages/desktop-client/src/components/modals/EditField.jsx b/packages/desktop-client/src/components/modals/EditField.jsx index 641c186391c..4d0b06465cd 100644 --- a/packages/desktop-client/src/components/modals/EditField.jsx +++ b/packages/desktop-client/src/components/modals/EditField.jsx @@ -278,9 +278,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) { padding: '15px 10px', borderRadius: '6px', ...(minWidth && { minWidth }), - ...(!isNarrowWidth && { - backgroundColor: theme.menuAutoCompleteBackground, - }), + backgroundColor: theme.menuAutoCompleteBackground, }} > {() => ( @@ -290,7 +288,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) { title={label} style={{ alignSelf: 'center', - color: theme.modalText, + color: theme.menuAutoCompleteText, marginBottom: 10, }} /> diff --git a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx index 4873d42a490..64a4e25115d 100644 --- a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx @@ -35,6 +35,9 @@ export function PayeeAutocompleteModal({ return ( Date: Thu, 11 Apr 2024 10:57:27 -0700 Subject: [PATCH 5/8] Update close button --- .../src/components/FatalError.tsx | 2 +- .../src/components/common/Modal.tsx | 37 +++++++++++++------ .../components/gocardless/GoCardlessLink.tsx | 2 +- .../modals/AccountAutocompleteModal.tsx | 5 ++- .../modals/CategoryAutocompleteModal.tsx | 5 ++- .../modals/PayeeAutocompleteModal.tsx | 5 ++- 6 files changed, 39 insertions(+), 17 deletions(-) diff --git a/packages/desktop-client/src/components/FatalError.tsx b/packages/desktop-client/src/components/FatalError.tsx index 6613cd536a3..e8e6f45fd42 100644 --- a/packages/desktop-client/src/components/FatalError.tsx +++ b/packages/desktop-client/src/components/FatalError.tsx @@ -167,7 +167,7 @@ export function FatalError({ buttonText, error }: FatalErrorProps) { const showSimpleRender = 'type' in error && error.type === 'app-init-failure'; return ( - + >; showTitle?: boolean; - showClose?: boolean; + editableTitle?: boolean; showOverlay?: boolean; loading?: boolean; noAnimation?: boolean; @@ -52,8 +56,8 @@ export const Modal = ({ padding = 20, showHeader = true, leftHeaderContent, + CloseButton: CloseButtonComponent = CloseButton, showTitle = true, - showClose = true, showOverlay = true, loading = false, noAnimation = false, @@ -200,16 +204,7 @@ export const Modal = ({ marginLeft: !isNarrowWidth ? 5 : undefined, }} > - {showClose && ( - - )} + )} @@ -462,3 +457,21 @@ export function ModalTitle({ ); } + +type CloseButtonProps = { + onClick: ComponentProps['onClick']; + style?: CSSProperties; +}; + +export function CloseButton({ onClick, style }: CloseButtonProps) { + return ( + + ); +} diff --git a/packages/desktop-client/src/components/gocardless/GoCardlessLink.tsx b/packages/desktop-client/src/components/gocardless/GoCardlessLink.tsx index 9a3e3d65677..4a8a9e371d0 100644 --- a/packages/desktop-client/src/components/gocardless/GoCardlessLink.tsx +++ b/packages/desktop-client/src/components/gocardless/GoCardlessLink.tsx @@ -8,7 +8,7 @@ export function GoCardlessLink() { window.close(); return ( - + {() => ( Please wait... diff --git a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx index 3db3104f884..aa306fcd61a 100644 --- a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx @@ -3,7 +3,7 @@ import React, { type ComponentPropsWithoutRef } from 'react'; import { useResponsive } from '../../ResponsiveProvider'; import { theme } from '../../style'; import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete'; -import { Modal } from '../common/Modal'; +import { CloseButton, Modal } from '../common/Modal'; import { View } from '../common/View'; import { SectionLabel } from '../forms'; import { type CommonModalProps } from '../Modals'; @@ -48,6 +48,9 @@ export function AccountAutocompleteModal({ borderRadius: '6px', backgroundColor: theme.menuAutoCompleteBackground, }} + CloseButton={props => ( + + )} > {() => ( diff --git a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx index 886bd221a68..4da7baa1d7a 100644 --- a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx @@ -3,7 +3,7 @@ import React, { type ComponentPropsWithoutRef } from 'react'; import { useResponsive } from '../../ResponsiveProvider'; import { theme } from '../../style'; import { CategoryAutocomplete } from '../autocomplete/CategoryAutocomplete'; -import { Modal } from '../common/Modal'; +import { CloseButton, Modal } from '../common/Modal'; import { View } from '../common/View'; import { SectionLabel } from '../forms'; import { type CommonModalProps } from '../Modals'; @@ -49,6 +49,9 @@ export function CategoryAutocompleteModal({ borderRadius: '6px', backgroundColor: theme.menuAutoCompleteBackground, }} + CloseButton={props => ( + + )} > {() => ( diff --git a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx index 64a4e25115d..15c4dfeb3e9 100644 --- a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx @@ -5,7 +5,7 @@ import { usePayees } from '../../hooks/usePayees'; import { useResponsive } from '../../ResponsiveProvider'; import { theme } from '../../style'; import { PayeeAutocomplete } from '../autocomplete/PayeeAutocomplete'; -import { Modal } from '../common/Modal'; +import { CloseButton, Modal } from '../common/Modal'; import { type CommonModalProps } from '../Modals'; type PayeeAutocompleteModalProps = { @@ -51,6 +51,9 @@ export function PayeeAutocompleteModal({ borderRadius: '6px', backgroundColor: theme.menuAutoCompleteBackground, }} + CloseButton={props => ( + + )} > {() => ( Date: Thu, 11 Apr 2024 11:03:51 -0700 Subject: [PATCH 6/8] Fix typecheck --- packages/desktop-client/src/components/FatalError.tsx | 2 +- .../desktop-client/src/components/gocardless/GoCardlessLink.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/desktop-client/src/components/FatalError.tsx b/packages/desktop-client/src/components/FatalError.tsx index e8e6f45fd42..ec92d7546ea 100644 --- a/packages/desktop-client/src/components/FatalError.tsx +++ b/packages/desktop-client/src/components/FatalError.tsx @@ -167,7 +167,7 @@ export function FatalError({ buttonText, error }: FatalErrorProps) { const showSimpleRender = 'type' in error && error.type === 'app-init-failure'; return ( - + + {() => ( Please wait... From a1aa56e38af840d6dfe8cde3a66dffffdb8f847c Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Thu, 11 Apr 2024 11:30:50 -0700 Subject: [PATCH 7/8] Rename to ModalCloseButton --- packages/desktop-client/src/components/common/Modal.tsx | 8 ++++---- .../src/components/modals/AccountAutocompleteModal.tsx | 7 +++++-- .../src/components/modals/CategoryAutocompleteModal.tsx | 7 +++++-- .../src/components/modals/PayeeAutocompleteModal.tsx | 7 +++++-- 4 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx index 92f32d561a5..830eecb0fe4 100644 --- a/packages/desktop-client/src/components/common/Modal.tsx +++ b/packages/desktop-client/src/components/common/Modal.tsx @@ -33,7 +33,7 @@ export type ModalProps = { padding?: CSSProperties['padding']; showHeader?: boolean; leftHeaderContent?: ReactNode; - CloseButton?: ComponentType>; + CloseButton?: ComponentType>; showTitle?: boolean; editableTitle?: boolean; showOverlay?: boolean; @@ -56,7 +56,7 @@ export const Modal = ({ padding = 20, showHeader = true, leftHeaderContent, - CloseButton: CloseButtonComponent = CloseButton, + CloseButton: CloseButtonComponent = ModalCloseButton, showTitle = true, showOverlay = true, loading = false, @@ -458,12 +458,12 @@ export function ModalTitle({ ); } -type CloseButtonProps = { +type ModalCloseButtonProps = { onClick: ComponentProps['onClick']; style?: CSSProperties; }; -export function CloseButton({ onClick, style }: CloseButtonProps) { +export function ModalCloseButton({ onClick, style }: ModalCloseButtonProps) { return (