Enable themed modals

services/web/config/settings.defaults.js

@@ -1238,6 +1238,7 @@ module.exports = {
   },
 
   splitTestOverrides: {
+    'themed-modals': 'enabled',
     ...(process.env.ENABLE_EDITOR_TABS?.toLowerCase() === 'true' ? {
       'editor-tabs': 'enabled',
     } : {}),

services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx

@@ -57,7 +57,7 @@ export default function ShareProjectModalContent({
   projectName,
 }: ShareProjectModalContentProps) {
   return (
-    <OLModal show={show} onShow={onShow} onHide={cancel} animation={animation}>
+    <OLModal show={show} onShow={onShow} onHide={cancel} animation={animation} themed="true">
       <ShareProjectModalContentInnerWithErrorBoundary
         inFlight={inFlight}
         error={error}

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

@@ -37,6 +37,18 @@
     .modal-header .btn-close {
       --bs-btn-close-bg: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414%27/%3e%3c/svg%3e');
     }
+
+    .form-control:disabled {
+      background-color: var(--bg-disabled);
+      color: var(--content-disabled);
+    }
+
+    @import 'table';
+    .table,
+    .table-container {
+      @include dark-table;
+    }
+
   }
 
   .modal-backdrop-themed {
@@ -100,12 +112,43 @@
       margin: 0;
     }
   }
+
+  .modal-body {
+    hr {
+      border-color: var(--border-divider-themed);
+    }
+    .form-group {
+      .form-label {
+        color: var(--content-secondary-themed);
+      }
+      .form-select:disabled {
+        color: var(--content-disabled-themed);
+        background-color: var(--bg-disabled-themed);
+      }
+    }
+    button.btn-link, a {
+      color: var(--link-ui-themed) !important;
+      &:hover {
+        color: var(--link-ui-hover-themed) !important;
+      }
+    }
+    .card {
+      --bs-card-bg: var(--bg-secondary-themed);
+      --bs-card-color: var(--content-primary-themed);
+      .card-header {
+         color: var(--content-primary-themed);
+      }
+      .card-body .text-muted {
+         color: var(--content-primary-themed) !important;
+      }
+    }
+  }
 }
 
 // Git bridge modal
 .git-bridge-copy {
-  background: var(--bg-light-secondary);
+  background: var(--bg-secondary-themed);
-  color: var(--content-primary);
+  color: var(--content-primary-themed);
   padding: var(--spacing-05);
   border-radius: var(--border-radius-base);
   display: flex;
@@ -114,8 +157,15 @@
   align-items: center;
   margin: var(--spacing-09) 0;
 
+  .copy-button {
+    color: var(--content-primary-themed);
+    &:hover {
+      background-color: var(--bg-tertiary-themed);
+    }
+  }
+
   & code {
-    color: var(--content-primary);
+    color: var(--content-primary-themed);
     word-break: break-word;
   }
 }

services/web/frontend/stylesheets/pages/editor/references-search.scss

@@ -54,7 +54,7 @@
         cursor: pointer;
       }
 
