From 7bd6f4a4eabf27c7b6132781e93376319060f62b Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 13 Mar 2022 08:41:36 -0700
Subject: [PATCH 1/2] Prevent event collision

---
 .../app/components/document-list/document-list.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index e7ee95796..e3b096e16 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -147,10 +147,10 @@
         i18n>Added</th>
     </thead>
     <tbody>
-      <tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" (click)="toggleSelected(d, $event)" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
+      <tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" (click)="toggleSelected(d, $event); $event.stopPropagation();" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
         <td>
           <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="docCheck{{d.id}}" [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event)">
+            <input type="checkbox" class="form-check-input" id="docCheck{{d.id}}" [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event); $event.stopPropagation();">
             <label class="form-check-label" for="docCheck{{d.id}}"></label>
           </div>
         </td>

From 57f35292d555c278015afd2ceadf672cf464dad1 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 13 Mar 2022 08:45:39 -0700
Subject: [PATCH 2/2] Fix dark mode selected table row background color

---
 src-ui/src/theme_dark.scss | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index 39cb65e45..9e4d64175 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -31,16 +31,17 @@ $border-color-dark-mode: #47494f;
   --ngx-bg-alt: #{$bg-dark-mode-alt};
   --ngx-body-color-accent: #{$text-color-dark-mode-accent};
   --ngx-focus-alpha: 0.7;
+  --ngx-primary-faded: var(--ngx-primary-darken-15);
 
   .navbar.bg-primary{
     --bs-primary: hsl(var(--pngx-primary),var(--pngx-primary-lightness));
     --bs-primary-rgb: var(--bs-primary);
   }
-  
+
   .navbar-brand {
     color: var(--bs-body-color);
   }
-  
+
   .border {
     border-color: var(--bs-border-color) !important;
   }
@@ -134,7 +135,6 @@ $border-color-dark-mode: #47494f;
       background-color: $bg-light-dark-mode;
       color: $text-color-dark-mode-accent;
     }
-
   }
 
   .table-striped > tbody > tr:nth-of-type(odd) > * {
@@ -149,14 +149,10 @@ $border-color-dark-mode: #47494f;
     filter: invert(1) grayscale(100%) brightness(200%);
   }
 
-  .ngx-file-drop__drop-zone--over {
-    background-color: var(--ngx-primary-darken-15) !important;
-  }
-
   .toast {
     background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%), 0.9);
   }
-  
+
   .toast-header {
     background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%), 0.9);
   }