Merge pull request #36575 from overleaf/mj-generic-modals-themes

[web] Add dark mode to ide modals

GitOrigin-RevId: cd8e95e2286df46510a377ff9a69c4ab646ceabd

services/web/frontend/js/features/ide-react/components/modals/force-disconnected.tsx

@@ -7,6 +7,7 @@ import {
   OLModalHeader,
   OLModalTitle,
 } from '@/shared/components/ol/ol-modal'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 // show modal when editor is forcefully disconnected
 function ForceDisconnected() {
@@ -14,6 +15,7 @@ function ForceDisconnected() {
   const { t } = useTranslation()
   const [secondsUntilRefresh, setSecondsUntilRefresh] = useState(0)
   const [show, setShow] = useState(false)
+  const themed = useFeatureFlag('themed-modals')
 
   useEffect(() => {
     if (
@@ -55,6 +57,7 @@ function ForceDisconnected() {
       className="lock-editor-modal"
       backdrop={false}
       keyboard={false}
+      themed={themed}
     >
       <OLModalHeader closeButton={false}>
         <OLModalTitle>{t('please_wait')}</OLModalTitle>

services/web/frontend/js/features/ide-react/components/modals/generic-confirm-modal.tsx

@@ -9,6 +9,7 @@ import {
 } from '@/shared/components/ol/ol-modal'
 import OLButton from '@/shared/components/ol/ol-button'
 import { ButtonProps } from '@/shared/components/types/button-props'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 export type GenericConfirmModalOwnProps = {
   title: string
@@ -30,9 +31,10 @@ function GenericConfirmModal({
   ...modalProps
 }: GenericConfirmModalProps) {
   const { t } = useTranslation()
+  const themed = useFeatureFlag('themed-modals')
 
   return (
-    <OLModal {...modalProps}>
+    <OLModal {...modalProps} themed={themed}>
       <OLModalHeader>
         <OLModalTitle>{title}</OLModalTitle>
       </OLModalHeader>

services/web/frontend/js/features/ide-react/components/modals/generic-message-modal.tsx

@@ -8,6 +8,7 @@ import {
   OLModalTitle,
 } from '@/shared/components/ol/ol-modal'
 import OLButton from '@/shared/components/ol/ol-button'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 export type GenericMessageModalOwnProps = {
   title: string
@@ -23,9 +24,10 @@ function GenericMessageModal({
   ...modalProps
 }: GenericMessageModalProps) {
   const { t } = useTranslation()
+  const themed = useFeatureFlag('themed-modals')
 
   return (
-    <OLModal {...modalProps}>
+    <OLModal {...modalProps} themed={themed}>
       <OLModalHeader>
         <OLModalTitle>{title}</OLModalTitle>
       </OLModalHeader>

services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx

@@ -10,6 +10,7 @@ import {
   OLModalHeader,
   OLModalTitle,
 } from '@/shared/components/ol/ol-modal'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 export type OutOfSyncModalProps = {
   editorContent: string
@@ -21,6 +22,7 @@ function OutOfSyncModal({ editorContent, show, onHide }: OutOfSyncModalProps) {
   const { t } = useTranslation()
   const location = useLocation()
   const [editorContentShown, setEditorContentShown] = useState(false)
+  const themed = useFeatureFlag('themed-modals')
   const editorContentRows = (editorContent.match(/\n/g)?.length || 0) + 1
 
   useEffect(() => {
@@ -43,6 +45,7 @@ function OutOfSyncModal({ editorContent, show, onHide }: OutOfSyncModalProps) {
       className="out-of-sync-modal"
       backdrop={false}
       keyboard={false}
+      themed={themed}
     >
       <OLModalHeader>
         <OLModalTitle>{t('out_of_sync')}</OLModalTitle>

services/web/frontend/js/features/ide-react/components/modals/project-converted-from-document-modal.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/shared/components/ol/ol-modal'
 import OLButton from '@/shared/components/ol/ol-button'
 import { useEffect, useState } from 'react'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 function ProjectConvertedFromDocumentModal() {
   const [convertedFrom, setConvertedFrom] = useState<string | null>(null)
@@ -46,6 +47,7 @@ function ProjectConvertedFromImportModalContent({
   onHide: () => void
 }) {
   const { t } = useTranslation()
+  const themed = useFeatureFlag('themed-modals')
 
   return (
     <OLModal
@@ -54,6 +56,7 @@ function ProjectConvertedFromImportModalContent({
       onHide={onHide}
       id="converted-from-document-modal"
       backdrop="static"
+      themed={themed}
     >
       <OLModalHeader>
         <OLModalTitle as="h3">{t('document_ready_for_editing')}</OLModalTitle>