From 19b38340ac10e7b999ab1ded374888d0eb855db5 Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Mon, 29 Sep 2025 10:30:56 +0200 Subject: [PATCH] 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 GitOrigin-RevId: ddd7be6e59a966ac634683d2494d6e9d2c3732e6 --- .../components/clone-project-modal-content.tsx | 2 +- .../components/clone-project-modal.tsx | 2 +- .../components/dictionary-modal-content.tsx | 2 +- .../dictionary/components/dictionary-modal.tsx | 2 +- .../modals/file-tree-modal-create-file.tsx | 5 +++-- .../modals/file-tree-modal-create-folder.tsx | 3 ++- .../modals/file-tree-modal-delete.tsx | 3 ++- .../modals/file-tree-modal-error.tsx | 3 ++- .../offboard-managed-user-modal.tsx | 3 ++- .../remove-managed-user-modal.tsx | 3 ++- .../members-table/unlink-user-modal.tsx | 3 ++- .../components/change-list/add-label-modal.tsx | 3 ++- .../components/change-list/tag-tooltip.tsx | 3 ++- .../modals/restore-file-confirm-modal.tsx | 5 +++-- .../modals/restore-file-error-modal.tsx | 5 +++-- .../modals/restore-project-error-modal.tsx | 5 +++-- .../diff-view/modals/restore-project-modal.tsx | 3 ++- .../hotkeys-modal/components/hotkeys-modal.tsx | 5 +++-- .../components/modals/force-disconnected.tsx | 5 +++-- .../modals/generic-confirm-modal.tsx | 5 +++-- .../modals/generic-message-modal.tsx | 5 +++-- .../components/modals/out-of-sync-modal.tsx | 5 +++-- .../components/settings/settings-modal.tsx | 5 +++-- .../components/switcher-modal/beta-modal.tsx | 7 ++++--- .../components/modals/create-tag-modal.tsx | 5 +++-- .../components/modals/delete-tag-modal.tsx | 5 +++-- .../components/modals/edit-tag-modal.tsx | 5 +++-- .../components/modals/manage-tag-modal.tsx | 5 +++-- .../modals/projects-action-modal.tsx | 5 +++-- .../components/modals/rename-project-modal.tsx | 5 +++-- .../new-project-button/blank-project-modal.tsx | 2 +- .../example-project-modal.tsx | 2 +- .../modal-content-new-project-form.tsx | 2 +- .../upload-project-modal.tsx | 5 +++-- .../notifications/ads/brl-banner.tsx | 5 +++-- .../notifications/ads/inr-banner.tsx | 5 +++-- .../notifications/ads/latam-banner.tsx | 5 +++-- ...compile-and-download-project-pdf-button.tsx | 5 +++-- .../review-panel-delete-comment-modal.tsx | 3 ++- .../components/upgrade-track-changes-modal.tsx | 5 +++-- .../make-primary/confirmation-modal.tsx | 5 +++-- .../emails/resend-confirmation-code-modal.tsx | 5 +++-- .../components/leave/modal-content.tsx | 2 +- .../settings/components/leave/modal.tsx | 2 +- .../components/linking/integration-widget.tsx | 5 +++-- .../settings/components/linking/sso-widget.tsx | 5 +++-- .../editor-over-limit-modal-content.tsx | 2 +- .../components/editor-over-limit-modal.tsx | 2 +- .../components/share-project-modal-content.tsx | 5 +++-- .../components/transfer-ownership-modal.tsx | 5 +++-- .../view-only-access-modal-content.tsx | 2 +- .../components/view-only-access-modal.tsx | 2 +- .../components/figure-modal/figure-modal.tsx | 5 +++-- .../components/math-preview-tooltip.tsx | 3 ++- .../components/table-generator/help-modal.tsx | 5 +++-- .../toolbar/column-width-modal/modal.tsx | 5 +++-- .../components/dashboard/leave-group-modal.tsx | 3 ++- .../components/dashboard/pause-modal.tsx | 5 +++-- .../modals/cancel-ai-add-on-modal.tsx | 3 ++- .../change-plan/modals/change-plan-modal.tsx | 5 +++-- .../modals/change-to-group-modal.tsx | 5 +++-- .../modals/confirm-change-plan-modal.tsx | 3 ++- .../modals/keep-current-plan-modal.tsx | 3 ++- .../writefull-bundle-management-modal.tsx | 3 ++- .../states/active/confirm-unpause-modal.tsx | 3 ++- .../components/leave-project-modal.tsx | 5 +++-- .../components/word-count-modal-content.tsx | 2 +- .../components/word-count-modal.tsx | 2 +- .../js/shared/components/ol/ol-modal.tsx | 18 +++++++++++++++--- .../frontend/stories/shared/modal.stories.tsx | 7 ++++--- 70 files changed, 177 insertions(+), 111 deletions(-) diff --git a/services/web/frontend/js/features/clone-project-modal/components/clone-project-modal-content.tsx b/services/web/frontend/js/features/clone-project-modal/components/clone-project-modal-content.tsx index abb743377b..d4b9d185bf 100644 --- a/services/web/frontend/js/features/clone-project-modal/components/clone-project-modal-content.tsx +++ b/services/web/frontend/js/features/clone-project-modal/components/clone-project-modal-content.tsx @@ -89,7 +89,7 @@ export default function CloneProjectModalContent({ return ( <> - + {t('copy_project')} diff --git a/services/web/frontend/js/features/clone-project-modal/components/clone-project-modal.tsx b/services/web/frontend/js/features/clone-project-modal/components/clone-project-modal.tsx index 03efac1242..76911b9cd7 100644 --- a/services/web/frontend/js/features/clone-project-modal/components/clone-project-modal.tsx +++ b/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' diff --git a/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx b/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx index 04735d8500..05abff20c6 100644 --- a/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx +++ b/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx @@ -52,7 +52,7 @@ export default function DictionaryModalContent({ return ( <> - + {t('edit_dictionary')} diff --git a/services/web/frontend/js/features/dictionary/components/dictionary-modal.tsx b/services/web/frontend/js/features/dictionary/components/dictionary-modal.tsx index 1414e118a9..b49258e8ab 100644 --- a/services/web/frontend/js/features/dictionary/components/dictionary-modal.tsx +++ b/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 diff --git a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.tsx b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.tsx index 9d0b6fc9a0..78c3e64986 100644 --- a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.tsx +++ b/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 ( - + {t('add_files')} diff --git a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.tsx b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.tsx index 85044309b2..776c69b0df 100644 --- a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.tsx +++ b/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, diff --git a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.tsx b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.tsx index aa2a0125fa..29354c2146 100644 --- a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.tsx +++ b/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, diff --git a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-error.tsx b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-error.tsx index a723e42f45..1d4db8bcc7 100644 --- a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-error.tsx +++ b/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, diff --git a/services/web/frontend/js/features/group-management/components/members-table/offboard-managed-user-modal.tsx b/services/web/frontend/js/features/group-management/components/members-table/offboard-managed-user-modal.tsx index dbe51dc9da..5e2da7ed79 100644 --- a/services/web/frontend/js/features/group-management/components/members-table/offboard-managed-user-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/group-management/components/members-table/remove-managed-user-modal.tsx b/services/web/frontend/js/features/group-management/components/members-table/remove-managed-user-modal.tsx index 862d640993..17720ba2e6 100644 --- a/services/web/frontend/js/features/group-management/components/members-table/remove-managed-user-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/group-management/components/members-table/unlink-user-modal.tsx b/services/web/frontend/js/features/group-management/components/members-table/unlink-user-modal.tsx index 9b5fcb0725..e791deead4 100644 --- a/services/web/frontend/js/features/group-management/components/members-table/unlink-user-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/history/components/change-list/add-label-modal.tsx b/services/web/frontend/js/features/history/components/change-list/add-label-modal.tsx index c20460c8a9..460765120f 100644 --- a/services/web/frontend/js/features/history/components/change-list/add-label-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx b/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx index 77cdd60038..6e04c7bfa9 100644 --- a/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx +++ b/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, diff --git a/services/web/frontend/js/features/history/components/diff-view/modals/restore-file-confirm-modal.tsx b/services/web/frontend/js/features/history/components/diff-view/modals/restore-file-confirm-modal.tsx index 45ffee3e11..9f241f33c7 100644 --- a/services/web/frontend/js/features/history/components/diff-view/modals/restore-file-confirm-modal.tsx +++ b/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 ( - + {t('restore_file_confirmation_title')} diff --git a/services/web/frontend/js/features/history/components/diff-view/modals/restore-file-error-modal.tsx b/services/web/frontend/js/features/history/components/diff-view/modals/restore-file-error-modal.tsx index 48c758e378..579a9a8971 100644 --- a/services/web/frontend/js/features/history/components/diff-view/modals/restore-file-error-modal.tsx +++ b/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 ( - + {t('restore_file_error_title')} {t('restore_file_error_message')} diff --git a/services/web/frontend/js/features/history/components/diff-view/modals/restore-project-error-modal.tsx b/services/web/frontend/js/features/history/components/diff-view/modals/restore-project-error-modal.tsx index 28044fabe6..21cfefb073 100644 --- a/services/web/frontend/js/features/history/components/diff-view/modals/restore-project-error-modal.tsx +++ b/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 ( - + {t('an_error_occured_while_restoring_project')} diff --git a/services/web/frontend/js/features/history/components/diff-view/modals/restore-project-modal.tsx b/services/web/frontend/js/features/history/components/diff-view/modals/restore-project-modal.tsx index 2606ca77ae..d096d9ae5e 100644 --- a/services/web/frontend/js/features/history/components/diff-view/modals/restore-project-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.tsx b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.tsx index 695b3a1fa2..9fc1afea07 100644 --- a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.tsx +++ b/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 ( - + {t('hotkeys')} diff --git a/services/web/frontend/js/features/ide-react/components/modals/force-disconnected.tsx b/services/web/frontend/js/features/ide-react/components/modals/force-disconnected.tsx index 15e9de3abf..c8b75ccc3d 100644 --- a/services/web/frontend/js/features/ide-react/components/modals/force-disconnected.tsx +++ b/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} > - + {t('please_wait')} diff --git a/services/web/frontend/js/features/ide-react/components/modals/generic-confirm-modal.tsx b/services/web/frontend/js/features/ide-react/components/modals/generic-confirm-modal.tsx index 4bdf94d608..d9af296161 100644 --- a/services/web/frontend/js/features/ide-react/components/modals/generic-confirm-modal.tsx +++ b/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 ( - + {title} diff --git a/services/web/frontend/js/features/ide-react/components/modals/generic-message-modal.tsx b/services/web/frontend/js/features/ide-react/components/modals/generic-message-modal.tsx index 2e5ec98f4a..feabf62aa4 100644 --- a/services/web/frontend/js/features/ide-react/components/modals/generic-message-modal.tsx +++ b/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 ( - + {title} diff --git a/services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx b/services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx index afcf8ff346..bceb0d5f6a 100644 --- a/services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx +++ b/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} > - + {t('out_of_sync')} diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/settings-modal.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/settings-modal.tsx index 1ba1315002..adb34a98d7 100644 --- a/services/web/frontend/js/features/ide-redesign/components/settings/settings-modal.tsx +++ b/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 } > - + {t('settings')} diff --git a/services/web/frontend/js/features/ide-redesign/components/switcher-modal/beta-modal.tsx b/services/web/frontend/js/features/ide-redesign/components/switcher-modal/beta-modal.tsx index 616b7eb9f3..b571c03aa8 100644 --- a/services/web/frontend/js/features/ide-redesign/components/switcher-modal/beta-modal.tsx +++ b/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" > - + {t('the_new_overleaf_editor_try_now_in_beta')} @@ -99,7 +100,7 @@ export const IdeRedesignSwitcherModal = () => { onHide={onHide} className="ide-redesign-switcher-modal" > - + {enabled ? t('beta_program_the_new_overleaf_editor') diff --git a/services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx b/services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx index aaff86c160..6340c1bf21 100644 --- a/services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx +++ b/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 ( - + {t('create_new_tag')} diff --git a/services/web/frontend/js/features/project-list/components/modals/delete-tag-modal.tsx b/services/web/frontend/js/features/project-list/components/modals/delete-tag-modal.tsx index 7bba5ef026..7bcb4de802 100644 --- a/services/web/frontend/js/features/project-list/components/modals/delete-tag-modal.tsx +++ b/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 ( - + {t('delete_tag')} diff --git a/services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx b/services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx index 501e588b73..37c9f6a25d 100644 --- a/services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx +++ b/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 ( - + {t('edit_tag')} diff --git a/services/web/frontend/js/features/project-list/components/modals/manage-tag-modal.tsx b/services/web/frontend/js/features/project-list/components/modals/manage-tag-modal.tsx index 945ef18b8a..37b095d3b8 100644 --- a/services/web/frontend/js/features/project-list/components/modals/manage-tag-modal.tsx +++ b/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 ( - + {t('edit_tag')} diff --git a/services/web/frontend/js/features/project-list/components/modals/projects-action-modal.tsx b/services/web/frontend/js/features/project-list/components/modals/projects-action-modal.tsx index 71be517fc7..db7e23c284 100644 --- a/services/web/frontend/js/features/project-list/components/modals/projects-action-modal.tsx +++ b/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" > - + {title} diff --git a/services/web/frontend/js/features/project-list/components/modals/rename-project-modal.tsx b/services/web/frontend/js/features/project-list/components/modals/rename-project-modal.tsx index 502f553868..d4749362d2 100644 --- a/services/web/frontend/js/features/project-list/components/modals/rename-project-modal.tsx +++ b/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" > - + {t('rename_project')} diff --git a/services/web/frontend/js/features/project-list/components/new-project-button/blank-project-modal.tsx b/services/web/frontend/js/features/project-list/components/new-project-button/blank-project-modal.tsx index bf43eb3676..5943bf7baf 100644 --- a/services/web/frontend/js/features/project-list/components/new-project-button/blank-project-modal.tsx +++ b/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 diff --git a/services/web/frontend/js/features/project-list/components/new-project-button/example-project-modal.tsx b/services/web/frontend/js/features/project-list/components/new-project-button/example-project-modal.tsx index 1571e92eed..aacd9c05d2 100644 --- a/services/web/frontend/js/features/project-list/components/new-project-button/example-project-modal.tsx +++ b/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 = { diff --git a/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx b/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx index 409b89d978..048016c3bc 100644 --- a/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx +++ b/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 ( <> - + {t('new_project')} diff --git a/services/web/frontend/js/features/project-list/components/new-project-button/upload-project-modal.tsx b/services/web/frontend/js/features/project-list/components/new-project-button/upload-project-modal.tsx index 961c27b5cd..a221f68037 100644 --- a/services/web/frontend/js/features/project-list/components/new-project-button/upload-project-modal.tsx +++ b/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" > - + {t('upload_zipped_project')} diff --git a/services/web/frontend/js/features/project-list/components/notifications/ads/brl-banner.tsx b/services/web/frontend/js/features/project-list/components/notifications/ads/brl-banner.tsx index ce592a6d68..a0f4f11627 100644 --- a/services/web/frontend/js/features/project-list/components/notifications/ads/brl-banner.tsx +++ b/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 ( - + {t('latam_discount_modal_title')} diff --git a/services/web/frontend/js/features/project-list/components/notifications/ads/inr-banner.tsx b/services/web/frontend/js/features/project-list/components/notifications/ads/inr-banner.tsx index 26220b917b..f6c75f76bb 100644 --- a/services/web/frontend/js/features/project-list/components/notifications/ads/inr-banner.tsx +++ b/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 ( - + {t('inr_discount_modal_title')} diff --git a/services/web/frontend/js/features/project-list/components/notifications/ads/latam-banner.tsx b/services/web/frontend/js/features/project-list/components/notifications/ads/latam-banner.tsx index 6bf50faad4..7618ab3e7a 100644 --- a/services/web/frontend/js/features/project-list/components/notifications/ads/latam-banner.tsx +++ b/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 ( - + {t('latam_discount_modal_title')} diff --git a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/compile-and-download-project-pdf-button.tsx b/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/compile-and-download-project-pdf-button.tsx index c1d294495d..0e8c5cfedc 100644 --- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/compile-and-download-project-pdf-button.tsx +++ b/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 ( <> - + {project.name}: {t('pdf_unavailable_for_download')} diff --git a/services/web/frontend/js/features/review-panel/components/review-panel-delete-comment-modal.tsx b/services/web/frontend/js/features/review-panel/components/review-panel-delete-comment-modal.tsx index 27aa21f91a..b351b8c334 100644 --- a/services/web/frontend/js/features/review-panel/components/review-panel-delete-comment-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/review-panel/components/upgrade-track-changes-modal.tsx b/services/web/frontend/js/features/review-panel/components/upgrade-track-changes-modal.tsx index 239bf2e053..6130ec64db 100644 --- a/services/web/frontend/js/features/review-panel/components/upgrade-track-changes-modal.tsx +++ b/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 ( setShow(false)}> - + {t('upgrade_to_review')} diff --git a/services/web/frontend/js/features/settings/components/emails/actions/make-primary/confirmation-modal.tsx b/services/web/frontend/js/features/settings/components/emails/actions/make-primary/confirmation-modal.tsx index 7e32ad0ab9..afbd8e06d6 100644 --- a/services/web/frontend/js/features/settings/components/emails/actions/make-primary/confirmation-modal.tsx +++ b/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 ( - + {t('confirm_primary_email_change')} diff --git a/services/web/frontend/js/features/settings/components/emails/resend-confirmation-code-modal.tsx b/services/web/frontend/js/features/settings/components/emails/resend-confirmation-code-modal.tsx index 83e316cb03..2a4b475a82 100644 --- a/services/web/frontend/js/features/settings/components/emails/resend-confirmation-code-modal.tsx +++ b/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" > - + {t('confirm_your_email')} diff --git a/services/web/frontend/js/features/settings/components/leave/modal-content.tsx b/services/web/frontend/js/features/settings/components/leave/modal-content.tsx index 774448234b..48810801dc 100644 --- a/services/web/frontend/js/features/settings/components/leave/modal-content.tsx +++ b/services/web/frontend/js/features/settings/components/leave/modal-content.tsx @@ -71,7 +71,7 @@ function LeaveModalContent({ return ( <> - + {t('delete_account')} diff --git a/services/web/frontend/js/features/settings/components/leave/modal.tsx b/services/web/frontend/js/features/settings/components/leave/modal.tsx index ecbb634fe1..b13799a482 100644 --- a/services/web/frontend/js/features/settings/components/leave/modal.tsx +++ b/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 diff --git a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx b/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx index 70fe6fdf57..90edda8de4 100644 --- a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx +++ b/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 ( - + {title} diff --git a/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx b/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx index ed68c0bd78..c80605aefb 100644 --- a/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx +++ b/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 ( - + {t('unlink_provider_account_title', { provider: title })} diff --git a/services/web/frontend/js/features/share-project-modal/components/editor-over-limit-modal-content.tsx b/services/web/frontend/js/features/share-project-modal/components/editor-over-limit-modal-content.tsx index e83ac8e765..ad5d7496ce 100644 --- a/services/web/frontend/js/features/share-project-modal/components/editor-over-limit-modal-content.tsx +++ b/services/web/frontend/js/features/share-project-modal/components/editor-over-limit-modal-content.tsx @@ -20,7 +20,7 @@ export default function EditorOverLimitModalContent({ return ( <> - + {t('do_you_need_edit_access')} diff --git a/services/web/frontend/js/features/share-project-modal/components/editor-over-limit-modal.tsx b/services/web/frontend/js/features/share-project-modal/components/editor-over-limit-modal.tsx index 935e5e864d..2e870e0b58 100644 --- a/services/web/frontend/js/features/share-project-modal/components/editor-over-limit-modal.tsx +++ b/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) diff --git a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx b/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx index b722236185..7ef3f601b2 100644 --- a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx +++ b/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 ( - + {t('share_project')} diff --git a/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx b/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx index 0db67d2036..ac75b734bc 100644 --- a/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx +++ b/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 ( - + {t('change_project_owner')} diff --git a/services/web/frontend/js/features/share-project-modal/components/view-only-access-modal-content.tsx b/services/web/frontend/js/features/share-project-modal/components/view-only-access-modal-content.tsx index a985add3c7..67ff287c46 100644 --- a/services/web/frontend/js/features/share-project-modal/components/view-only-access-modal-content.tsx +++ b/services/web/frontend/js/features/share-project-modal/components/view-only-access-modal-content.tsx @@ -19,7 +19,7 @@ export default function ViewOnlyAccessModalContent({ return ( <> - + {t('view_only_access')} diff --git a/services/web/frontend/js/features/share-project-modal/components/view-only-access-modal.tsx b/services/web/frontend/js/features/share-project-modal/components/view-only-access-modal.tsx index a4ce437c70..eec7ef4a41 100644 --- a/services/web/frontend/js/features/share-project-modal/components/view-only-access-modal.tsx +++ b/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) diff --git a/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal.tsx b/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal.tsx index 37bee71e44..9fbb37e344 100644 --- a/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal.tsx +++ b/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 ( - + {helpShown ? t('help') diff --git a/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx b/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx index ae9df9e11b..497d01c72e 100644 --- a/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx +++ b/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, diff --git a/services/web/frontend/js/features/source-editor/components/table-generator/help-modal.tsx b/services/web/frontend/js/features/source-editor/components/table-generator/help-modal.tsx index 4e661475cf..c5769a055a 100644 --- a/services/web/frontend/js/features/source-editor/components/table-generator/help-modal.tsx +++ b/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" > - + {t('help')} diff --git a/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/column-width-modal/modal.tsx b/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/column-width-modal/modal.tsx index 998efc51ca..32d232df7d 100644 --- a/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/column-width-modal/modal.tsx +++ b/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" > - + {t('set_column_width')} diff --git a/services/web/frontend/js/features/subscription/components/dashboard/leave-group-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/leave-group-modal.tsx index 1adbc9fdb5..c36d8dc2b5 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/leave-group-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx index cd7364fc83..620462f63a 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx +++ b/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" > - + Need to duck out for a while? - + {t('change_plan')} diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx index 7398547ab9..d4c41c1898 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx +++ b/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" > - + {t('customize_your_group_subscription')} {showGroupDiscount && ( diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/confirm-change-plan-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/confirm-change-plan-modal.tsx index a8098a27f2..5122185c2a 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/confirm-change-plan-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx index 8051f10deb..620cf4d844 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/writefull-bundle-management-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/writefull-bundle-management-modal.tsx index ade3584099..742d3ce409 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/writefull-bundle-management-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx index b580a99414..0b2b99730f 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx +++ b/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, diff --git a/services/web/frontend/js/features/token-access/components/leave-project-modal.tsx b/services/web/frontend/js/features/token-access/components/leave-project-modal.tsx index a141dcab49..fbf695fb2d 100644 --- a/services/web/frontend/js/features/token-access/components/leave-project-modal.tsx +++ b/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" > - + {t('leave_project')} diff --git a/services/web/frontend/js/features/word-count-modal/components/word-count-modal-content.tsx b/services/web/frontend/js/features/word-count-modal/components/word-count-modal-content.tsx index 584f945ccd..fda2aa21a0 100644 --- a/services/web/frontend/js/features/word-count-modal/components/word-count-modal-content.tsx +++ b/services/web/frontend/js/features/word-count-modal/components/word-count-modal-content.tsx @@ -21,7 +21,7 @@ export default function WordCountModalContent({ return ( <> - + {t('word_count_lower')}{' '} void } -export default function OLModal({ children, ...props }: OLModalProps) { +type OLModalHeaderProps = ModalHeaderProps & { + closeButton?: boolean +} + +export function OLModal({ children, ...props }: OLModalProps) { return {children} } -export function OLModalHeader({ children, ...props }: ModalHeaderProps) { - return {children} +export function OLModalHeader({ + children, + closeButton = true, + ...props +}: OLModalHeaderProps) { + return ( + + {children} + + ) } export function OLModalTitle({ children, ...props }: ModalTitleProps) { diff --git a/services/web/frontend/stories/shared/modal.stories.tsx b/services/web/frontend/stories/shared/modal.stories.tsx index 27dc41e0c5..c4f86fe317 100644 --- a/services/web/frontend/stories/shared/modal.stories.tsx +++ b/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 OLModal, { +import { figmaDesignUrl } from './../../../.storybook/utils/figma-design-url' +import { + OLModal, OLModalHeader, OLModalBody, OLModalFooter, @@ -99,7 +100,7 @@ const meta: Meta = { }, render: ({ title, children, footer, ...args }) => ( - + {title} {children}