actualbudget · joel-jeremy · Apr 11, 2024 · Apr 10, 2024 · Apr 10, 2024 · Apr 10, 2024
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Use desktop colors for mobile autocomplete modals.