From e0f93c26d617309542c71251362e8c9d863f26b5 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 13 Sep 2022 11:47:19 -0700
Subject: [PATCH] Nicer slim sidebar transitioning, dark mode fixes, fix tests
 by making settings taller

---
 src-ui/cypress/e2e/settings/settings.cy.ts         |  2 +-
 .../components/app-frame/app-frame.component.html  |  2 +-
 .../components/app-frame/app-frame.component.scss  | 14 ++++++++++----
 .../document-list/document-list.component.scss     |  6 +++---
 src-ui/src/styles.scss                             | 11 ++++++++++-
 src-ui/src/theme.scss                              |  9 +++++++++
 6 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src-ui/cypress/e2e/settings/settings.cy.ts b/src-ui/cypress/e2e/settings/settings.cy.ts
index 7433d16f4..0480e39ce 100644
--- a/src-ui/cypress/e2e/settings/settings.cy.ts
+++ b/src-ui/cypress/e2e/settings/settings.cy.ts
@@ -46,7 +46,7 @@ describe('settings', () => {
       })
     })
 
-    cy.viewport(1024, 1024)
+    cy.viewport(1024, 1600)
     cy.visit('/settings')
     cy.wait('@savedViews')
   })
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index 9e96316bd..c1d6a20bd 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -237,7 +237,7 @@
       </div>
     </nav>
 
-    <main role="main" class="ms-sm-auto px-md-4" [ngClass]="slimSidebarEnabled ? 'col slim' : 'col-md-9 col-lg-10'">
+    <main role="main" class="ms-sm-auto px-md-4" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10'">
       <router-outlet></router-outlet>
     </main>
   </div>
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index 56b35fb2c..717a9b976 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -1,3 +1,6 @@
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+
 /*
  * Sidebar
  */
@@ -15,7 +18,6 @@
     height: 0.8em;
   }
 
-
   // These come from the col-md-3 col-lg-2 classes for regular sidebar, needed for animation
   @media (min-width: 768px) {
     max-width: 25%;
@@ -25,7 +27,7 @@
     max-width: 16.66666667%;
   }
 
-  transition: all .3s ease;
+  transition: all .2s ease;
 }
 @media (max-width: 767.98px) {
   .sidebar {
@@ -33,6 +35,10 @@
   }
 }
 
+main {
+  transition: all .2s ease;
+}
+
 .sidebar-slim-toggler {
   display: none; // hide on mobile
 }
@@ -45,8 +51,8 @@
     }
   }
 
-  .col.slim {
-    margin-left: 50px !important;
+  .col-slim {
+    padding-left: calc(50px + $grid-gutter-width) !important;
   }
 
   .sidebar-slim-toggler {
diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss
index 98b6d62d7..3361d7c3a 100644
--- a/src-ui/src/app/components/document-list/document-list.component.scss
+++ b/src-ui/src/app/components/document-list/document-list.component.scss
@@ -22,7 +22,7 @@ $paperless-card-breakpoints: (
 );
 
 .row-cols-paperless-cards {
-  // xs, we dont want in .col.slim block
+  // xs, we dont want in .col-slim block
   > * {
     flex: 0 0 auto;
     width: calc(100% / 2);
@@ -38,12 +38,12 @@ $paperless-card-breakpoints: (
   }
 }
 
-::ng-deep .col.slim .row-cols-paperless-cards {
+::ng-deep .col-slim .row-cols-paperless-cards {
   @each $width, $n_cols in $paperless-card-breakpoints {
     @media(min-width: $width) {
       > * {
         flex: 0 0 auto;
-        width: calc(100% / ($n-cols + 1));
+        width: calc(100% / ($n-cols + 1)) !important;
       }
     }
   }
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 8dbbafe22..0ffb12afb 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -1,9 +1,9 @@
 // bs options
 $enable-negative-margins: true;
 
+@import "theme";
 @import "node_modules/bootstrap/scss/bootstrap";
 @import "~@ng-select/ng-select/themes/default.theme.css";
-@import "theme";
 @import "print";
 
 // Paperless-ngx styles
@@ -84,6 +84,15 @@ svg.logo {
   }
 }
 
+.btn-dark {
+  --bs-btn-color: var(--bs-gray-600);
+  --bs-btn-bg: var(--bs-gray-200);
+  --bs-btn-border-color: var(--bs-gray-200);
+  --bs-btn-hover-bg: var(--bs-gray-400);
+  --bs-btn-hover-border-color: var(--bs-gray-500);
+  --bs-btn-active-bg: var(--bs-gray-200);
+}
+
 .text-primary {
   color: var(--bs-primary) !important;
 }
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index bf9be6662..99dcb8bab 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -79,6 +79,15 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
     }
   }
 
+  .btn-dark {
+    --bs-btn-color: $text-color-dark-bg;
+    --bs-btn-bg: var(--pngx-bg-alt);
+    --bs-btn-border-color: var(--pngx-bg-alt);
+    --bs-btn-hover-bg: var(--bs-light);
+    --bs-btn-hover-border-color: var(--pngx-bg-darker);
+    --bs-btn-active-bg: var(--pngx-bg-alt);
+  }
+
   .btn-outline-primary {
     &:hover, &:focus, &.active, &:active {
       color: var(--bs-light) !important;