diff --git a/packages/desktop-client/src/components/FatalError.tsx b/packages/desktop-client/src/components/FatalError.tsx
index 6613cd536a358897b97e7a174901d85d97770e8e..ec92d7546ea275633739ccbaf55b842eda11056f 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 (
- <Modal isCurrent={true} showClose={false} title="Fatal Error">
+ <Modal isCurrent={true} CloseButton={undefined} title="Fatal Error">
<View
style={{
maxWidth: 500,
diff --git a/packages/desktop-client/src/components/MobileWebMessage.tsx b/packages/desktop-client/src/components/MobileWebMessage.tsx
index c54da6eedf105995c7738f3877896aef740453ce..ae4b17ebaacf3f78ea26d11fdf9bc8717208d15c 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.menuAutoCompleteText,
padding: 10,
margin: 10,
borderRadius: 6,
diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
index bc053ed99b2de88a74cf0193721133523fdaca9d..210eebaf05a456ec71b82c1e7434ac08479d9951 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 ec9b40b2b5b943d5cf210893246ce331a157feb5..419467e2a2672f4ebcf58470efcf5a1b68d159bf 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 0bdc87ba811744effbf7aad3044cc27cd3390720..2b0004faa5c7c945353a026029d3f1bfd1bfe4af 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 ae676abeebbb0a431127f3e1fc9f941640014b31..daa8294c26e0389ca1cbfa985c854cb18a14ff76 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/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
index 8435bdbedb47ac361f7b62b761a9dac461182d92..830eecb0fe49b034cd8f72751511fb2bee5954cb 100644
--- a/packages/desktop-client/src/components/common/Modal.tsx
+++ b/packages/desktop-client/src/components/common/Modal.tsx
@@ -5,6 +5,9 @@ import React, {
useLayoutEffect,
type ReactNode,
useState,
+ type ComponentProps,
+ type ComponentType,
+ type ComponentPropsWithRef,
} from 'react';
import { useHotkeysContext } from 'react-hotkeys-hook';
import ReactModal from 'react-modal';
@@ -30,8 +33,9 @@ export type ModalProps = {
padding?: CSSProperties['padding'];
showHeader?: boolean;
leftHeaderContent?: ReactNode;
+ CloseButton?: ComponentType<ComponentPropsWithRef<typeof ModalCloseButton>>;
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 = ModalCloseButton,
showTitle = true,
- showClose = true,
showOverlay = true,
loading = false,
noAnimation = false,
@@ -200,16 +204,7 @@ export const Modal = ({
marginLeft: !isNarrowWidth ? 5 : undefined,
}}
>
- {showClose && (
- <Button
- type="bare"
- onClick={onClose}
- style={{ padding: 10 }}
- aria-label="Close"
- >
- <SvgDelete width={10} style={{ color: 'inherit' }} />
- </Button>
- )}
+ <CloseButtonComponent onClick={onClose} />
</View>
</View>
)}
@@ -462,3 +457,21 @@ export function ModalTitle({
</Text>
);
}
+
+type ModalCloseButtonProps = {
+ onClick: ComponentProps<typeof Button>['onClick'];
+ style?: CSSProperties;
+};
+
+export function ModalCloseButton({ onClick, style }: ModalCloseButtonProps) {
+ return (
+ <Button
+ type="bare"
+ onClick={onClick}
+ style={{ padding: '10px 10px' }}
+ aria-label="Close"
+ >
+ <SvgDelete width={10} style={style} />
+ </Button>
+ );
+}
diff --git a/packages/desktop-client/src/components/gocardless/GoCardlessLink.tsx b/packages/desktop-client/src/components/gocardless/GoCardlessLink.tsx
index 9a3e3d65677a23eb1d02746532bc77c071cfd519..297763f0d8dae6c0c08b1a9f84cbb4d4a9170998 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 (
- <Modal isCurrent={true} showClose={false} title="Account sync">
+ <Modal isCurrent={true} CloseButton={undefined} title="Account sync">
{() => (
<View style={{ maxWidth: 500 }}>
<Paragraph>Please wait...</Paragraph>
diff --git a/packages/desktop-client/src/components/mobile/transactions/Option.jsx b/packages/desktop-client/src/components/mobile/transactions/Option.jsx
index 8fc46836ee0e0be46e155675a44a3e75bb6dd415..f8711105cb030065127d41e8e440983ee93c7e9d 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 5ec7911bef17da12c446f3f6a642fdc46e962fa2..15026d0d84da068f91c8f6ee0d7b0063ce79fa41 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 { ModalCloseButton, Modal, ModalTitle } from '../common/Modal';
import { View } from '../common/View';
import { SectionLabel } from '../forms';
import { type CommonModalProps } from '../Modals';
@@ -31,7 +31,12 @@ export function AccountAutocompleteModal({
return (
<Modal
- title="Account"
+ title={
+ <ModalTitle
+ title="Account"
+ getStyle={() => ({ color: theme.menuAutoCompleteText })}
+ />
+ }
noAnimation={!isNarrowWidth}
showHeader={isNarrowWidth}
focusAfterClose={false}
@@ -43,11 +48,14 @@ export function AccountAutocompleteModal({
height: isNarrowWidth ? '85vh' : 275,
padding: '15px 10px',
borderRadius: '6px',
- ...(!isNarrowWidth && {
- backgroundColor: theme.mobileModalBackground,
- color: theme.mobileModalText,
- }),
+ backgroundColor: theme.menuAutoCompleteBackground,
}}
+ CloseButton={props => (
+ <ModalCloseButton
+ {...props}
+ style={{ color: theme.menuAutoCompleteText }}
+ />
+ )}
>
{() => (
<View>
@@ -56,7 +64,7 @@ export function AccountAutocompleteModal({
title="Account"
style={{
alignSelf: 'center',
- color: theme.mobileModalText,
+ color: theme.menuAutoCompleteText,
marginBottom: 10,
}}
/>
diff --git a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx
index 6d5c9f9722fac4106373a278aceb70271f141bcc..9712696555e15538ff84ed4f1126af2636863618 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 { ModalCloseButton, Modal, ModalTitle } from '../common/Modal';
import { View } from '../common/View';
import { SectionLabel } from '../forms';
import { type CommonModalProps } from '../Modals';
@@ -32,7 +32,12 @@ export function CategoryAutocompleteModal({
return (
<Modal
- title="Category"
+ title={
+ <ModalTitle
+ title="Category"
+ getStyle={() => ({ color: theme.menuAutoCompleteText })}
+ />
+ }
noAnimation={!isNarrowWidth}
showHeader={isNarrowWidth}
focusAfterClose={false}
@@ -44,11 +49,14 @@ export function CategoryAutocompleteModal({
height: isNarrowWidth ? '85vh' : 275,
padding: '15px 10px',
borderRadius: '6px',
- ...(!isNarrowWidth && {
- backgroundColor: theme.mobileModalBackground,
- color: theme.mobileModalText,
- }),
+ backgroundColor: theme.menuAutoCompleteBackground,
}}
+ CloseButton={props => (
+ <ModalCloseButton
+ {...props}
+ style={{ color: theme.menuAutoCompleteText }}
+ />
+ )}
>
{() => (
<View>
@@ -57,7 +65,7 @@ export function CategoryAutocompleteModal({
title="Category"
style={{
alignSelf: 'center',
- color: theme.mobileModalText,
+ color: theme.menuAutoCompleteText,
marginBottom: 10,
}}
/>
diff --git a/packages/desktop-client/src/components/modals/EditField.jsx b/packages/desktop-client/src/components/modals/EditField.jsx
index a4822faf32fbc2dfa5f1f5b624d993b46659cd18..4d0b06465cd8095d3da0abf8fb2a525a3441fd13 100644
--- a/packages/desktop-client/src/components/modals/EditField.jsx
+++ b/packages/desktop-client/src/components/modals/EditField.jsx
@@ -278,10 +278,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) {
padding: '15px 10px',
borderRadius: '6px',
...(minWidth && { minWidth }),
- ...(!isNarrowWidth && {
- backgroundColor: theme.mobileModalBackground,
- color: theme.mobileModalText,
- }),
+ backgroundColor: theme.menuAutoCompleteBackground,
}}
>
{() => (
@@ -291,7 +288,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) {
title={label}
style={{
alignSelf: 'center',
- color: theme.mobileModalText,
+ 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 6eaf1a5a58b849b4d9ea879dee932e51b9a99905..3d26dc45d53ab14afc23889bbd40953bada55345 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 { ModalCloseButton, Modal, ModalTitle } from '../common/Modal';
import { type CommonModalProps } from '../Modals';
type PayeeAutocompleteModalProps = {
@@ -34,7 +34,12 @@ export function PayeeAutocompleteModal({
return (
<Modal
- title="Payee"
+ title={
+ <ModalTitle
+ title="Payee"
+ getStyle={() => ({ color: theme.menuAutoCompleteText })}
+ />
+ }
noAnimation={!isNarrowWidth}
showHeader={isNarrowWidth}
focusAfterClose={false}
@@ -46,11 +51,14 @@ export function PayeeAutocompleteModal({
height: isNarrowWidth ? '85vh' : 275,
padding: '15px 10px',
borderRadius: '6px',
- ...(!isNarrowWidth && {
- backgroundColor: theme.mobileModalBackground,
- color: theme.mobileModalText,
- }),
+ backgroundColor: theme.menuAutoCompleteBackground,
}}
+ CloseButton={props => (
+ <ModalCloseButton
+ {...props}
+ style={{ color: theme.menuAutoCompleteText }}
+ />
+ )}
>
{() => (
<PayeeAutocomplete
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 45e8dca039a266e9b1359f600b0d5f7138806729..81b756b8dc5064b85b5ca083bd27bca7bf528a2a 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -75,8 +75,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 e90f8de73951b7248d9a6ab324f8d2d4ab200c4f..c8a47c85eba59eb9fe4126dc75c4f7d44ab1303e 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -75,8 +75,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 1696f5fd0f0b4e3a65b95eb7660e57d108608153..37549803de44d628ff13ee3b761434b548dc6d80 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -77,8 +77,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 1d07595a9c2d02f3f5347aa2df59f68f60146f56..cb6a41e72714e99ccf12cf10b006628e05477e43 100644
--- a/packages/desktop-client/src/style/themes/midnight.ts
+++ b/packages/desktop-client/src/style/themes/midnight.ts
@@ -76,8 +76,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;
diff --git a/upcoming-release-notes/2577.md b/upcoming-release-notes/2577.md
new file mode 100644
index 0000000000000000000000000000000000000000..a1def19a83db97713e71d4cc2c3acdcf0c4e024e
--- /dev/null
+++ b/upcoming-release-notes/2577.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Use desktop colors for mobile autocomplete modals.