From 70e37c0119f4ba95ccf6549f0df4aac770f1bb8f Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 11 Apr 2024 14:33:03 -0700
Subject: [PATCH] Use desktop colors for mobile autocomplete modals (#2577)
* Use desktop colors for mobile autocomplete modals
* Release notes
* Color updates
* Color updates
* Update close button
* Fix typecheck
* Rename to ModalCloseButton
* Update ModalTitle
---
.../src/components/FatalError.tsx | 2 +-
.../src/components/MobileWebMessage.tsx | 4 +-
.../autocomplete/AccountAutocomplete.tsx | 3 ++
.../autocomplete/CategoryAutocomplete.tsx | 7 +---
.../components/autocomplete/ItemHeader.tsx | 1 -
.../autocomplete/PayeeAutocomplete.tsx | 4 --
.../src/components/common/Modal.tsx | 37 +++++++++++++------
.../components/gocardless/GoCardlessLink.tsx | 2 +-
.../components/mobile/transactions/Option.jsx | 2 +-
.../modals/AccountAutocompleteModal.tsx | 22 +++++++----
.../modals/CategoryAutocompleteModal.tsx | 22 +++++++----
.../src/components/modals/EditField.jsx | 7 +---
.../modals/PayeeAutocompleteModal.tsx | 20 +++++++---
.../desktop-client/src/style/themes/dark.ts | 2 -
.../src/style/themes/development.ts | 2 -
.../desktop-client/src/style/themes/light.ts | 2 -
.../src/style/themes/midnight.ts | 2 -
upcoming-release-notes/2577.md | 6 +++
18 files changed, 86 insertions(+), 61 deletions(-)
create mode 100644 upcoming-release-notes/2577.md
diff --git a/packages/desktop-client/src/components/FatalError.tsx b/packages/desktop-client/src/components/FatalError.tsx
index 6613cd536..ec92d7546 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 c54da6eed..ae4b17eba 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 bc053ed99..210eebaf0 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 ec9b40b2b..419467e2a 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 0bdc87ba8..2b0004faa 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 ae676abee..daa8294c2 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 8435bdbed..830eecb0f 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 9a3e3d656..297763f0d 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 8fc46836e..f8711105c 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 5ec7911be..15026d0d8 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 6d5c9f972..971269655 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 a4822faf3..4d0b06465 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 6eaf1a5a5..3d26dc45d 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 45e8dca03..81b756b8d 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 e90f8de73..c8a47c85e 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 1696f5fd0..37549803d 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 1d07595a9..cb6a41e72 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 000000000..a1def19a8
--- /dev/null
+++ b/upcoming-release-notes/2577.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Use desktop colors for mobile autocomplete modals.
--
GitLab