From c1bd01630ca0dd9a3ef56af09da5410365005f3b Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 17 Apr 2022 00:25:10 -0700
Subject: [PATCH 1/6] remove single-use css vars

---
 src-ui/src/theme.scss | 32 +++++++++++---------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 317b18b4f..145410353 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -48,28 +48,18 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   --pngx-primary-lightness: 31%;
 }
 
-$danger-dark-mode: #b71631;
-$danger-dark-mode-rgb: 183, 22, 49;
-$bg-dark-mode: #161618;
-$bg-dark-mode-rgb: 22, 22, 24;
-$bg-dark-mode-accent: #101216;
-$bg-dark-mode-alt: #242529;
-$bg-light-dark-mode: #1c1c1f;
-$bg-light-dark-mode-rgb: 28, 28, 31;
-$border-color-dark-mode: #47494f;
-
 @mixin dark-mode {
   --bs-body-color: #{$text-color-dark-bg};
   --pngx-body-color-accent: #{$text-color-dark-bg-accent};
-  --bs-danger: #{$danger-dark-mode};
-  --bs-danger-rgb: #{$danger-dark-mode-rgb};
-  --bs-body-bg: #{$bg-dark-mode};
-  --bs-body-bg-rgb: #{$bg-dark-mode-rgb};
-  --bs-light: #{$bg-light-dark-mode};
-  --bs-light-rgb: #{$bg-light-dark-mode-rgb};
-  --bs-border-color: #{$border-color-dark-mode};
-  --pngx-bg-darker: #{$bg-dark-mode-accent};
-  --pngx-bg-alt: #{$bg-dark-mode-alt};
+  --bs-danger: #b71631;
+  --bs-danger-rgb: 183, 22, 49;
+  --bs-body-bg: #161618;
+  --bs-body-bg-rgb: 22, 22, 24;
+  --bs-light: #1c1c1f;
+  --bs-light-rgb: 28, 28, 31;
+  --bs-border-color: #47494f;
+  --pngx-bg-darker: #101216;
+  --pngx-bg-alt: #242529;
   --pngx-focus-alpha: 0.6;
   --pngx-primary-faded: var(--pngx-primary-darken-15);
   --pngx-primary-text-contrast: var(--bs-body-color);
@@ -145,7 +135,7 @@ $border-color-dark-mode: #47494f;
 
   .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,
   .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
-    background-color: $bg-light-dark-mode;
+    background-color: var(--bs-light);
   }
 
   table {
@@ -157,7 +147,7 @@ $border-color-dark-mode: #47494f;
     }
 
     &.table-hover > tbody > tr:hover > * {
-      background-color: $bg-light-dark-mode;
+      background-color: var(--bs-light);
       color: var(--pngx-body-color-accent);
     }
 

From 303491586c49b663f01b364655a9ae1537e72fe0 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 17 Apr 2022 00:25:28 -0700
Subject: [PATCH 2/6] fix dark mode progress showing in light mode

---
 src-ui/src/styles.scss | 6 ++----
 src-ui/src/theme.scss  | 6 ++++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index b6867cc6e..06fe95f94 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -442,10 +442,8 @@ table.table {
   border-color: var(--bs-danger);
 }
 
-.alert-secondary {
-  background-color: var(--pngx-primary-darken-18);
-  border-color: var(--pngx-primary-darken-15);
-  color: var(--bs-body-color);
+.progress {
+  background-color: var(--bs-body-bg);
 }
 
 .ngb-dp-header,
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 145410353..bd32fc72f 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -153,6 +153,12 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
 
   }
 
+  .alert-secondary {
+    background-color: var(--bs-light);
+    border-color: var(--pngx-bg-darker);
+    color: var(--bs-body-color);
+  }
+
   .table-striped > tbody > tr:nth-of-type(odd) > * {
     color: var(--pngx-body-color-accent);
   }

From 50ee54857c5788a0fefe7df60d327061b695c3a4 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 17 Apr 2022 00:25:39 -0700
Subject: [PATCH 3/6] fix popover carats

---
 src-ui/src/theme.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index bd32fc72f..cb752d3e8 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -15,6 +15,7 @@ body {
   --pngx-primary-darken-5: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 5%));
   --pngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%));
   --pngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
+  --pngx-bg-alt: #fff;
   --pngx-bg-darker: var(--bs-gray-100);
   --pngx-focus-alpha: 0.3;
 }

From 5995b97f39a9864ad1ec9c6d1a3848fa6e62f807 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 17 Apr 2022 00:36:47 -0700
Subject: [PATCH 4/6] fix settings mobile display bugs

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

diff --git a/src-ui/src/app/components/manage/settings/settings.component.html b/src-ui/src/app/components/manage/settings/settings.component.html
index dac266277..7e52db59e 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.html
+++ b/src-ui/src/app/components/manage/settings/settings.component.html
@@ -7,7 +7,7 @@
 
   <ul ngbNav #nav="ngbNav" class="nav-tabs">
     <li [ngbNavItem]="1">
-      <a ngbNavLink i18n>General settings</a>
+      <a ngbNavLink i18n>General</a>
       <ng-template ngbNavContent>
 
         <h4 i18n>Appearance</h4>
@@ -104,7 +104,7 @@
           <div class="col-md-3 col-form-label">
             <span i18n>Theme Color</span>
           </div>
-          <div class="col-3">
+          <div class="col col-md-3">
             <app-input-color i18n-title formControlName="themeColor" [error]="error?.color"></app-input-color>
           </div>
           <div class="col-2">

From 88087d265a6960f9412f58bac6c641aa503f0491 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 17 Apr 2022 00:48:57 -0700
Subject: [PATCH 5/6] toasts should respect close button coloring

---
 src-ui/src/theme.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index cb752d3e8..3246ad93b 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -38,6 +38,10 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   .form-check-input:checked[type=radio] {
     background-image: escape-svg($form-check-radio-checked-bg-image-dark);
   }
+
+  .btn-close {
+    filter: none !important;
+  }
 }
 
 .primary-dark {
@@ -168,7 +172,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
     text-shadow: 0 1px 0 #666;
   }
 
-  .modal .btn-close, .alert .btn-close {
+  .modal .btn-close, .alert .btn-close, .toast .btn-close {
     filter: invert(1) grayscale(100%) brightness(200%);
   }
 

From 87f3506085a4483a75407ca763e53269dfa3850c Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 17 Apr 2022 00:49:34 -0700
Subject: [PATCH 6/6] use var in input check / radio svgs

---
 src-ui/src/theme.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 3246ad93b..a991dc634 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -25,8 +25,8 @@ $text-color-light-bg: #212529;
 $text-color-dark-bg: #abb2bf;
 $text-color-dark-bg-accent: lighten($text-color-dark-bg, 10%);
 // Taken from bootstrap
-$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
-$form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#212529'/></svg>");
+$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$text-color-light-bg}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
+$form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$text-color-light-bg}'/></svg>");
 
 .primary-light {
   --pngx-primary-text-contrast: #{$text-color-light-bg} !important;