Merge pull request #36539 from overleaf/mj-misc-dark-mode-modals-core1

[web] Add dark mode to misc editor modals

GitOrigin-RevId: 3d7bd45476b0f814abfc26fa3da3eecca54342e8

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 (
     <OLModal
       animation
@@ -17,6 +20,7 @@ function DictionaryModal({ show, handleHide }: DictionaryModalProps) {
       id="dictionary-modal"
       data-testid="dictionary-modal"
       size="sm"
+      themed={themed}
     >
       <DictionaryModalContent handleHide={handleHide} />
     </OLModal>

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 = () => {
       </OLDropdown>
 
       {showDisableModal && (
-        <OLModal show onHide={closeDisableModal}>
+        <OLModal show onHide={closeDisableModal} themed={themed}>
           <OLModalHeader>
             <OLModalTitle>{t('disable_equation_preview')}</OLModalTitle>
           </OLModalHeader>

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 (
     <OLModal
       animation
@@ -18,6 +21,7 @@ const WordCountModal = memo(function WordCountModal({
       id="word-count-modal"
       data-testid="word-count-modal"
       initialFocus={false}
+      themed={themed}
     >
       <WordCountModalContent handleHide={handleHide} />
     </OLModal>

services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx

@@ -139,17 +139,17 @@ export const WordCountsClient: FC<{ data: WordCountData }> = ({ data }) => {
           </tbody>
         </table>
       </Row>
-      <Row className="border-top py-2">
+      <Row className="word-count-row py-2">
         <Col xs={12}>
           <b>{t('headers')}:</b> {data.headers}
         </Col>
       </Row>
-      <Row className="border-top py-2">
+      <Row className="word-count-row py-2">
         <Col xs={12}>
           <b>{t('inline_math')}:</b> {data.mathInline}
         </Col>
       </Row>
-      <Row className="border-top py-2 pb-0">
+      <Row className="word-count-row py-2 pb-0">
         <Col xs={12}>
           <b>{t('display_math')}:</b> {data.mathDisplay}
         </Col>

services/web/frontend/stylesheets/components/all.scss

@@ -50,3 +50,4 @@
 @import 'labeled-divider';
 @import 'autocomplete';
 @import 'group-users';
+@import 'word-count';

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 {

services/web/frontend/stylesheets/components/word-count.scss

@@ -0,0 +1,3 @@
+.word-count-row {
+  border-top: 1px solid var(--border-divider-themed);
+}