Merge pull request #36453 from overleaf/mj-themed-table-generator-modals

[web] Add dark mode support for table generator modals

GitOrigin-RevId: aeb0d0e8eae2b4257c287cc322d1eb7b8d9b9a35

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

@@ -8,10 +8,12 @@ import {
 import OLButton from '@/shared/components/ol/ol-button'
 import { useTabularContext } from './contexts/tabular-context'
 import { Trans, useTranslation } from 'react-i18next'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 export const TableGeneratorHelpModal = () => {
   const { helpShown, hideHelp } = useTabularContext()
   const { t } = useTranslation()
+  const themed = useFeatureFlag('themed-modals')
   if (!helpShown) return null
 
   return (
@@ -19,6 +21,7 @@ export const TableGeneratorHelpModal = () => {
       show={helpShown}
       onHide={hideHelp}
       className="table-generator-help-modal"
+      themed={themed}
     >
       <OLModalHeader>
         <OLModalTitle>{t('help')}</OLModalTitle>

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/column-width-modal/modal.tsx

@@ -32,6 +32,7 @@ import OLCol from '@/shared/components/ol/ol-col'
 import OLRow from '@/shared/components/ol/ol-row'
 import OLForm from '@/shared/components/ol/ol-form'
 import MaterialIcon from '@/shared/components/material-icon'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 type UnitDescription = { label: string; tooltip?: string } | undefined
 
@@ -49,6 +50,7 @@ const ColumnWidthModalBody = () => {
   const { selection } = useSelectionContext()
   const { positions, table } = useTableContext()
   const { t } = useTranslation()
+  const themed = useFeatureFlag('themed-modals')
   const [currentUnit, setCurrentUnit] = useState<WidthUnit | undefined | null>(
     '%'
   )
@@ -137,6 +139,7 @@ const ColumnWidthModalBody = () => {
       show={columnWidthModalShown}
       onHide={closeColumnWidthModal}
       className="table-generator-width-modal"
+      themed={themed}
     >
       <OLModalHeader>
         <OLModalTitle>{t('set_column_width')}</OLModalTitle>

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

@@ -531,6 +531,7 @@ input[type='range'] {
 
 input.form-control[type='text'],
 input.form-control[type='search'],
+input.form-control[type='number'],
 textarea.form-control {
   color: var(--input-field-color);
   background-color: var(--input-field-bg);

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

@@ -34,7 +34,7 @@
 @import 'editor/tags-input';
 @import 'editor/review-panel';
 @import 'editor/editor-floating-menu';
-@import 'editor/table-generator-column-width-modal';
+@import 'editor/table-generator';
 @import 'editor/math-preview';
 @import 'editor/references-search';
 @import 'editor/editor-survey';

services/web/frontend/stylesheets/pages/editor/table-generator-column-width-modal.scss

@@ -1,13 +0,0 @@
-.table-generator-width-modal {
-  .table-generator-width-label {
-    width: 100%;
-  }
-
-  .table-generator-usepackage-copy {
-    display: flex;
-    justify-content: space-between;
-    padding: var(--spacing-03) var(--spacing-05);
-    background: var(--bg-light-secondary);
-    border: 1px solid var(--border-primary-dark);
-  }
-}

services/web/frontend/stylesheets/pages/editor/table-generator.scss

@@ -0,0 +1,25 @@
+.table-generator-help-modal {
+  @include themed-links;
+
+  --bs-code-color: var(--content-secondary-themed);
+}
+
+.table-generator-width-modal {
+  --bs-code-color: var(--content-secondary-themed);
+
+  .form-label {
+    color: var(--content-secondary-themed);
+  }
+
+  .table-generator-width-label {
+    width: 100%;
+  }
+
+  .table-generator-usepackage-copy {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--spacing-03) var(--spacing-05);
+    background: var(--bg-secondary-themed);
+    border: 1px solid var(--border-divider-themed);
+  }
+}