Update close button

actualbudget · Apr 11, 2024 · de0b24b · de0b24b
1 parent 1f7f5b2
commit de0b24b
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 17 deletions.
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={null} title="Fatal Error">
       <View
         style={{
           maxWidth: 500,

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';
@@ -32,9 +35,9 @@ export type ModalProps = {
   padding?: CSSProperties['padding'];
   showHeader?: boolean;
   leftHeaderContent?: ReactNode;
+  CloseButton?: ComponentType<ComponentPropsWithRef<typeof CloseButton>>;
   showTitle?: boolean;
   editableTitle?: boolean;
-  showClose?: boolean;
   showOverlay?: boolean;
   loading?: boolean;
   noAnimation?: boolean;
@@ -57,9 +60,9 @@ export const Modal = ({
   padding = 20,
   showHeader = true,
   leftHeaderContent,
+  CloseButton: CloseButtonComponent = CloseButton,
   showTitle = true,
   editableTitle = false,
-  showClose = true,
   showOverlay = true,
   loading = false,
   noAnimation = false,
@@ -261,16 +264,7 @@ export const Modal = ({
                   marginRight: 15,
                 }}
               >
-                {showClose && !isEditingTitle && (
-                  <Button
-                    type="bare"
-                    onClick={onClose}
-                    style={{ padding: '10px 10px' }}
-                    aria-label="Close"
-                  >
-                    <SvgDelete width={10} />
-                  </Button>
-                )}
+                {!isEditingTitle && <CloseButtonComponent onClick={onClose} />}
               </View>
             </View>
           </View>
@@ -427,3 +421,21 @@ export const ModalButtons = ({
     </View>
   );
 };
+
+type CloseButtonProps = {
+  onClick: ComponentProps<typeof Button>['onClick'];
+  style?: CSSProperties;
+};
+
+export function CloseButton({ onClick, style }: CloseButtonProps) {
+  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={null} title="Account sync">
       {() => (
         <View style={{ maxWidth: 500 }}>
           <Paragraph>Please wait...</Paragraph>

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 { 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 => (
+        <CloseButton {...props} style={{ color: theme.menuAutoCompleteText }} />
+      )}
     >
       {() => (
         <View>

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 { 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 => (
+        <CloseButton {...props} style={{ color: theme.menuAutoCompleteText }} />
+      )}
     >
       {() => (
         <View>

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 { 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 => (
+        <CloseButton {...props} style={{ color: theme.menuAutoCompleteText }} />
+      )}
     >
       {() => (
         <PayeeAutocomplete