From 7fb02c96e623048d45f329fe082be2265407da0c Mon Sep 17 00:00:00 2001
From: Philip Molares <philip.molares@udo.edu>
Date: Sun, 19 Feb 2023 20:29:05 +0100
Subject: [PATCH] refactor(frontend): title for common modal via titleI18nKey
 or title prop

This is mainly needed because we use the common modal to show image light boxes and the title is then the title or alt text of the image

Signed-off-by: Philip Molares <philip.molares@udo.edu>
---
 .../__snapshots__/common-modal.test.tsx.snap  | 21 ++++++++++++++-----
 .../deletion-moadal.test.tsx.snap             |  4 +++-
 .../common/modals/common-modal.test.tsx       |  6 +++---
 .../components/common/modals/common-modal.tsx | 10 ++++-----
 .../common/modals/deletion-modal.tsx          | 12 ++++++++---
 .../common/motd-modal/motd-modal.tsx          |  7 +++++--
 .../app-bar/help-button/help-modal.tsx        | 10 ++-------
 .../document-bar/aliases/aliases-modal.tsx    |  4 ++--
 .../note-info/note-info-modal.tsx             |  4 ++--
 .../permissions/permission-modal.tsx          |  4 ++--
 .../document-bar/revisions/revision-modal.tsx |  4 ++--
 .../document-bar/share/share-modal.tsx        |  4 ++--
 .../max-length-warning-modal.tsx              |  4 ++--
 .../table-picker/custom-table-size-modal.tsx  |  4 ++--
 .../delete-note-modal.tsx                     |  4 ++--
 .../history-toolbar/clear-history-button.tsx  |  4 ++--
 .../version-info/version-info-modal.tsx       |  4 ++--
 .../layout/settings-dialog/settings-modal.tsx |  4 ++--
 .../extensions/image/image-lightbox-modal.tsx |  5 ++---
 .../access-token-created-modal.tsx            |  4 ++--
 .../access-token-deletion-modal.tsx           |  4 ++--
 .../account-deletion-modal.tsx                |  4 ++--
 22 files changed, 73 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/common/modals/__snapshots__/common-modal.test.tsx.snap b/frontend/src/components/common/modals/__snapshots__/common-modal.test.tsx.snap
index f9151276c..8e8eed99a 100644
--- a/frontend/src/components/common/modals/__snapshots__/common-modal.test.tsx.snap
+++ b/frontend/src/components/common/modals/__snapshots__/common-modal.test.tsx.snap
@@ -15,7 +15,9 @@ exports[`CommonModal render correctly in size lg 1`] = `
     >
       <div
         class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
     </div>
     testText
   </div>
@@ -35,7 +37,9 @@ exports[`CommonModal render correctly in size sm 1`] = `
     >
       <div
         class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
     </div>
     testText
   </div>
@@ -55,7 +59,9 @@ exports[`CommonModal render correctly in size xl 1`] = `
     >
       <div
         class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
     </div>
     testText
   </div>
@@ -75,7 +81,9 @@ exports[`CommonModal render correctly with additionalClasses 1`] = `
     >
       <div
         class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
     </div>
     testText
   </div>
@@ -144,6 +152,7 @@ exports[`CommonModal render correctly with title icon 1`] = `
           class="fa  fa-heart  "
         />
          
+        <span />
       </div>
     </div>
     testText
@@ -164,7 +173,9 @@ exports[`CommonModal renders correctly and calls onHide, when close button is cl
     >
       <div
         class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
       <button
         aria-label="Close"
         class="btn-close"
