Rename to ModalCloseButton

actualbudget · Apr 11, 2024 · b211e0f · b211e0f
1 parent 27d07b5
commit b211e0f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
@@ -35,7 +35,7 @@ export type ModalProps = {
   padding?: CSSProperties['padding'];
   showHeader?: boolean;
   leftHeaderContent?: ReactNode;
-  CloseButton?: ComponentType<ComponentPropsWithRef<typeof CloseButton>>;
+  CloseButton?: ComponentType<ComponentPropsWithRef<typeof ModalCloseButton>>;
   showTitle?: boolean;
   editableTitle?: boolean;
   showOverlay?: boolean;
@@ -60,7 +60,7 @@ export const Modal = ({
   padding = 20,
   showHeader = true,
   leftHeaderContent,
-  CloseButton: CloseButtonComponent = CloseButton,
+  CloseButton: CloseButtonComponent = ModalCloseButton,
   showTitle = true,
   editableTitle = false,
   showOverlay = true,
@@ -422,12 +422,12 @@ export const ModalButtons = ({
   );
 };
 
-type CloseButtonProps = {
+type ModalCloseButtonProps = {
   onClick: ComponentProps<typeof Button>['onClick'];
   style?: CSSProperties;
 };
 
-export function CloseButton({ onClick, style }: CloseButtonProps) {
+export function ModalCloseButton({ onClick, style }: ModalCloseButtonProps) {
   return (
     <Button
       type="bare"

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 { CloseButton, Modal } from '../common/Modal';
+import { ModalCloseButton, Modal } from '../common/Modal';
 import { View } from '../common/View';
 import { SectionLabel } from '../forms';
 import { type CommonModalProps } from '../Modals';
@@ -49,7 +49,10 @@ export function AccountAutocompleteModal({
         backgroundColor: theme.menuAutoCompleteBackground,
       }}
       CloseButton={props => (
-        <CloseButton {...props} style={{ color: theme.menuAutoCompleteText }} />
+        <ModalCloseButton
+          {...props}
+          style={{ color: theme.menuAutoCompleteText }}
+        />
       )}
     >
       {() => (

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 { CloseButton, Modal } from '../common/Modal';
+import { ModalCloseButton, Modal } from '../common/Modal';
 import { View } from '../common/View';
 import { SectionLabel } from '../forms';
 import { type CommonModalProps } from '../Modals';
@@ -50,7 +50,10 @@ export function CategoryAutocompleteModal({
         backgroundColor: theme.menuAutoCompleteBackground,
       }}
       CloseButton={props => (
-        <CloseButton {...props} style={{ color: theme.menuAutoCompleteText }} />
+        <ModalCloseButton
+          {...props}
+          style={{ color: theme.menuAutoCompleteText }}
+        />
       )}
     >
       {() => (

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 { CloseButton, Modal } from '../common/Modal';
+import { ModalCloseButton, Modal } from '../common/Modal';
 import { type CommonModalProps } from '../Modals';
 
 type PayeeAutocompleteModalProps = {
@@ -52,7 +52,10 @@ export function PayeeAutocompleteModal({
         backgroundColor: theme.menuAutoCompleteBackground,
       }}
       CloseButton={props => (
-        <CloseButton {...props} style={{ color: theme.menuAutoCompleteText }} />
+        <ModalCloseButton
+          {...props}
+          style={{ color: theme.menuAutoCompleteText }}
+        />
       )}
     >
       {() => (