From e1f5edc0a13ff0b9eb25bb66b049405c8242866c Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 8 May 2024 21:01:01 -0700
Subject: [PATCH] Fix: doc links and more illegible in light mode (#6643)

---
 .../custom-field-display/custom-field-display.component.html  | 2 +-
 .../input/drag-drop-select/drag-drop-select.component.html    | 2 +-
 src-ui/src/theme.scss                                         | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html b/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html
index 161f2e1fc..3af2ccd29 100644
--- a/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html
+++ b/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html
@@ -18,7 +18,7 @@
             @case (CustomFieldDataType.DocumentLink) {
                 <div [ngbTooltip]="nameTooltip" class="d-flex gap-1 flex-wrap">
                     @for (docId of value; track docId) {
-                        <a routerLink="/documents/{{docId}}" class="badge bg-dark text-primary" title="View" i18n-title>
+                        <a routerLink="/documents/{{docId}}" class="badge bg-body text-primary" title="View" i18n-title>
                             <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{ getDocumentTitle(docId) }}</span>
                         </a>
                     }
diff --git a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html
index dd7d7b3a3..fe549382a 100644
--- a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html
+++ b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html
@@ -9,7 +9,7 @@
             <div class="badge bg-primary" cdkDrag>{{item.name}}</div>
         }
         @if (selectedItems.length === 0) {
-            <div class="badge bg-light fst-italic" i18n>{{emptyText}}</div>
+            <div class="badge bg-light text-secondary fst-italic" i18n>{{emptyText}}</div>
         }
     </div>
 </div>
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 98261b8da..4dd7e5151 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -174,6 +174,10 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
     border-color: rgba(0,0,0,0) !important;
   }
 
+  .badge.bg-body {
+    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
+  }
+
   .document-card .card-body.bg-light {
     background-color: var(--bs-body-bg);
   }