From b44ca770a5fde737bff999ad05aa57657dc506c2 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 28 Dec 2020 14:20:00 -0800
Subject: [PATCH] Fix some white partial pixels around borders

---
 .../document-card-large.component.html                 | 10 +++++-----
 .../document-card-large.component.scss                 |  6 +-----
 .../document-card-small.component.html                 |  4 ++--
 src-ui/src/theme_dark.scss                             |  6 ++++--
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index c1757eb35..729b02613 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -1,7 +1,7 @@
 <div class="card mb-3 bg-light shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable">
   <div class="row no-gutters">
-    <div class="col-md-2 d-none d-lg-block doc-img-background" [class.doc-img-background-selected]="selected">
-      <img [src]="getThumbUrl()" class="card-img doc-img border-right" (click)="setSelected(selectable ? !selected : false)">
+    <div class="col-md-2 d-none d-lg-block doc-img-background rounded-left" [class.doc-img-background-selected]="selected">
+      <img [src]="getThumbUrl()" class="card-img doc-img border-right rounded-left" (click)="setSelected(selectable ? !selected : false)">
 
       <div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected">
         <div class="custom-control custom-checkbox">
@@ -55,16 +55,16 @@
                 <path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
               </svg>&nbsp;<ng-container i18n>Download</ng-container>
             </a>
-            
+
           </div>
 
           <small class="text-muted ml-auto" i18n>Score:</small>
 
           <ngb-progressbar *ngIf="searchScore" [type]="searchScoreClass" [value]="searchScore" class="search-score-bar mx-2" [max]="1"></ngb-progressbar>
-          
+
           <small class="text-muted" i18n>Created: {{document.created | date}}</small>
         </div>
-        
+
       </div>
     </div>
   </div>
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
index eb744d2af..0b1604d90 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
@@ -30,10 +30,6 @@
   border-color: $primary;
 }
 
-.doc-img-background {
-  background-color: white;
-}
-
 .doc-img-background-selected {
   background-color: $primaryFaded;
-}
\ No newline at end of file
+}
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 9d808e84b..83ba8c274 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -1,7 +1,7 @@
 <div class="col p-2 h-100">
-  <div class="card h-100 shadow-sm" [class.card-selected]="selected">
+  <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected">
     <div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected">
-      <img class="card-img doc-img" [src]="getThumbUrl()" (click)="setSelected(!selected)">
+      <img class="card-img doc-img rounded-top" [src]="getThumbUrl()" (click)="setSelected(!selected)">
 
       <div class="border-right border-bottom bg-light p-1 rounded document-card-check">
         <div class="custom-control custom-checkbox">
diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index 83f8cbf60..0603ce4cb 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -93,13 +93,15 @@ $border-color-dark-mode: #47494f;
 
   .doc-img-container {
     border: none !important;
+    border-radius: .25rem;
+    overflow: hidden;
   }
 
   .doc-img {
     mix-blend-mode: normal;
     filter: invert(95%) hue-rotate(180deg);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-color: $border-color-dark-mode;
+    border-radius: 0;
   }
 
   .card-selected .doc-img {