Merge pull request #36438 from overleaf/mj-themed-figure-modal

[web] Support theming in figure modal

GitOrigin-RevId: 31fcc5b8585cb9f81ff073fbc07b7b36e04ba54d

services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-help.tsx

@@ -11,7 +11,7 @@ const LearnWikiLink: FC<React.PropsWithChildren<{ href: string }>> = ({
 export const FigureModalHelp = () => {
   const { t } = useTranslation()
   return (
-    <>
+    <div className="figure-modal-help">
       <p>{t('this_tool_helps_you_insert_figures')}</p>
       <b>{t('editing_captions')}</b>
       <p>{t('when_you_tick_the_include_caption_box')}</p>
@@ -63,6 +63,6 @@ export const FigureModalHelp = () => {
           ]}
         />
       </p>
-    </>
+    </div>
   )
 }

services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal.tsx

@@ -28,6 +28,7 @@ import { prepareLines } from '../../utils/prepare-lines'
 import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
 import { isSvgFile } from '../../utils/file'
 import { PastedImageData } from '../../utils/paste-image'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 const FigureModalBody = lazy(() => import('./figure-modal-body'))
 
@@ -41,6 +42,7 @@ export const FigureModal = memo(function FigureModal() {
 
 const FigureModalContent = () => {
   const { t } = useTranslation()
+  const themed = useFeatureFlag('themed-modals')
 
   const getTitle = useCallback(
     (state: FigureModalSource) => {
@@ -344,6 +346,7 @@ const FigureModalContent = () => {
       className="figure-modal"
       show
       returnFocusOnDeactivate={false}
+      themed={themed}
     >
       <OLModalHeader>
         <OLModalTitle>

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

@@ -28,7 +28,7 @@
     --bs-modal-border-color: var(--border-divider-dark);
     --bs-modal-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 40%);
     --bs-modal-header-border-color: var(--border-divider-dark);
-    --bs-modal-footer-bg: var(--bg-dark-secondary);
+    --bs-modal-footer-bg: var(--bg-dark-primary);
     --bs-modal-footer-border-color: var(--border-divider-dark);
     --bs-heading-color: var(--content-primary-dark);
 

services/web/frontend/stylesheets/pages/editor/figure-modal.scss

@@ -1,8 +1,45 @@
+:root {
+  --figure-modal-source-button-bg-color: var(--bg-light-primary);
+}
+
+@include theme('default') {
+  .modal-themed {
+    --figure-modal-source-button-bg-color: var(--bg-dark-secondary);
+  }
+}
+
+.figure-modal {
+  @include themed-links;
+
+  .form-label,
+  .form-text {
+    color: var(--content-secondary-themed);
+  }
+
+  .form-label:has(+ .form-control[disabled], + .form-control-wrapper-disabled) {
+    color: var(--content-disabled-themed);
+  }
+
+  .text-success {
+    color: var(--content-positive-themed) !important;
+  }
+
+  .text-danger {
+    color: var(--content-danger-themed) !important;
+  }
+}
+
+.figure-modal-help {
+  --bs-code-color: var(--content-secondary-themed);
+
+  color: var(--content-primary-themed);
+}
+
 .figure-modal-help-link,
 .figure-modal-help-link:hover,
 .figure-modal-help-link:focus,
 .figure-modal-help-link:active {
-  color: var(--neutral-90) !important;
+  color: var(--content-primary-themed) !important;
   text-decoration: none;
 }
 
@@ -22,8 +59,8 @@
   width: 100%;
   height: 120px;
   padding: var(--spacing-07) var(--spacing-08);
-  border: 1px dashed #eaeaea;
-  background-color: #fafafa;
+  border: 1px dashed var(--border-divider-themed);
+  background-color: var(--bg-secondary-themed);
   justify-content: space-between;
   border-radius: var(--border-radius-medium);
 }
@@ -31,9 +68,9 @@
 .file-container-file {
   display: flex;
   align-items: center;
-  border: 1px solid var(--neutral-20);
+  border: 1px solid var(--border-divider-themed);
   border-radius: var(--border-radius-medium);
-  background-color: white;
+  background-color: var(--bg-primary-themed);
   height: 100%;
   padding: var(--spacing-06) var(--spacing-07);
 }
@@ -68,7 +105,8 @@
   align-items: center;
   box-shadow: 0 2px 4px 0 #1e253029;
   line-height: 44px;
-  background-color: var(--white);
+  background-color: var(--figure-modal-source-button-bg-color);
+  color: var(--content-primary-themed);
   border-radius: var(--border-radius-base);
   border: none;
   padding: 0 var(--spacing-04);