Consistent usage of the modal header close button (#28681)

* Convert OLModal to named exports only

* Make closeButton the default for OLModalHeader

* Set `closeButton={false}` for modal that is not dismissible

* Fix duplicated imports

* Remove another unnecessary `closeButton` prop

* Fix import

---------

Co-authored-by: Antoine Clausse <antoine.clausse@overleaf.com>
GitOrigin-RevId: ddd7be6e59a966ac634683d2494d6e9d2c3732e6

services/web/frontend/js/features/clone-project-modal/components/clone-project-modal-content.tsx

@@ -89,7 +89,7 @@ export default function CloneProjectModalContent({
 
   return (
     <>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('copy_project')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/clone-project-modal/components/clone-project-modal.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useState } from 'react'
 import CloneProjectModalContent from './clone-project-modal-content'
-import OLModal from '@/shared/components/ol/ol-modal'
+import { OLModal } from '@/shared/components/ol/ol-modal'
 import { ClonedProject } from '../../../../../types/project/dashboard/api'
 import { Tag } from '../../../../../app/src/Features/Tags/types'
 

services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx

@@ -52,7 +52,7 @@ export default function DictionaryModalContent({
 
   return (
     <>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('edit_dictionary')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/dictionary/components/dictionary-modal.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import DictionaryModalContent from './dictionary-modal-content'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
-import OLModal from '@/shared/components/ol/ol-modal'
+import { OLModal } from '@/shared/components/ol/ol-modal'
 
 type DictionaryModalProps = {
   show?: boolean

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.tsx

@@ -3,7 +3,8 @@ import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 import FileTreeCreateFormProvider from '../../contexts/file-tree-create-form'
 import FileTreeModalCreateFileBody from '../file-tree-create/file-tree-modal-create-file-body'
 import FileTreeModalCreateFileFooter from '../file-tree-create/file-tree-modal-create-file-footer'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -22,7 +23,7 @@ export default function FileTreeModalCreateFile() {
   return (
     <FileTreeCreateFormProvider>
       <OLModal size="lg" onHide={cancel} show>
-        <OLModalHeader closeButton>
+        <OLModalHeader>
           <OLModalTitle>{t('add_files')}</OLModalTitle>
         </OLModalHeader>
 

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.tsx

@@ -4,7 +4,8 @@ import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 import { DuplicateFilenameError } from '../../errors'
 import { isCleanFilename } from '../../util/safe-path'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.tsx

@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next'
 
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-error.tsx

@@ -8,7 +8,8 @@ import {
   DuplicateFilenameError,
   DuplicateFilenameMoveError,
 } from '../../errors'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/group-management/components/members-table/offboard-managed-user-modal.tsx

@@ -5,7 +5,8 @@ import { useTranslation } from 'react-i18next'
 import { useLocation } from '@/shared/hooks/use-location'
 import { FetchError, postJSON } from '@/infrastructure/fetch-json'
 import { debugConsole } from '@/utils/debugging'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/group-management/components/members-table/remove-managed-user-modal.tsx

@@ -5,7 +5,8 @@ import { useTranslation, Trans } from 'react-i18next'
 import { useLocation } from '@/shared/hooks/use-location'
 import { FetchError, postJSON } from '@/infrastructure/fetch-json'
 import { debugConsole } from '@/utils/debugging'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/group-management/components/members-table/unlink-user-modal.tsx

@@ -8,7 +8,8 @@ import NotificationScrolledTo from '@/shared/components/notification-scrolled-to
 import { debugConsole } from '@/utils/debugging'
 import { GroupUserAlert } from '../../utils/types'
 import { useGroupMembersContext } from '../../context/group-members-context'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/history/components/change-list/add-label-modal.tsx

@@ -3,7 +3,8 @@ import { useEffect, useState } from 'react'
 import OLForm from '@/shared/components/ol/ol-form'
 import OLFormGroup from '@/shared/components/ol/ol-form-group'
 import ModalError from './modal-error'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/history/components/diff-view/modals/restore-file-confirm-modal.tsx

@@ -1,6 +1,7 @@
 import { formatTime } from '@/features/utils/format-date'
 import { useMemo } from 'react'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -28,7 +29,7 @@ export function RestoreFileConfirmModal({
 
   return (
     <OLModal show={show} onHide={onHide}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('restore_file_confirmation_title')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/history/components/diff-view/modals/restore-file-error-modal.tsx

@@ -1,4 +1,5 @@
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -16,7 +17,7 @@ export function RestoreFileErrorModal({
 
   return (
     <OLModal show onHide={resetErrorBoundary}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('restore_file_error_title')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>{t('restore_file_error_message')}</OLModalBody>

services/web/frontend/js/features/history/components/diff-view/modals/restore-project-error-modal.tsx

@@ -1,4 +1,5 @@
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -16,7 +17,7 @@ export function RestoreProjectErrorModal({
 
   return (
     <OLModal show onHide={resetErrorBoundary}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>
           {t('an_error_occured_while_restoring_project')}
         </OLModalTitle>

services/web/frontend/js/features/history/components/diff-view/modals/restore-project-modal.tsx

@@ -1,4 +1,5 @@
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.tsx

@@ -1,6 +1,7 @@
 import { Trans, useTranslation } from 'react-i18next'
 import HotkeysModalBottomText from './hotkeys-modal-bottom-text'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -29,7 +30,7 @@ export default function HotkeysModal({
 
   return (
     <OLModal size="lg" onHide={handleHide} show={show} animation={animation}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('hotkeys')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/ide-react/components/modals/force-disconnected.tsx

@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { memo, useEffect, useState } from 'react'
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalHeader,
   OLModalTitle,
@@ -55,7 +56,7 @@ function ForceDisconnected() {
       backdrop={false}
       keyboard={false}
     >
-      <OLModalHeader>
+      <OLModalHeader closeButton={false}>
         <OLModalTitle>{t('please_wait')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/ide-react/components/modals/generic-confirm-modal.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { memo } from 'react'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -32,7 +33,7 @@ function GenericConfirmModal({
 
   return (
     <OLModal {...modalProps}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{title}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/ide-react/components/modals/generic-message-modal.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { memo } from 'react'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -25,7 +26,7 @@ function GenericMessageModal({
 
   return (
     <OLModal {...modalProps}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{title}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx

@@ -2,7 +2,8 @@ import { Trans, useTranslation } from 'react-i18next'
 import { memo, useState } from 'react'
 import { useLocation } from '@/shared/hooks/use-location'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -36,7 +37,7 @@ function OutOfSyncModal({ editorContent, show, onHide }: OutOfSyncModalProps) {
       backdrop={false}
       keyboard={false}
     >
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('out_of_sync')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody className="modal-body-share">

services/web/frontend/js/features/ide-redesign/components/settings/settings-modal.tsx

@@ -1,4 +1,5 @@
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalHeader,
   OLModalTitle,
@@ -37,7 +38,7 @@ const SettingsModal = () => {
           : undefined
       }
     >
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('settings')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody className="ide-settings-modal-body">

services/web/frontend/js/features/ide-redesign/components/switcher-modal/beta-modal.tsx

@@ -1,6 +1,7 @@
 import { useIdeRedesignSwitcherContext } from '@/features/ide-react/context/ide-redesign-switcher-context'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -50,7 +51,7 @@ export const IdeRedesignIntroModal: FC = () => {
       onHide={dismissTutorial}
       className="ide-redesign-switcher-modal"
     >
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>
           {t('the_new_overleaf_editor_try_now_in_beta')}
         </OLModalTitle>
@@ -99,7 +100,7 @@ export const IdeRedesignSwitcherModal = () => {
       onHide={onHide}
       className="ide-redesign-switcher-modal"
     >
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>
           {enabled
             ? t('beta_program_the_new_overleaf_editor')

services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx

@@ -9,7 +9,8 @@ import { createTag } from '../../util/api'
 import { MAX_TAG_LENGTH } from '../../util/tag'
 import { ColorPicker } from '../color-picker/color-picker'
 import { debugConsole } from '@/utils/debugging'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -80,7 +81,7 @@ export default function CreateTagModal({
 
   return (
     <OLModal show animation onHide={onClose} id={id} backdrop="static">
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('create_new_tag')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/project-list/components/modals/delete-tag-modal.tsx

@@ -4,7 +4,8 @@ import { Tag } from '../../../../../../app/src/Features/Tags/types'
 import useAsync from '../../../../shared/hooks/use-async'
 import { deleteTag } from '../../util/api'
 import { debugConsole } from '@/utils/debugging'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -46,7 +47,7 @@ export default function DeleteTagModal({
 
   return (
     <OLModal show animation onHide={onClose} id={id} backdrop="static">
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('delete_tag')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx

@@ -9,7 +9,8 @@ import { editTag } from '../../util/api'
 import { getTagColor, MAX_TAG_LENGTH } from '../../util/tag'
 import { ColorPicker } from '../color-picker/color-picker'
 import { debugConsole } from '@/utils/debugging'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -88,7 +89,7 @@ export function EditTagModal({ id, tag, onEdit, onClose }: EditTagModalProps) {
 
   return (
     <OLModal show animation onHide={onClose} id={id} backdrop="static">
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('edit_tag')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/project-list/components/modals/manage-tag-modal.tsx

@@ -8,7 +8,8 @@ import { Tag } from '../../../../../../app/src/Features/Tags/types'
 import { getTagColor } from '../../util/tag'
 import { ColorPicker } from '../color-picker/color-picker'
 import { debugConsole } from '@/utils/debugging'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -89,7 +90,7 @@ export function ManageTagModal({
 
   return (
     <OLModal show animation onHide={onClose} id={id} backdrop="static">
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('edit_tag')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/project-list/components/modals/projects-action-modal.tsx

@@ -7,7 +7,8 @@ import * as eventTracking from '../../../../infrastructure/event-tracking'
 import { isSmallDevice } from '../../../../infrastructure/event-tracking'
 import Notification from '@/shared/components/notification'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -79,7 +80,7 @@ function ProjectsActionModal({
       id="action-project-modal"
       backdrop="static"
     >
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{title}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/project-list/components/modals/rename-project-modal.tsx

@@ -16,7 +16,8 @@ import { getUserFacingMessage } from '../../../../infrastructure/fetch-json'
 import { debugConsole } from '@/utils/debugging'
 import { isSmallDevice } from '../../../../infrastructure/event-tracking'
 import Notification from '@/shared/components/notification'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -104,7 +105,7 @@ function RenameProjectModal({
       id="rename-project-modal"
       backdrop="static"
     >
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('rename_project')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/project-list/components/new-project-button/blank-project-modal.tsx

@@ -1,5 +1,5 @@
 import ModalContentNewProjectForm from './modal-content-new-project-form'
-import OLModal from '@/shared/components/ol/ol-modal'
+import { OLModal } from '@/shared/components/ol/ol-modal'
 
 type BlankProjectModalProps = {
   onHide: () => void

services/web/frontend/js/features/project-list/components/new-project-button/example-project-modal.tsx

@@ -1,4 +1,4 @@
-import OLModal from '@/shared/components/ol/ol-modal'
+import { OLModal } from '@/shared/components/ol/ol-modal'
 import ModalContentNewProjectForm from './modal-content-new-project-form'
 
 type ExampleProjectModalProps = {

services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx

@@ -74,7 +74,7 @@ function ModalContentNewProjectForm({ onCancel, template = 'none' }: Props) {
 
   return (
     <>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('new_project')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/project-list/components/new-project-button/upload-project-modal.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -94,7 +95,7 @@ function UploadProjectModal({ onHide, openProject }: UploadProjectModalProps) {
       id="upload-project-modal"
       backdrop="static"
     >
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle as="h3">{t('upload_zipped_project')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/project-list/components/notifications/ads/brl-banner.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import bannerImage from '../../../images/brl-banner.png'
 import usePersistedState from '../../../../../shared/hooks/use-persisted-state'
 import * as eventTracking from '../../../../../infrastructure/event-tracking'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -90,7 +91,7 @@ export default function BRLBanner() {
 
   return (
     <OLModal show={showModal} onHide={handleHide}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('latam_discount_modal_title')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/project-list/components/notifications/ads/inr-banner.tsx

@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next'
 import bannerImage from '../../../images/inr-banner.png'
 import usePersistedState from '../../../../../shared/hooks/use-persisted-state'
 import * as eventTracking from '../../../../../infrastructure/event-tracking'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -88,7 +89,7 @@ export default function INRBanner() {
 
   return (
     <OLModal show={showModal} onHide={handleHide} backdrop="static">
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('inr_discount_modal_title')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/project-list/components/notifications/ads/latam-banner.tsx

@@ -5,7 +5,8 @@ import clpBannerImage from '../../../images/clp-banner.png'
 import penBannerImage from '../../../images/pen-banner.png'
 import usePersistedState from '../../../../../shared/hooks/use-persisted-state'
 import * as eventTracking from '../../../../../infrastructure/event-tracking'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -133,7 +134,7 @@ export default function LATAMBanner() {
 
   return (
     <OLModal show={showModal} onHide={handleHide} backdrop="static">
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('latam_discount_modal_title')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/compile-and-download-project-pdf-button.tsx

@@ -8,7 +8,8 @@ import { postJSON } from '../../../../../../infrastructure/fetch-json'
 import { isSmallDevice } from '../../../../../../infrastructure/event-tracking'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -120,7 +121,7 @@ function CompileErrorModal({
   return (
     <>
       <OLModal show onHide={handleClose}>
-        <OLModalHeader closeButton>
+        <OLModalHeader>
           <OLModalTitle>
             {project.name}: {t('pdf_unavailable_for_download')}
           </OLModalTitle>

services/web/frontend/js/features/review-panel/components/review-panel-delete-comment-modal.tsx

@@ -1,7 +1,8 @@
 import { FC, memo } from 'react'
 import OLButton from '@/shared/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/review-panel/components/upgrade-track-changes-modal.tsx

@@ -5,7 +5,8 @@ import teaserVideo from '../images/teaser-track-changes.mp4'
 import teaserImage from '../images/teaser-track-changes.gif'
 import { startFreeTrial, upgradePlan } from '@/main/account-upgrade'
 import { memo } from 'react'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -31,7 +32,7 @@ function UpgradeTrackChangesModal({
 
   return (
     <OLModal show={show} onHide={() => setShow(false)}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('upgrade_to_review')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody className="upgrade-track-changes-modal">

services/web/frontend/js/features/settings/components/emails/actions/make-primary/confirmation-modal.tsx

@@ -1,7 +1,8 @@
 import { useTranslation, Trans } from 'react-i18next'
 import { MergeAndOverride } from '../../../../../../../../types/utils'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -32,7 +33,7 @@ function ConfirmationModal({
 
   return (
     <OLModal show={show} onHide={onHide}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('confirm_primary_email_change')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody className="pb-0">

services/web/frontend/js/features/settings/components/emails/resend-confirmation-code-modal.tsx

@@ -4,7 +4,8 @@ import { FetchError, postJSON } from '@/infrastructure/fetch-json'
 import useAsync from '../../../../shared/hooks/use-async'
 import { UserEmailData } from '../../../../../../types/user-email'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -56,7 +57,7 @@ function ResendConfirmationCodeModal({
           id="action-project-modal"
           backdrop="static"
         >
-          <OLModalHeader closeButton>
+          <OLModalHeader>
             <OLModalTitle>{t('confirm_your_email')}</OLModalTitle>
           </OLModalHeader>
 

services/web/frontend/js/features/settings/components/leave/modal-content.tsx

@@ -71,7 +71,7 @@ function LeaveModalContent({
 
   return (
     <>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('delete_account')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/settings/components/leave/modal.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react'
 import LeaveModalContent from './modal-content'
-import OLModal from '@/shared/components/ol/ol-modal'
+import { OLModal } from '@/shared/components/ol/ol-modal'
 
 type LeaveModalProps = {
   isOpen: boolean

services/web/frontend/js/features/settings/components/linking/integration-widget.tsx

@@ -4,7 +4,8 @@ import OLBadge from '@/shared/components/ol/ol-badge'
 import getMeta from '../../../../utils/meta'
 import { sendMB } from '../../../../infrastructure/event-tracking'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -208,7 +209,7 @@ function UnlinkConfirmationModal({
 
   return (
     <OLModal show={show} onHide={handleHide}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{title}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/settings/components/linking/sso-widget.tsx

@@ -6,7 +6,8 @@ import GoogleLogo from '../../../../shared/svgs/google-logo'
 import OrcidLogo from '../../../../shared/svgs/orcid-logo'
 import LinkingStatus from './status'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -168,7 +169,7 @@ function UnlinkConfirmModal({
 
   return (
     <OLModal show={show} onHide={handleHide}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>
           {t('unlink_provider_account_title', { provider: title })}
         </OLModalTitle>

services/web/frontend/js/features/share-project-modal/components/editor-over-limit-modal-content.tsx

@@ -20,7 +20,7 @@ export default function EditorOverLimitModalContent({
 
   return (
     <>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('do_you_need_edit_access')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/share-project-modal/components/editor-over-limit-modal.tsx

@@ -5,7 +5,7 @@ import { useProjectContext } from '@/shared/context/project-context'
 import { useEditorContext } from '@/shared/context/editor-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 import { sendMB } from '@/infrastructure/event-tracking'
-import OLModal from '@/shared/components/ol/ol-modal'
+import { OLModal } from '@/shared/components/ol/ol-modal'
 
 const EditorOverLimitModal = () => {
   const [show, setShow] = useState(false)

services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx

@@ -3,7 +3,8 @@ import { useEditorContext } from '@/shared/context/editor-context'
 import { lazy, Suspense } from 'react'
 import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
 import ClickableElementEnhancer from '@/shared/components/clickable-element-enhancer'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -43,7 +44,7 @@ export default function ShareProjectModalContent({
 
   return (
     <OLModal show={show} onHide={cancel} animation={animation}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('share_project')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx

@@ -3,7 +3,8 @@ import { Trans, useTranslation } from 'react-i18next'
 import { transferProjectOwnership } from '../utils/api'
 import { useProjectContext } from '@/shared/context/project-context'
 import { useLocation } from '@/shared/hooks/use-location'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -45,7 +46,7 @@ export default function TransferOwnershipModal({
 
   return (
     <OLModal show onHide={cancel}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('change_project_owner')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/share-project-modal/components/view-only-access-modal-content.tsx

@@ -19,7 +19,7 @@ export default function ViewOnlyAccessModalContent({
 
   return (
     <>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('view_only_access')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/share-project-modal/components/view-only-access-modal.tsx

@@ -5,7 +5,7 @@ import { useProjectContext } from '@/shared/context/project-context'
 import { useEditorContext } from '@/shared/context/editor-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 import { sendMB } from '@/infrastructure/event-tracking'
-import OLModal from '@/shared/components/ol/ol-modal'
+import { OLModal } from '@/shared/components/ol/ol-modal'
 
 const ViewOnlyAccessModal = () => {
   const [show, setShow] = useState(false)

services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal.tsx

@@ -1,4 +1,5 @@
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -273,7 +274,7 @@ const FigureModalContent = () => {
   }
   return (
     <OLModal onHide={hide} className="figure-modal" show>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>
           {helpShown
             ? t('help')

services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx

@@ -5,7 +5,8 @@ import {
   DropdownToggle,
 } from '@/shared/components/dropdown/dropdown-menu'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/source-editor/components/table-generator/help-modal.tsx

@@ -1,4 +1,5 @@
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -19,7 +20,7 @@ export const TableGeneratorHelpModal = () => {
       onHide={hideHelp}
       className="table-generator-help-modal"
     >
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('help')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/column-width-modal/modal.tsx

@@ -16,7 +16,8 @@ import { setColumnWidth } from '../commands'
 import { UNITS, WidthSelection, WidthUnit } from './column-width'
 import { useCodeMirrorViewContext } from '../../../codemirror-context'
 import { CopyToClipboard } from '@/shared/components/copy-to-clipboard'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -137,7 +138,7 @@ const ColumnWidthModalBody = () => {
       onHide={closeColumnWidthModal}
       className="table-generator-width-modal"
     >
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('set_column_width')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/subscription/components/dashboard/leave-group-modal.tsx

@@ -4,7 +4,8 @@ import { deleteJSON } from '../../../../infrastructure/fetch-json'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
 import { useLocation } from '../../../../shared/hooks/use-location'
 import { debugConsole } from '@/utils/debugging'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx

@@ -3,7 +3,8 @@ import { useSubscriptionDashboardContext } from '../../context/subscription-dash
 import { useCallback, useMemo, useState } from 'react'
 import { postJSON } from '@/infrastructure/fetch-json'
 import { useLocation } from '@/shared/hooks/use-location'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalHeader,
 } from '@/shared/components/ol/ol-modal'
@@ -88,7 +89,7 @@ export default function PauseSubscriptionModal() {
       backdrop="static"
     >
       <OLModalBody>
-        <OLModalHeader closeButton style={{ border: 0 }} />
+        <OLModalHeader style={{ border: 0 }} />
         <img
           src={PauseDuck}
           alt="Need to duck out for a while?"

services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/cancel-ai-add-on-modal.tsx

@@ -4,7 +4,8 @@ import { SubscriptionDashModalIds } from '../../../../../../../../../../types/su
 import { postJSON } from '../../../../../../../../infrastructure/fetch-json'
 import { useSubscriptionDashboardContext } from '../../../../../../context/subscription-dashboard-context'
 import { useLocation } from '../../../../../../../../shared/hooks/use-location'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-plan-modal.tsx

@@ -4,7 +4,8 @@ import LoadingSpinner from '../../../../../../../../shared/components/loading-sp
 import { useSubscriptionDashboardContext } from '../../../../../../context/subscription-dashboard-context'
 import { ChangeToGroupPlan } from '../change-to-group-plan'
 import { IndividualPlansTable } from '../individual-plans-table'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalHeader,
   OLModalTitle,
@@ -43,7 +44,7 @@ export function ChangePlanModal() {
 
   return (
     <OLModal id={modalId} show animation onHide={handleCloseModal} size="lg">
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('change_plan')}</OLModalTitle>
       </OLModalHeader>
 

services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx

@@ -12,7 +12,8 @@ import GenericErrorAlert from '../../../../generic-error-alert'
 import { subscriptionUpdateUrl } from '../../../../../../data/subscription-url'
 import { getRecurlyGroupPlanCode } from '../../../../../../util/recurly-group-plan-code'
 import { useLocation } from '../../../../../../../../shared/hooks/use-location'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -175,7 +176,7 @@ export function ChangeToGroupModal() {
         onHide={handleCloseModal}
         backdrop="static"
       >
-        <OLModalHeader closeButton>
+        <OLModalHeader>
           <OLModalTitle className="lh-sm">
             {t('customize_your_group_subscription')}
             {showGroupDiscount && (

services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/confirm-change-plan-modal.tsx

@@ -9,7 +9,8 @@ import getMeta from '../../../../../../../../utils/meta'
 import { useSubscriptionDashboardContext } from '../../../../../../context/subscription-dashboard-context'
 import { subscriptionUpdateUrl } from '../../../../../../data/subscription-url'
 import { useLocation } from '../../../../../../../../shared/hooks/use-location'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx

@@ -5,7 +5,8 @@ import { postJSON } from '../../../../../../../../infrastructure/fetch-json'
 import { useSubscriptionDashboardContext } from '../../../../../../context/subscription-dashboard-context'
 import { cancelPendingSubscriptionChangeUrl } from '../../../../../../data/subscription-url'
 import { useLocation } from '../../../../../../../../shared/hooks/use-location'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/writefull-bundle-management-modal.tsx

@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { SubscriptionDashModalIds } from '../../../../../../../../../../types/subscription/dashboard/modal-ids'
 import { useSubscriptionDashboardContext } from '../../../../../../context/subscription-dashboard-context'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx

@@ -2,7 +2,8 @@ import { useState } from 'react'
 import { SubscriptionDashModalIds } from '../../../../../../../../types/subscription/dashboard/modal-ids'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSubscriptionDashboardContext } from '@/features/subscription/context/subscription-dashboard-context'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,

services/web/frontend/js/features/token-access/components/leave-project-modal.tsx

@@ -1,5 +1,6 @@
 import OLButton from '@/shared/components/ol/ol-button'
-import OLModal, {
+import {
+  OLModal,
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
@@ -28,7 +29,7 @@ function LeaveProjectModal({
       id="action-project-modal"
       backdrop="static"
     >
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{t('leave_project')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>

services/web/frontend/js/features/word-count-modal/components/word-count-modal-content.tsx

@@ -21,7 +21,7 @@ export default function WordCountModalContent({
 
   return (
     <>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>
           {t('word_count_lower')}{' '}
           <SplitTestBadge

services/web/frontend/js/features/word-count-modal/components/word-count-modal.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import WordCountModalContent from './word-count-modal-content'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
-import OLModal from '@/shared/components/ol/ol-modal'
+import { OLModal } from '@/shared/components/ol/ol-modal'
 
 const WordCountModal = memo(function WordCountModal({
   show,

services/web/frontend/js/shared/components/ol/ol-modal.tsx

@@ -12,12 +12,24 @@ type OLModalProps = ModalProps & {
   onHide: () => void
 }
 
-export default function OLModal({ children, ...props }: OLModalProps) {
+type OLModalHeaderProps = ModalHeaderProps & {
+  closeButton?: boolean
+}
+
+export function OLModal({ children, ...props }: OLModalProps) {
   return <Modal {...props}>{children}</Modal>
 }
 
-export function OLModalHeader({ children, ...props }: ModalHeaderProps) {
+export function OLModalHeader({
-  return <Modal.Header {...props}>{children}</Modal.Header>
+  children,
+  closeButton = true,
+  ...props
+}: OLModalHeaderProps) {
+  return (
+    <Modal.Header closeButton={closeButton} {...props}>
+      {children}
+    </Modal.Header>
+  )
 }
 
 export function OLModalTitle({ children, ...props }: ModalTitleProps) {

services/web/frontend/stories/shared/modal.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url'
+import { figmaDesignUrl } from './../../../.storybook/utils/figma-design-url'
-import OLModal, {
+import {
+  OLModal,
   OLModalHeader,
   OLModalBody,
   OLModalFooter,
@@ -99,7 +100,7 @@ const meta: Meta<typeof OLModal> = {
   },
   render: ({ title, children, footer, ...args }) => (
     <OLModal {...args}>
-      <OLModalHeader closeButton>
+      <OLModalHeader>
         <OLModalTitle>{title}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>{children}</OLModalBody>