Merge pull request #36463 from overleaf/mj-themed-history-modals

[web] Add theme support to history modals

GitOrigin-RevId: 10cc2176b91213342e066fad8ff0eba265d868ec
This commit is contained in:
Mathias Jakobsen
2026-09-17 11:54:00 +00:00
committed by Copybot
parent 6a800028be
commit 2cb515ac2f
7 changed files with 22 additions and 4 deletions
@@ -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<HTMLInputElement>()
@@ -86,6 +88,7 @@ function AddLabelModal({ show, setShow, version }: AddLabelModalProps) {
onExited={handleModalExited}
onHide={() => setShow(false)}
id="add-history-label"
themed={themed}
>
<OLModalHeader>
<OLModalTitle>{t('history_add_label')}</OLModalTitle>
@@ -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<HTMLElement, TagProps>(
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<HTMLElement, TagProps>(
onExited={handleModalExited}
onHide={() => setShowDeleteModal(false)}
id="delete-history-label"
themed={themed}
>
<OLModalHeader>
<OLModalTitle>{t('history_delete_label')}</OLModalTitle>
@@ -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 (
<OLModal show={show} onHide={onHide}>
<OLModal show={show} onHide={onHide} themed={themed}>
<OLModalHeader>
<OLModalTitle>{t('restore_file_confirmation_title')}</OLModalTitle>
</OLModalHeader>
@@ -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 (
<OLModal show onHide={resetErrorBoundary}>
<OLModal show onHide={resetErrorBoundary} themed={themed}>
<OLModalHeader>
<OLModalTitle>{t('restore_file_error_title')}</OLModalTitle>
</OLModalHeader>
@@ -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 (
<OLModal show onHide={resetErrorBoundary}>
<OLModal show onHide={resetErrorBoundary} themed={themed}>
<OLModalHeader>
<OLModalTitle>
{t('an_error_occured_while_restoring_project')}
@@ -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<React.SetStateAction<boolean>>
@@ -26,13 +27,14 @@ export const RestoreProjectModal = ({
onRestore,
}: RestoreProjectModalProps) => {
const { t } = useTranslation()
const themed = useFeatureFlag('themed-modals')
const onCancel = useCallback(() => {
setShow(false)
}, [setShow])
return (
<OLModal onHide={() => setShow(false)} show={show}>
<OLModal onHide={() => setShow(false)} show={show} themed={themed}>
<OLModalHeader>
<OLModalTitle>{t('restore_this_version')}</OLModalTitle>
</OLModalHeader>