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/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">