From 51ae580da914d8b2d92c09232c2ddce8ce4d7f06 Mon Sep 17 00:00:00 2001 From: Mathias Jakobsen Date: Mon, 17 Aug 2026 08:10:09 +0100 Subject: [PATCH] Merge pull request #36539 from overleaf/mj-misc-dark-mode-modals-core1 [web] Add dark mode to misc editor modals GitOrigin-RevId: 3d7bd45476b0f814abfc26fa3da3eecca54342e8 --- .../js/features/dictionary/components/dictionary-modal.tsx | 4 ++++ .../source-editor/components/math-preview-tooltip.tsx | 5 ++++- .../word-count-modal/components/word-count-modal.tsx | 4 ++++ .../word-count-modal/components/word-counts-client.tsx | 6 +++--- services/web/frontend/stylesheets/components/all.scss | 1 + .../web/frontend/stylesheets/components/dictionary.scss | 2 +- .../web/frontend/stylesheets/components/word-count.scss | 3 +++ 7 files changed, 20 insertions(+), 5 deletions(-) create mode 100644 services/web/frontend/stylesheets/components/word-count.scss 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 b49258e8ab..bf0311bff5 100644 --- a/services/web/frontend/js/features/dictionary/components/dictionary-modal.tsx +++ b/services/web/frontend/js/features/dictionary/components/dictionary-modal.tsx @@ -2,6 +2,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 { useFeatureFlag } from '@/shared/context/split-test-context' type DictionaryModalProps = { show?: boolean @@ -9,6 +10,8 @@ type DictionaryModalProps = { } function DictionaryModal({ show, handleHide }: DictionaryModalProps) { + const themed = useFeatureFlag('themed-modals') + return ( 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 51371addc4..a7e53d39d4 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 @@ -24,6 +24,7 @@ import { mathPreviewStateField } from '../extensions/math-preview' import { getTooltip } from '@codemirror/view' import ReactDOM from 'react-dom' import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item' +import { useFeatureFlag } from '@/shared/context/split-test-context' const MathPreviewTooltipContainer: FC = () => { const state = useCodeMirrorStateContext() @@ -59,6 +60,8 @@ const MathPreviewTooltipContainer: FC = () => { const MathPreviewTooltipMenu: FC = () => { const { t } = useTranslation() + const themed = useFeatureFlag('themed-modals') + const [showDisableModal, setShowDisableModal] = useState(false) const { setMathPreview } = useProjectSettingsContext() const openDisableModal = useCallback(() => setShowDisableModal(true), []) @@ -115,7 +118,7 @@ const MathPreviewTooltipMenu: FC = () => { {showDisableModal && ( - + {t('disable_equation_preview')} diff --git a/services/web/frontend/js/features/word-count-modal/components/word-count-modal.tsx b/services/web/frontend/js/features/word-count-modal/components/word-count-modal.tsx index 66227f8e1d..c5e62bfc8d 100644 --- a/services/web/frontend/js/features/word-count-modal/components/word-count-modal.tsx +++ b/services/web/frontend/js/features/word-count-modal/components/word-count-modal.tsx @@ -2,6 +2,7 @@ import { memo } from 'react' import WordCountModalContent from './word-count-modal-content' import withErrorBoundary from '../../../infrastructure/error-boundary' import { OLModal } from '@/shared/components/ol/ol-modal' +import { useFeatureFlag } from '@/shared/context/split-test-context' const WordCountModal = memo(function WordCountModal({ show, @@ -10,6 +11,8 @@ const WordCountModal = memo(function WordCountModal({ show: boolean handleHide: () => void }) { + const themed = useFeatureFlag('themed-modals') + return ( diff --git a/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx b/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx index e206a9d537..2197e031bf 100644 --- a/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx +++ b/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx @@ -139,17 +139,17 @@ export const WordCountsClient: FC<{ data: WordCountData }> = ({ data }) => { - + {t('headers')}: {data.headers} - + {t('inline_math')}: {data.mathInline} - + {t('display_math')}: {data.mathDisplay} diff --git a/services/web/frontend/stylesheets/components/all.scss b/services/web/frontend/stylesheets/components/all.scss index de515f795c..6e94a65061 100644 --- a/services/web/frontend/stylesheets/components/all.scss +++ b/services/web/frontend/stylesheets/components/all.scss @@ -50,3 +50,4 @@ @import 'labeled-divider'; @import 'autocomplete'; @import 'group-users'; +@import 'word-count'; diff --git a/services/web/frontend/stylesheets/components/dictionary.scss b/services/web/frontend/stylesheets/components/dictionary.scss index 952050effa..14957c0d04 100644 --- a/services/web/frontend/stylesheets/components/dictionary.scss +++ b/services/web/frontend/stylesheets/components/dictionary.scss @@ -15,7 +15,7 @@ word-break: break-all; display: flex; padding: var(--spacing-04); - border-bottom: solid 1px var(--border-divider); + border-bottom: solid 1px var(--border-divider-themed); align-items: center; &:last-child { diff --git a/services/web/frontend/stylesheets/components/word-count.scss b/services/web/frontend/stylesheets/components/word-count.scss new file mode 100644 index 0000000000..0658f350e0 --- /dev/null +++ b/services/web/frontend/stylesheets/components/word-count.scss @@ -0,0 +1,3 @@ +.word-count-row { + border-top: 1px solid var(--border-divider-themed); +}