diff --git a/frontend/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap b/frontend/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap
index e1f40183e..b8a166cf2 100644
--- a/frontend/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap
+++ b/frontend/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap
@@ -13,7 +13,9 @@ exports[`DeletionModal renders correctly with deletionButtonI18nKey 1`] = `
     >
       <div
         class="modal-title h4"
-      />
+      >
+        <span />
+      </div>
       <button
         aria-label="Close"
         class="btn-close"
diff --git a/frontend/src/components/common/modals/common-modal.test.tsx b/frontend/src/components/common/modals/common-modal.test.tsx
index 5b4d42949..70d7f237a 100644
--- a/frontend/src/components/common/modals/common-modal.test.tsx
+++ b/frontend/src/components/common/modals/common-modal.test.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -45,7 +45,7 @@ describe('CommonModal', () => {
 
   it('render correctly with title', async () => {
     render(
-      <CommonModal show={true} title={'testTitle'}>
+      <CommonModal show={true} titleI18nKey={'testTitle'}>
         testText
       </CommonModal>
     )
@@ -55,7 +55,7 @@ describe('CommonModal', () => {
 
   it('render correctly with i18nTitle', async () => {
     render(
-      <CommonModal show={true} title={'testTitle'} titleIsI18nKey={true}>
+      <CommonModal show={true} titleI18nKey={'testTitle'}>
         testText
       </CommonModal>
     )
diff --git a/frontend/src/components/common/modals/common-modal.tsx b/frontend/src/components/common/modals/common-modal.tsx
index eb64fea89..470fb3ea1 100644
--- a/frontend/src/components/common/modals/common-modal.tsx
+++ b/frontend/src/components/common/modals/common-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -20,8 +20,8 @@ export interface ModalVisibilityProps {
 }
 
 export interface ModalContentProps {
+  titleI18nKey?: string
   title?: string
-  titleIsI18nKey?: boolean
   showCloseButton?: boolean
   titleIcon?: IconName
   modalSize?: 'lg' | 'sm' | 'xl'
@@ -47,20 +47,20 @@ export type CommonModalProps = PropsWithDataCypressId & ModalVisibilityProps & M
 export const CommonModal: React.FC<PropsWithChildren<CommonModalProps>> = ({
   show,
   onHide,
+  titleI18nKey,
   title,
   showCloseButton,
   titleIcon,
   additionalClasses,
   modalSize,
   children,
-  titleIsI18nKey = true,
   ...props
 }) => {
   useTranslation()
 
   const titleElement = useMemo(() => {
-    return titleIsI18nKey ? <Trans i18nKey={title} /> : <span>{title}</span>
-  }, [title, titleIsI18nKey])
+    return titleI18nKey !== undefined ? <Trans i18nKey={titleI18nKey} /> : <span>{title}</span>
+  }, [titleI18nKey, title])
 
   return (
     <ShowIf condition={show}>
diff --git a/frontend/src/components/common/modals/deletion-modal.tsx b/frontend/src/components/common/modals/deletion-modal.tsx
index 432c223cf..524cd5f8f 100644
--- a/frontend/src/components/common/modals/deletion-modal.tsx
+++ b/frontend/src/components/common/modals/deletion-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -32,7 +32,7 @@ export interface DeletionModalProps extends CommonModalProps {
 export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
   show,
   onHide,
-  title,
+  titleI18nKey,
   onConfirm,
   deletionButtonI18nKey,
   titleIcon,
@@ -42,7 +42,13 @@ export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
   useTranslation()
 
   return (
-    <CommonModal show={show} onHide={onHide} title={title} titleIcon={titleIcon} showCloseButton={true} {...props}>
+    <CommonModal
+      show={show}
+      onHide={onHide}
+      titleI18nKey={titleI18nKey}
+      titleIcon={titleIcon}
+      showCloseButton={true}
+      {...props}>
       <Modal.Body className='text-dark'>{children}</Modal.Body>
       <Modal.Footer>
         <Button {...cypressId('deletionModal.confirmButton')} variant='danger' onClick={onConfirm}>
diff --git a/frontend/src/components/common/motd-modal/motd-modal.tsx b/frontend/src/components/common/motd-modal/motd-modal.tsx
index edb44caff..4740a66c8 100644
--- a/frontend/src/components/common/motd-modal/motd-modal.tsx
+++ b/frontend/src/components/common/motd-modal/motd-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -49,7 +49,10 @@ export const MotdModal: React.FC = () => {
   }
 
   return (
-    <CommonModal show={!!lines && !loading && !error && !dismissed} title={'motd.title'} {...cypressId('motd-modal')}>
+    <CommonModal
+      show={!!lines && !loading && !error && !dismissed}
+      titleI18nKey={'motd.title'}
+      {...cypressId('motd-modal')}>
       <Modal.Body className={'bg-light'}>
         <EditorToRendererCommunicatorContextProvider>
           <RenderIframe
diff --git a/frontend/src/components/editor-page/app-bar/help-button/help-modal.tsx b/frontend/src/components/editor-page/app-bar/help-button/help-modal.tsx
index 497d31f3c..8860a30ec 100644
--- a/frontend/src/components/editor-page/app-bar/help-button/help-modal.tsx
+++ b/frontend/src/components/editor-page/app-bar/help-button/help-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -47,13 +47,7 @@ export const HelpModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
   const modalTitle = useMemo(() => t('editor.documentBar.help') + ' - ' + t(`editor.help.${tab}`), [t, tab])
 
   return (
-    <CommonModal
-      modalSize={'lg'}
-      titleIcon={'question-circle'}
-      show={show}
-      onHide={onHide}
-      title={modalTitle}
-      titleIsI18nKey={false}>
+    <CommonModal modalSize={'lg'} titleIcon={'question-circle'} show={show} onHide={onHide} title={modalTitle}>
       <Modal.Body>
         <nav className='nav nav-tabs'>
           <Button
diff --git a/frontend/src/components/editor-page/document-bar/aliases/aliases-modal.tsx b/frontend/src/components/editor-page/document-bar/aliases/aliases-modal.tsx
index 73783b20b..042201927 100644
--- a/frontend/src/components/editor-page/document-bar/aliases/aliases-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/aliases/aliases-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -21,7 +21,7 @@ export const AliasesModal: React.FC<CommonModalProps> = ({ show, onHide }) => {
   useTranslation()
 
   return (
-    <CommonModal show={show} onHide={onHide} title={'editor.modal.aliases.title'} showCloseButton={true}>
+    <CommonModal show={show} onHide={onHide} titleI18nKey={'editor.modal.aliases.title'} showCloseButton={true}>
       <Modal.Body>
         <p>
           <Trans i18nKey={'editor.modal.aliases.explanation'} />
diff --git a/frontend/src/components/editor-page/document-bar/note-info/note-info-modal.tsx b/frontend/src/components/editor-page/document-bar/note-info/note-info-modal.tsx
index 56fbc2dde..5720d88f3 100644
--- a/frontend/src/components/editor-page/document-bar/note-info/note-info-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/note-info/note-info-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -28,7 +28,7 @@ export const NoteInfoModal: React.FC<ModalVisibilityProps> = ({ show, onHide })
       show={show}
       onHide={onHide}
       showCloseButton={true}
-      title={'editor.modal.documentInfo.title'}
+      titleI18nKey={'editor.modal.documentInfo.title'}
       {...cypressId('document-info-modal')}>
       <Modal.Body>
         <ListGroup>
diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx
index 469538bff..d4898fc58 100644
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -19,7 +19,7 @@ import { Modal } from 'react-bootstrap'
  */
 export const PermissionModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
   return (
-    <CommonModal show={show} onHide={onHide} showCloseButton={true} title={'editor.modal.permissions.title'}>
+    <CommonModal show={show} onHide={onHide} showCloseButton={true} titleI18nKey={'editor.modal.permissions.title'}>
       <Modal.Body>
         <PermissionSectionOwner />
         <PermissionSectionUsers />
diff --git a/frontend/src/components/editor-page/document-bar/revisions/revision-modal.tsx b/frontend/src/components/editor-page/document-bar/revisions/revision-modal.tsx
index 6f1e4d032..466c7c82c 100644
--- a/frontend/src/components/editor-page/document-bar/revisions/revision-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/revisions/revision-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -27,7 +27,7 @@ export const RevisionModal: React.FC<ModalVisibilityProps> = ({ show, onHide })
     <CommonModal
       show={show}
       onHide={onHide}
-      title={'editor.modal.revision.title'}
+      titleI18nKey={'editor.modal.revision.title'}
       titleIcon={'history'}
       showCloseButton={true}
       modalSize={'xl'}
diff --git a/frontend/src/components/editor-page/document-bar/share/share-modal.tsx b/frontend/src/components/editor-page/document-bar/share/share-modal.tsx
index 275bf96e6..2c1ca1b7e 100644
--- a/frontend/src/components/editor-page/document-bar/share/share-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/share/share-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -27,7 +27,7 @@ export const ShareModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) =>
   const noteIdentifier = useApplicationState((state) => state.noteDetails.primaryAddress)
 
   return (
-    <CommonModal show={show} onHide={onHide} showCloseButton={true} title={'editor.modal.shareLink.title'}>
+    <CommonModal show={show} onHide={onHide} showCloseButton={true} titleI18nKey={'editor.modal.shareLink.title'}>
       <Modal.Body>
         <Trans i18nKey={'editor.modal.shareLink.editorDescription'} />
         <CopyableField content={`${baseUrl}n/${noteIdentifier}`} shareOriginUrl={`${baseUrl}n/${noteIdentifier}`} />
diff --git a/frontend/src/components/editor-page/editor-pane/max-length-warning/max-length-warning-modal.tsx b/frontend/src/components/editor-page/editor-pane/max-length-warning/max-length-warning-modal.tsx
index b1733fcc5..a04b1f74c 100644
--- a/frontend/src/components/editor-page/editor-pane/max-length-warning/max-length-warning-modal.tsx
+++ b/frontend/src/components/editor-page/editor-pane/max-length-warning/max-length-warning-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -26,7 +26,7 @@ export const MaxLengthWarningModal: React.FC<ModalVisibilityProps> = ({ show, on
       {...cypressId('limitReachedModal')}
       show={show}
       onHide={onHide}
-      title={'editor.error.limitReached.title'}
+      titleI18nKey={'editor.error.limitReached.title'}
       showCloseButton={true}>
       <Modal.Body>
         <Trans i18nKey={'editor.error.limitReached.description'} values={{ maxDocumentLength }} />
diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
index c9213b0ca..8f67eff6b 100644
--- a/frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
+++ b/frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -65,7 +65,7 @@ export const CustomTableSizeModal: React.FC<CustomTableSizeModalProps> = ({ show
     <CommonModal
       show={showModal}
       onHide={onDismiss}
-      title={'editor.editorToolbar.table.customSize'}
+      titleI18nKey={'editor.editorToolbar.table.customSize'}
       showCloseButton={true}
       titleIcon={'table'}
       {...cypressId('custom-table-size-modal')}>
diff --git a/frontend/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-modal.tsx b/frontend/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-modal.tsx
index 33e25c0b3..0f3305a08 100644
--- a/frontend/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-modal.tsx
+++ b/frontend/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -53,7 +53,7 @@ export const DeleteNoteModal: React.FC<DeleteNoteModalProps & DeleteHistoryNoteM
       deletionButtonI18nKey={modalButtonI18nKey ?? 'editor.modal.deleteNote.button'}
       show={show}
       onHide={onHide}
-      title={modalTitleI18nKey ?? 'editor.modal.deleteNote.title'}>
+      titleI18nKey={modalTitleI18nKey ?? 'editor.modal.deleteNote.title'}>
       <h5>
         <Trans i18nKey={modalQuestionI18nKey ?? 'editor.modal.deleteNote.question'} />
       </h5>
diff --git a/frontend/src/components/history-page/history-toolbar/clear-history-button.tsx b/frontend/src/components/history-page/history-toolbar/clear-history-button.tsx
index fa9ea95c4..4fd291d46 100644
--- a/frontend/src/components/history-page/history-toolbar/clear-history-button.tsx
+++ b/frontend/src/components/history-page/history-toolbar/clear-history-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -46,7 +46,7 @@ export const ClearHistoryButton: React.FC = () => {
         deletionButtonI18nKey={'landing.history.toolbar.clear'}
         show={modalVisibility}
         onHide={closeModal}
-        title={'landing.history.modal.clearHistory.title'}>
+        titleI18nKey={'landing.history.modal.clearHistory.title'}>
         <h5>
           <Trans i18nKey={'landing.history.modal.clearHistory.question'} />
         </h5>
diff --git a/frontend/src/components/landing-layout/footer/version-info/version-info-modal.tsx b/frontend/src/components/landing-layout/footer/version-info/version-info-modal.tsx
index c1cae94a8..e9786e6d3 100644
--- a/frontend/src/components/landing-layout/footer/version-info/version-info-modal.tsx
+++ b/frontend/src/components/landing-layout/footer/version-info/version-info-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -41,7 +41,7 @@ export const VersionInfoModal: React.FC<CommonModalProps> = ({ onHide, show }) =
       show={show}
       onHide={onHide}
       showCloseButton={true}
-      title={'landing.versionInfo.title'}>
+      titleI18nKey={'landing.versionInfo.title'}>
       <Modal.Body>
         <Row>
           <VersionInfoModalColumn
diff --git a/frontend/src/components/layout/settings-dialog/settings-modal.tsx b/frontend/src/components/layout/settings-dialog/settings-modal.tsx
index 12f15ab9b..778dbb433 100644
--- a/frontend/src/components/layout/settings-dialog/settings-modal.tsx
+++ b/frontend/src/components/layout/settings-dialog/settings-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -24,7 +24,7 @@ export const SettingsModal: React.FC<CommonModalProps> = ({ show, onHide }) => {
       modalSize={'lg'}
       onHide={onHide}
       titleIcon={'cog'}
-      title={'settings.title'}
+      titleI18nKey={'settings.title'}
       showCloseButton={true}>
       <Modal.Body>
         <Tabs navbar={false} variant={'pills'} defaultActiveKey={'global'}>
diff --git a/frontend/src/components/markdown-renderer/extensions/image/image-lightbox-modal.tsx b/frontend/src/components/markdown-renderer/extensions/image/image-lightbox-modal.tsx
index 7d8af1b52..a1ad0e175 100644
--- a/frontend/src/components/markdown-renderer/extensions/image/image-lightbox-modal.tsx
+++ b/frontend/src/components/markdown-renderer/extensions/image/image-lightbox-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -32,8 +32,7 @@ export const ImageLightboxModal: React.FC<ImageLightboxModalProps> = ({ show, on
       onHide={onHide}
       showCloseButton={true}
       additionalClasses={styles.lightbox}
-      title={alt ?? title ?? ''}
-      titleIsI18nKey={false}>
+      title={title ?? alt ?? ''}>
       <ProxyImageFrame alt={alt} src={src} title={title} className={'w-100 cursor-zoom-out'} onClick={onHide} />
     </CommonModal>
   )
diff --git a/frontend/src/components/profile-page/access-tokens/access-token-created-modal.tsx b/frontend/src/components/profile-page/access-tokens/access-token-created-modal.tsx
index c54125eed..ff4058b45 100644
--- a/frontend/src/components/profile-page/access-tokens/access-token-created-modal.tsx
+++ b/frontend/src/components/profile-page/access-tokens/access-token-created-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -32,7 +32,7 @@ export const AccessTokenCreatedModal: React.FC<AccessTokenCreatedModalProps> = (
     <CommonModal
       show={show}
       onHide={onHide}
-      title='profile.modal.addedAccessToken.title'
+      titleI18nKey='profile.modal.addedAccessToken.title'
       {...cypressId('access-token-modal-add')}>
       <Modal.Body>
         <Trans
diff --git a/frontend/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx b/frontend/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx
index 907038e74..58be52d97 100644
--- a/frontend/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx
+++ b/frontend/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -49,7 +49,7 @@ export const AccessTokenDeletionModal: React.FC<AccessTokenDeletionModalProps> =
     <CommonModal
       show={show}
       onHide={onHide}
-      title={'profile.modal.deleteAccessToken.title'}
+      titleI18nKey={'profile.modal.deleteAccessToken.title'}
       {...cypressId('access-token-modal-delete')}>
       <Modal.Body>
         <Trans i18nKey='profile.modal.deleteAccessToken.message' values={{ label: token.label }} />
diff --git a/frontend/src/components/profile-page/account-management/account-deletion-modal.tsx b/frontend/src/components/profile-page/account-management/account-deletion-modal.tsx
index ba14a9a1e..3f488181f 100644
--- a/frontend/src/components/profile-page/account-management/account-deletion-modal.tsx
+++ b/frontend/src/components/profile-page/account-management/account-deletion-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -42,7 +42,7 @@ export const AccountDeletionModal: React.FC<ModalVisibilityProps> = ({ show, onH
   }, [dispatchUiNotification, onHide, showErrorNotification])
 
   return (
-    <CommonModal show={show} title={'profile.modal.deleteUser.message'} onHide={onHide} showCloseButton={true}>
+    <CommonModal show={show} titleI18nKey={'profile.modal.deleteUser.message'} onHide={onHide} showCloseButton={true}>
       <Modal.Body>
         <Trans i18nKey='profile.modal.deleteUser.subMessage' />
       </Modal.Body>