From 1297c0911c788b420d471574aefc3b7210cae90f Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 28 Dec 2020 12:56:00 -0800
Subject: [PATCH] Theme tweaks

See https://github.com/jonaswinkler/paperless-ng/issues/194
---
 .../document-card-small.component.html        |  2 +-
 src-ui/src/theme_dark.scss                    | 62 ++++++++++++++-----
 2 files changed, 48 insertions(+), 16 deletions(-)

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 e0d8d28e1..9d808e84b 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,6 +1,6 @@
 <div class="col p-2 h-100">
   <div class="card h-100 shadow-sm" [class.card-selected]="selected">
-    <div class="border-bottom" [class.doc-img-background-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)">
 
       <div class="border-right border-bottom bg-light p-1 rounded document-card-check">
diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index ea7987828..83f8cbf60 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -1,3 +1,5 @@
+$primary-dark-mode: #346e2c;
+$danger-dark-mode: #9c142a;
 $bg-dark-mode: #161618;
 $bg-light-dark-mode: #1c1c1f;
 $text-color-dark-mode: #abb2bf;
@@ -7,6 +9,7 @@ $border-color-dark-mode: #47494f;
 * {
   transition: background-color 0.3s ease, border-color 0.3s ease;
 }
+
 @mixin dark-mode {
   background-color: $bg-dark-mode !important;
   color: $text-color-dark-mode;
@@ -74,9 +77,13 @@ $border-color-dark-mode: #47494f;
     }
   }
 
+  .modal-content, .modal-header, .modal-body, .modal-footer {
+    background-color: $bg-light-dark-mode;
+    border-color: $border-color-dark-mode;
+  }
+
   app-tag .badge {
-    opacity: 0.8;
-    color: $bg-dark-mode !important;
+    filter: brightness(.8);
   }
 
   .badge-light {
@@ -84,17 +91,19 @@ $border-color-dark-mode: #47494f;
     color: $text-color-dark-mode-accent;
   }
 
+  .doc-img-container {
+    border: none !important;
+  }
+
   .doc-img {
-    background-color: lighten($bg-light-dark-mode, 30%);
-    mix-blend-mode: soft-light;
+    mix-blend-mode: normal;
+    filter: invert(95%) hue-rotate(180deg);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  .doc-img-background {
-    background-color: lighten($bg-light-dark-mode, 30%);
-  }
-
-  .doc-img-background-selected {
-    background-color: lighten($bg-light-dark-mode, 35%);
+  .card-selected .doc-img {
+    mix-blend-mode: luminosity;
   }
 
   .toast {
@@ -128,20 +137,39 @@ $border-color-dark-mode: #47494f;
     text-shadow: 0 1px 0 #666;
   }
 
-  .btn-outline-primary:hover {
-    background-color: darken($primary, 10%);
-    color: $text-color-dark-mode-accent;
+  .btn-outline-primary{
+    border-color: $primary-dark-mode;
+    color: $primary-dark-mode;
+
+    &:hover {
+      background-color: darken($primary-dark-mode, 10%);
+      color: $text-color-dark-mode-accent;
+    }
   }
 
   .btn-outline-secondary {
-    border-color: $border-color-dark-mode;
-    color: $border-color-dark-mode;
+    border-color: $text-color-dark-mode;
+    color: $text-color-dark-mode;
 
     &:hover {
       background-color: $bg-dark-mode;
     }
   }
 
+  .btn-outline-danger {
+    border-color: $danger-dark-mode;
+    color: $danger-dark-mode;
+
+    &:hover {
+      background-color: darken($danger-dark-mode, 10%);
+      color: $text-color-dark-mode-accent;
+    }
+  }
+
+  .btn-link:not(:disabled):not(.disabled) {
+    color: $primary-dark-mode;
+  }
+
   .btn-link:hover,
   .btn-outline-primary:not(:disabled):not(.disabled).active,
   .btn-outline-primary:not(:disabled):not(.disabled):active,
@@ -149,6 +177,10 @@ $border-color-dark-mode: #47494f;
     color: $text-color-dark-mode-accent;
   }
 
+  button.bg-light:hover {
+    background-color: $bg-dark-mode !important;
+  }
+
   .form-control,
   input,
   select,