Enable themed modals

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 className="add-collabs">
+      <OLForm id="ownership-form">
         <OLFormGroup>
           <SelectOwnerForm
             loading={!potentialOwners}
@@ -104,15 +103,15 @@ function TransferProjectModal({
           />
         </OLFormGroup>
 
-          <OLFormGroup controlId="send_notification_emails_checkbox">
-            <OLFormCheckbox
-              autoComplete="off"
-              onChange={handleCheckboxChange}
-              name="sendEmails"
-              label={t('send_notification_emails_to_users')}
-              checked={sendEmails}
-            />
-          </OLFormGroup>
+        <OLFormGroup controlId="send_notification_emails_checkbox">
+          <OLFormCheckbox
+            autoComplete="off"
+            onChange={handleCheckboxChange}
+            name="sendEmails"
+            label={t('send_notification_emails_to_users')}
+            checked={sendEmails}
+          />
+        </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">
+    <OLModal show={show} onHide={handleHide} backdrop="static" themed="true">
       <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>