From 9f9d7da1ce4d4c1539222e7863938de46fa75bb0 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 7 Apr 2022 13:51:36 -0700
Subject: [PATCH] minor css hover + focus state fixes

[ci skip]
---
 .../app-frame/app-frame.component.scss        |  1 +
 src-ui/src/theme.scss                         | 64 ++++++++++---------
 src-ui/src/theme_dark.scss                    | 21 ++++--
 3 files changed, 50 insertions(+), 36 deletions(-)

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 6fe4c1ed9..02ef1678e 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
@@ -171,6 +171,7 @@
 
     &:focus {
       background-color: rgba(0, 0, 0, 0.3);
+      color: var(--bs-light);
       flex-grow: 1;
       padding-left: 0.5rem;
     }
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 667809059..bfcce7229 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -2,17 +2,18 @@
   // base color e.g. #17541f = hsl(128, 57%, 21%)
   --pngx-primary: 128, 57%;
   --pngx-primary-lightness: 21%;
+  --pngx-primary-text-contrast: var(--bs-light);
 
   --bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
   --bs-border-color: var(--bs-gray-400);
-  --ngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 72%));
-  --ngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
-  --ngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%));
-  --ngx-primary-darken-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
-  --ngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%));
-  --ngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
-  --ngx-bg-darker: var(--bs-gray-100);
-  --ngx-focus-alpha: 0.3;
+  --pngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 72%));
+  --pngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
+  --pngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%));
+  --pngx-primary-darken-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
+  --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-darker: var(--bs-gray-100);
+  --pngx-focus-alpha: 0.3;
 }
 
 body {
@@ -45,13 +46,13 @@ svg.logo {
   border-color: var(--bs-primary);
 
   &:hover, &:focus {
-    background-color: var(--ngx-primary-darken-10);
-    border-color: var(--ngx-primary-darken-10);
+    background-color: var(--pngx-primary-darken-10);
+    border-color: var(--pngx-primary-darken-10);
   }
 
   &:disabled, &.disabled {
-    background-color: var(--ngx-primary-darken-10) !important;
-    border-color: var(--ngx-primary-darken-10) !important;
+    background-color: var(--pngx-primary-darken-10) !important;
+    border-color: var(--pngx-primary-darken-10) !important;
   }
 }
 
@@ -67,6 +68,10 @@ svg.logo {
 
 .btn-outline-secondary {
   color: var(--bs-secondary);
+
+  &:hover {
+    color: var(--bs-light);
+  }
 }
 
 .nav-item .sidebaricon {
@@ -81,7 +86,7 @@ svg.logo {
 .form-check-input:focus,
 .form-check-radio:focus,
 .form-select:focus {
-  box-shadow: 0 0 0 0.25rem hsla(var(--pngx-primary), var(--pngx-primary-lightness), var(--ngx-focus-alpha));
+  box-shadow: 0 0 0 0.25rem hsla(var(--pngx-primary), var(--pngx-primary-lightness), var(--pngx-focus-alpha));
 }
 
 .form-switch .form-check-input:focus {
@@ -90,12 +95,12 @@ svg.logo {
 
 .nav-link:focus-visible, .nav-item a:focus-visible {
   outline: none;
-  background-color: var(--ngx-bg-darker);
+  background-color: var(--pngx-bg-darker);
 }
 
 a.navbar-brand:focus-visible {
   outline: none;
-  color: var(--ngx-primary-darken-10);
+  color: var(--pngx-primary-darken-10);
 }
 
 .dropdown.show {
@@ -105,7 +110,7 @@ a.navbar-brand:focus-visible {
   }
 
   > .btn-outline-primary {
-    color: var(--bs-body-color) !important;
+    color: var(--pngx-primary-text-contrast) !important;
   }
 }
 
@@ -124,8 +129,8 @@ textarea,
   border-color: var(--bs-border-color);
 
   &:focus {
-    background-color: var(--ngx-bg-darker);
-    color: var(--bs-body-color) !important;
+    background-color: var(--pngx-bg-darker);
+    color: var(--bs-body-color);
   }
 }
 
@@ -156,7 +161,7 @@ textarea,
 }
 
 .page-item.disabled .page-link {
-  background-color: var(--ngx-bg-darker);
+  background-color: var(--pngx-bg-darker);
 }
 
 .nav-tabs {
@@ -221,13 +226,14 @@ textarea,
   .dropdown-item {
     color: var(--bs-body-color);
 
-    &:hover {
-      background-color: var(--ngx-bg-darker);
+    &:hover, &:focus {
+      background-color: var(--pngx-bg-darker);
       color: var(--bs-body-color);
     }
 
     &.active {
       background-color: var(--bs-primary);
+      color: var(--pngx-primary-text-contrast);
     }
   }
 }
@@ -295,8 +301,8 @@ table.table {
 }
 
 .alert-secondary {
-  background-color: var(--ngx-primary-darken-18);
-  border-color: var(--ngx-primary-darken-15);
+  background-color: var(--pngx-primary-darken-18);
+  border-color: var(--pngx-primary-darken-15);
   color: var(--bs-body-color);
 }
 
@@ -309,7 +315,7 @@ table.table {
 .popover {
   .popover-header,
   .popover-body {
-    background-color: var(--ngx-bg-alt);
+    background-color: var(--pngx-bg-alt);
     border-color: var(--bs-border-color);
     color: var(--bs-body-color);
   }
@@ -317,19 +323,19 @@ table.table {
 
 // fix popover carat colors
 .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] {
-  border-left-color: var(--ngx-bg-alt);
+  border-left-color: var(--pngx-bg-alt);
 }
 .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] {
-  border-right-color: var(--ngx-bg-alt);
+  border-right-color: var(--pngx-bg-alt);
 }
 .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] {
-  border-top-color: var(--ngx-bg-alt);
+  border-top-color: var(--pngx-bg-alt);
 }
 .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] {
-  border-bottom-color: var(--ngx-bg-alt);
+  border-bottom-color: var(--pngx-bg-alt);
 }
 
 .bs-popover-bottom .popover-header::before,
 .bs-popover-auto[x-placement^=bottom] .popover-header::before {
-  border-bottom-color: var(--ngx-bg-alt);
+  border-bottom-color: var(--pngx-bg-alt);
 }
diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index c43747b78..e842241ca 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -27,11 +27,12 @@ $border-color-dark-mode: #47494f;
   --bs-light: #{$bg-light-dark-mode};
   --bs-light-rgb: #{$bg-light-dark-mode-rgb};
   --bs-border-color: #{$border-color-dark-mode};
-  --ngx-bg-darker: #{$bg-dark-mode-accent};
-  --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);
+  --pngx-bg-darker: #{$bg-dark-mode-accent};
+  --pngx-bg-alt: #{$bg-dark-mode-alt};
+  --pngx-body-color-accent: #{$text-color-dark-mode-accent};
+  --pngx-focus-alpha: 0.7;
+  --pngx-primary-faded: var(--pngx-primary-darken-15);
+  --pngx-primary-text-contrast: var(--bs-body-color);
 
   .navbar.bg-primary{
     --bs-primary: hsl(var(--pngx-primary),var(--pngx-primary-lightness));
@@ -64,17 +65,23 @@ $border-color-dark-mode: #47494f;
 
   .btn-outline-primary, .btn-primary {
     &:hover, &:focus, &.active, &:active {
-      color: var(--ngx-body-color-accent) !important;
+      color: var(--bs-light) !important;
     }
   }
 
   .btn-outline-secondary {
     &:hover, &:focus, &.active, &:active {
-      background-color: var(--ngx-bg-darker);
+      background-color: var(--pngx-bg-darker);
       color: var(--bs-primary);
     }
   }
 
+  .search-form-container {
+    input, input:focus {
+      color: var(--bs-body-color) !important;
+    }
+  }
+
   .card {
     background-color: var(--bs-body-bg);