Enable themed modals

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);
-  color: var(--content-primary);
+  background: var(--bg-secondary-themed);
+  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;