From 2cb515ac2f59bf91f4ae457e87fff03392dc74ed Mon Sep 17 00:00:00 2001 From: Mathias Jakobsen Date: Thu, 13 Aug 2026 09:22:13 +0100 Subject: [PATCH] Merge pull request #36463 from overleaf/mj-themed-history-modals [web] Add theme support to history modals GitOrigin-RevId: 10cc2176b91213342e066fad8ff0eba265d868ec --- .../history/components/change-list/add-label-modal.tsx | 3 +++ .../features/history/components/change-list/tag-tooltip.tsx | 3 +++ .../diff-view/modals/restore-file-confirm-modal.tsx | 4 +++- .../components/diff-view/modals/restore-file-error-modal.tsx | 4 +++- .../diff-view/modals/restore-project-error-modal.tsx | 4 +++- .../components/diff-view/modals/restore-project-modal.tsx | 4 +++- services/web/frontend/stylesheets/pages/editor/history.scss | 4 ++++ 7 files changed, 22 insertions(+), 4 deletions(-) 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 460765120f..9feb0946c7 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 @@ -21,6 +21,7 @@ import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto- import { debugConsole } from '@/utils/debugging' import OLFormControl from '@/shared/components/ol/ol-form-control' import OLFormLabel from '@/shared/components/ol/ol-form-label' +import { useFeatureFlag } from '@/shared/context/split-test-context' type AddLabelModalProps = { show: boolean @@ -43,6 +44,7 @@ function AddLabelModal({ show, setShow, version }: AddLabelModalProps) { const { projectId } = useHistoryContext() const { signal } = useAbortController() const { addUpdateLabel } = useAddOrRemoveLabels() + const themed = useFeatureFlag('themed-modals') const { autoFocusedRef, resetAutoFocus } = useRefWithAutoFocus() @@ -86,6 +88,7 @@ function AddLabelModal({ show, setShow, version }: AddLabelModalProps) { onExited={handleModalExited} onHide={() => setShow(false)} id="add-history-label" + themed={themed} > {t('history_add_label')} 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 3022ae8ce4..17e9f0c602 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 @@ -22,6 +22,7 @@ import { useEditorContext } from '@/shared/context/editor-context' import OLTag from '@/shared/components/ol/ol-tag' import OLButton from '@/shared/components/ol/ol-button' import TagIcon from '@/shared/components/tag-icon' +import { useFeatureFlag } from '@/shared/context/split-test-context' type TagProps = { label: LoadedLabel @@ -38,6 +39,7 @@ const ChangeTag = forwardRef( const { signal } = useAbortController() const { removeUpdateLabel } = useAddOrRemoveLabels() const { isLoading, isSuccess, isError, error, reset, runAsync } = useAsync() + const themed = useFeatureFlag('themed-modals') const isPseudoCurrentStateLabel = isPseudoLabel(label) const isOwnedByCurrentUser = !isPseudoCurrentStateLabel ? label.user_id === currentUserId @@ -100,6 +102,7 @@ const ChangeTag = forwardRef( onExited={handleModalExited} onHide={() => setShowDeleteModal(false)} id="delete-history-label" + themed={themed} > {t('history_delete_label')} 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 9f241f33c7..c85bbab52b 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 @@ -9,6 +9,7 @@ import { } from '@/shared/components/ol/ol-modal' import OLButton from '@/shared/components/ol/ol-button' import { useTranslation } from 'react-i18next' +import { useFeatureFlag } from '@/shared/context/split-test-context' type RestoreFileConfirmModalProps = { show: boolean @@ -26,9 +27,10 @@ export function RestoreFileConfirmModal({ const { t } = useTranslation() const date = useMemo(() => formatTime(timestamp, 'Do MMMM'), [timestamp]) const time = useMemo(() => formatTime(timestamp, 'h:mm a'), [timestamp]) + const themed = useFeatureFlag('themed-modals') 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 579a9a8971..83959c9aa5 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 @@ -7,6 +7,7 @@ import { } from '@/shared/components/ol/ol-modal' import OLButton from '@/shared/components/ol/ol-button' import { useTranslation } from 'react-i18next' +import { useFeatureFlag } from '@/shared/context/split-test-context' export function RestoreFileErrorModal({ resetErrorBoundary, @@ -14,9 +15,10 @@ export function RestoreFileErrorModal({ resetErrorBoundary: VoidFunction }) { const { t } = useTranslation() + const themed = useFeatureFlag('themed-modals') return ( - + {t('restore_file_error_title')} 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 21cfefb073..078c1aaded 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 @@ -7,6 +7,7 @@ import { } from '@/shared/components/ol/ol-modal' import OLButton from '@/shared/components/ol/ol-button' import { useTranslation } from 'react-i18next' +import { useFeatureFlag } from '@/shared/context/split-test-context' export function RestoreProjectErrorModal({ resetErrorBoundary, @@ -14,9 +15,10 @@ export function RestoreProjectErrorModal({ resetErrorBoundary: VoidFunction }) { const { t } = useTranslation() + const themed = useFeatureFlag('themed-modals') 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 d096d9ae5e..2e6243b7d7 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 @@ -9,6 +9,7 @@ import { formatDate } from '@/utils/dates' import { useCallback } from 'react' import OLButton from '@/shared/components/ol/ol-button' import { useTranslation } from 'react-i18next' +import { useFeatureFlag } from '@/shared/context/split-test-context' type RestoreProjectModalProps = { setShow: React.Dispatch> @@ -26,13 +27,14 @@ export const RestoreProjectModal = ({ onRestore, }: RestoreProjectModalProps) => { const { t } = useTranslation() + const themed = useFeatureFlag('themed-modals') const onCancel = useCallback(() => { setShow(false) }, [setShow]) return ( - setShow(false)} show={show}> + setShow(false)} show={show} themed={themed}> {t('restore_this_version')} diff --git a/services/web/frontend/stylesheets/pages/editor/history.scss b/services/web/frontend/stylesheets/pages/editor/history.scss index 242ed2769f..390ebf5458 100644 --- a/services/web/frontend/stylesheets/pages/editor/history.scss +++ b/services/web/frontend/stylesheets/pages/editor/history.scss @@ -577,3 +577,7 @@ ul[role='tree'].history-file-tree-list-inner { .doc-container { background: var(--bg-light-primary); } + +#add-history-label .form-label { + color: var(--content-secondary-themed); +}