-      border-bottom: 1px solid var(--border-divider);
+      border-bottom: 1px solid var(--border-divider-themed);
       padding: var(--spacing-04);
 
       &:last-child {
@@ -64,7 +64,7 @@
       border-left: var(--spacing-02) solid transparent;
 
       &.selected-search-result-hit {
-        color: var(--content-positive);
+        color: var(--content-positive-themed);
       }
 
       .hit-title {

services/web/frontend/stylesheets/pages/editor/share.scss

@@ -53,7 +53,7 @@
   }
 
   .public-access-level.public-access-level-notice {
-    background-color: var(--neutral-10);
+    background-color: var(--bg-secondary-themed);
     border-bottom: none;
     margin-top: var(--spacing-07);
     padding-top: var(--spacing-07);
@@ -62,7 +62,7 @@
   .project-member,
   .project-invite {
     &:hover {
-      background-color: var(--neutral-10);
+      background-color: var(--bg-secondary-themed);
     }
   }
 
@@ -74,7 +74,7 @@
       margin-left: auto;
 
       .select-trigger {
-        color: var(--neutral-70);
+        color: var(--bs-modal);
         border: none;
         background-color: transparent;
         text-align: right;
@@ -130,6 +130,9 @@
         &:last-child {
           margin-bottom: 0;
         }
+        .form-text {
+          color: var(--content-secondary-themed);
+        }
       }
 
       .privileges {

services/web/frontend/stylesheets/pages/editor/tags-input.scss

@@ -19,13 +19,15 @@
   overflow: hidden;
   word-wrap: break-word;
   cursor: text;
-  background-color: var(--white);
+  background-color: var(--bg-primary-themed);
   height: 100%;
   display: flex;
   flex-wrap: wrap;
 
   .badge-tag {
     margin: var(--spacing-01);
+    color: var(--content-primary-themed);
+    background-color: var(--bg-tertiary-themed) !important;
 
     .badge-tag-content {
       max-width: initial;
@@ -64,6 +66,7 @@
   flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  background-color: var(--bg-primary-themed);
 
   &::placeholder {
     color: $input-placeholder-color;

services/web/modules/admin-tools/frontend/js/project-list/components/modals/projects-action-modal.tsx

@@ -104,6 +104,7 @@ function ProjectsActionModal({
       show={showModal}
       onHide={handleCloseModal}
       id="admin-action-project-modal"
+      themed="true"
       backdrop="static"
     >
       <OLModalHeader>

services/web/modules/admin-tools/frontend/js/project-list/components/modals/transfer-project-modal.tsx

@@ -93,8 +93,7 @@ function TransferProjectModal({
     >
       <p>{t('ownership_of_projects_will_be_transferred')}</p>
       <ProjectsList projects={projects} projectsToDisplay={projectsToDisplay} />
-
+      <OLForm id="ownership-form">
-      <OLForm className="add-collabs">
         <OLFormGroup>
           <SelectOwnerForm
             loading={!potentialOwners}
@@ -104,15 +103,15 @@ function TransferProjectModal({
           />
         </OLFormGroup>
 
-          <OLFormGroup controlId="send_notification_emails_checkbox">
+        <OLFormGroup controlId="send_notification_emails_checkbox">
-            <OLFormCheckbox
+          <OLFormCheckbox
-              autoComplete="off"
+            autoComplete="off"
-              onChange={handleCheckboxChange}
+            onChange={handleCheckboxChange}
-              name="sendEmails"
+            name="sendEmails"
-              label={t('send_notification_emails_to_users')}
+            label={t('send_notification_emails_to_users')}
-              checked={sendEmails}
+            checked={sendEmails}
-            />
+          />
-          </OLFormGroup>
+        </OLFormGroup>
       </OLForm>
     </ProjectsActionModal>
   )

services/web/modules/admin-tools/frontend/js/user-list/components/create-account-button/create-account-modal.tsx

@@ -13,6 +13,7 @@ function CreateAccountModal({ onHide }: CreateAccountModalProps) {
       onHide={onHide}
       id="blank-user-modal"
       backdrop="static"
+      themed="true"
     >
       <ModalContentNewUserForm handleCloseModal={onHide} />
     </OLModal>

services/web/modules/admin-tools/frontend/js/user-list/components/modals/update-user-modal.tsx

@@ -4,7 +4,6 @@ import getMeta from '@/utils/meta'
 import UsersActionModal from './users-action-modal'
 import UsersList from './users-list'
 import Notification from '@/shared/components/notification'
-import OLForm from '@/shared/components/ol/ol-form'
 import OLFormLabel from '@/shared/components/ol/ol-form-label'
 import OLFormControl from '@/shared/components/ol/ol-form-control'
 import OLFormGroup from '@/shared/components/ol/ol-form-group'

services/web/modules/admin-tools/frontend/js/user-list/components/modals/users-action-modal.tsx

@@ -4,6 +4,7 @@ import * as eventTracking from '@/infrastructure/event-tracking'
 import { isSmallDevice } from '@/infrastructure/event-tracking'
 import { getUserFacingMessage } from '@/infrastructure/fetch-json'
 import useIsMounted from '@/shared/hooks/use-is-mounted'
+import OLForm from '@/shared/components/ol/ol-form'
 import OLButton from '@/shared/components/ol/ol-button'
 import {
   OLModal,
@@ -97,12 +98,17 @@ function UsersActionModal({
       onHide={handleCloseModal}
       id="action-user-modal"
       backdrop="static"
+      themed="true"
     >
       <OLModalHeader>
         <OLModalTitle>{title}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>
+      <OLForm 
+        id="action-user-form"
+      >
         {children}
+      </OLForm>
         {!isProcessing &&
           errors.length > 0 &&
           errors.map((error, i) => (
@@ -122,8 +128,8 @@ function UsersActionModal({
           </OLButton>
         )}
         <OLButton
-          variant={variant}
           onClick={() => handleActionForUsers(users, options)}
+          variant={variant}
           disabled={isProcessing || actionIsDisabled}
         >
           {actionLabel}

services/web/modules/git-bridge/frontend/js/card/components/git-modal.tsx

@@ -32,6 +32,7 @@ export default function GitModal({
       id="git-sync-modal"
       backdrop="static"
       size="lg"
+      themed="true"
     >
 
       <OLModalHeader closeButton>

services/web/modules/github-sync/frontend/js/components/import-from-github-modal-wrapper.tsx

@@ -211,6 +211,7 @@ export default function ImportFromGitHubModal({ onHide }: { onHide: () => void }
       size="lg"
       onHide={onHide}
       backdrop="static"
+      themed="true"
     >
       <ImportFromGitHubModalContent handleHide={onHide} />
     </OLModal>

services/web/modules/github-sync/frontend/js/components/modals/git-sync-modal.tsx

@@ -128,7 +128,7 @@ const {
   }, [show, modalStatus, projectId, runAsyncConn, runAsync])
 
   return (
-    <OLModal show={show} onHide={handleHide} backdrop="static">
+    <OLModal show={show} onHide={handleHide} backdrop="static" themed="true">
       <OLModalHeader closeButton>
         <OLModalTitle>{t('sync_with_github')}</OLModalTitle>
       </OLModalHeader>

services/web/modules/reference-picker/frontend/components/reference-picker-modal.tsx

@@ -299,7 +299,7 @@ const scrollToReference = useCallback((key: string) => {
   }, [focusArea, focusedIndex])
 
   return (
-    <OLModal show={show} onHide={onClose} size="lg">
+    <OLModal show={show} onHide={onClose} size="lg" themed="true">
       <OLModalHeader>
         <OLModalTitle>{t('references_picker_title')}</OLModalTitle>
       </OLModalHeader>

services/web/modules/reference-picker/frontend/styles/reference-picker.scss

@@ -1,3 +1,21 @@
+:root {
+  --badge-bg-color-existing: var(--ds-color-green-900);
+  --badge-bg-color-nonexistent: var(--ds-color-red-950);
+  --badge-bg-color-existing-hover: var(--ds-color-green-800);
+  --badge-close-color: var(--content-primary-dark);
+  --badge-close-bg-color-hover: var(--bg-dark-tertiary);
+  --search-result-at-focus-bg-color: var(--ds-color-teal-950);
+}
+
+@include theme('light') {
+  --badge-bg-color-existing: var(--ds-color-green-50);
+  --badge-bg-color-nonexistent: var(--ds-color-red-50);
+  --badge-bg-color-existing-hover: var(--ds-color-green-100);
+  --badge-close-color: var(--content-primary);
+  --badge-close-bg-color-hover: var(--bg-light-tertiary);
+  --search-result-at-focus-bg-color: var(--ds-color-teal-50);
+}
+
 .references-search-modal {
   .selected-key-tags {
     position: relative;
@@ -11,26 +29,31 @@
     font-size: var(--font-size-02);
     margin-top: -10px;
     margin-bottom: 8px;
-    box-shadow: 0 1px 0 var(--ds-color-neutral-100);
+    box-shadow: 0 1px 0 var(--border-divider-themed);
     padding-bottom: 6px;
   }
   .selected-key-tags .existing-key-tag .badge-tag {
-    background-color: var(--ds-color-green-50) !important;
+    background-color: var(--badge-bg-color-existing) !important;
   }
   .selected-key-tags .nonexistent-key-tag .badge-tag {
-    background-color: var(--ds-color-red-50) !important;
+    background-color: var(--badge-bg-color-nonexistent) !important;
   }
   .existing-key-tag .badge-tag-content-btn:hover {
-    background-color: var(--ds-color-green-100);
+    background-color: var(--badge-bg-color-existing-hover);
   }
   .nonexistent-key-tag .badge-tag-content-btn:hover {
     background-color: transparent;
   }
+  .badge-close {
+    color: var(--badge-close-color);
+  }
+
   .badge-close:hover,
   .badge-close:focus {
-    background-color: var(--ds-color-neutral-100);
+    background-color: var(--badge-close-bg-color-hover);
   }
 
+
   .search-results {
     .search-results-scroll-container {
       max-height: calc(100vh - 330px);
@@ -38,7 +61,7 @@
     }
     .search-result-hit {
       &:focus {
-        background: var(--ds-color-yellow-50);
+        background: var(--search-result-at-focus-bg-color);
         outline: none;
       }
     }

services/web/modules/zotero/frontend/js/components/zotero-link-info-modal.tsx

@@ -43,8 +43,7 @@ const ZoteroLinkInfoModal = ({ show, isError, handleHide }: ZoteroLinkInfoModalP
   }, [show])
 
   return (
-    <>
+    <OLModal show={show} onHide={handleHide} backdrop="static" themed="true">
-      <OLModal show={show} onHide={handleHide} backdrop="static">
       <OLModalHeader closeButton>
         <OLModalTitle>{t('zotero_integration')}</OLModalTitle>
       </OLModalHeader>
@@ -101,8 +100,7 @@ const ZoteroLinkInfoModal = ({ show, isError, handleHide }: ZoteroLinkInfoModalP
           {t('close')}
         </OLButton>
       </OLModalFooter>
-      </OLModal>
+    </OLModal>
-    </>
   )
 }
 

services/web/modules/zotero/frontend/js/components/zotero-widget.tsx

@@ -143,6 +143,7 @@ export const ZoteroWidget = function ZoteroWidget() {
         show={showUnlinkModal}
         onHide={() => setShowUnlinkModal(false)}
         backdrop="static"
+        themed="true"
       >
         <OLModalHeader>
           <OLModalTitle>