fix(modals): change some close button text to cancel

Author: OliverDudgeon

components/WarningDeleteButton.tsx

@@ -79,6 +79,7 @@ export const WarningDeleteButton = ({
       {tooltipText === undefined ? content : <Tooltip title={tooltipText}>{content}</Tooltip>}
 
       <ModalWrapper
+        closeText="Cancel"
         id={modalId}
         open={open}
         submitDisabled={isDeleting}

components/modals/FormikModalWrapper.tsx

@@ -17,6 +17,10 @@ export interface FormikModalWrapperProps extends BaseModalWrapperProps {
    * Text displayed in the submit button
    */
   submitText: string;
+  /**
+   * Text displayed in the close button. Defaults to "Close"
+   */
+  closeText?: string;
   /**
    * Whether the modal is open
    */
@@ -43,6 +47,7 @@ export const FormikModalWrapper = <Values extends FormikValues>({
   id,
   title,
   submitText,
+  closeText,
   open,
   onClose,
   children,
@@ -54,6 +59,7 @@ export const FormikModalWrapper = <Values extends FormikValues>({
       {({ submitForm, isSubmitting, isValid, ...rest }) => (
         <Form style={{ display: "inline" }}>
           <ModalWrapper
+            closeText={closeText}
             DialogProps={DialogProps}
             id={id}
             open={open}

components/modals/ModalWrapper.tsx

@@ -30,6 +30,10 @@ export interface ModalWrapperProps extends BaseModalWrapperProps {
    * Whether the primary action should be in a disabled state.
    */
   submitDisabled?: boolean;
+  /**
+   * Text to be displayed as the close text button. Defaylt is "Close"
+   */
+  closeText?: string;
 }
 
 /**
@@ -40,6 +44,7 @@ export const ModalWrapper: React.FC<ModalWrapperProps> = ({
   title,
   submitText,
   submitDisabled,
+  closeText = "Close",
   children,
   open,
   onClose,
@@ -75,7 +80,7 @@ export const ModalWrapper: React.FC<ModalWrapperProps> = ({
       </DialogTitle>
       <DialogContent>{children}</DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>Close</Button>
+        <Button onClick={onClose}>{closeText}</Button>
         {!!onSubmit && (
           <Button color="primary" disabled={submitDisabled} onClick={onSubmit}>
             {submitText}

components/projects/CreateProject/CreateProjectForm.tsx

@@ -253,7 +253,7 @@ export const CreateProjectForm = ({
   };
 
   return modal ? (
-    <FormikModalWrapper {...modal} {...commonProps}>
+    <FormikModalWrapper {...modal} {...commonProps} closeText="Cancel">
       {children}
     </FormikModalWrapper>
   ) : (