From f89430fe16d3bb26ace98be01cb7b3e0da3fe383 Mon Sep 17 00:00:00 2001
From: Christoph Anderson <lupusapps@gmail.com>
Date: Mon, 10 Apr 2023 09:44:26 +0200
Subject: [PATCH] Minor changes. Select component now shows the correct color.

---
 src/App.css           | 45 ++++++++++++++++++++++++++++---------------
 src/PoliciesTable.jsx |  3 +--
 src/Theme.css         |  8 ++++++--
 src/ThemeSelector.tsx | 16 +++++++++++----
 4 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/App.css b/src/App.css
index 51bea16..c154ef7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,20 +4,23 @@ html.loading {
 
 body {
   line-height: 1;
-  color: var(--text-color-body);
   background-color: var(--background-color);
 }
 
-.options-select {
-  overflow: ellipsis
+.container-fluid {
+  color: var(--text-color-body);
 }
 
-.navbar-light .navbar-nav .nav-link {
-  color: var(--text-color-nav);
+.select {
+  color: var(--text-color-selector);
 }
 
-.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
-  color: var(--text-color-nav);
+.select select:hover {
+  color: var(--text-color-selector);
+}
+
+.options-select {
+  overflow: ellipsis
 }
 
 .btn {
@@ -55,14 +58,6 @@ body {
   border-color: var(--color-danger);
 }
 
-.select {
-  color: black;
-}
-
-.table {
-  color: var(--text-color-body);
-}
-
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
@@ -105,6 +100,26 @@ body {
   filter: brightness(80%);
 }
 
+.table {
+  color: var(--text-color-body);
+}
+
+.table table-sm table-striped table-bordered table-hover {
+  color: var(--text-color-body);
+}
+
+.table-striped>tbody>tr:nth-of-type(odd)>* {
+  color: var(--text-color-body);
+}
+
+.navbar-light .navbar-nav .nav-link {
+  color: var(--text-color-nav);
+}
+
+.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
+  color: var(--text-color-nav);
+}
+
 .popover {
   max-width: 1000px;
 }
diff --git a/src/PoliciesTable.jsx b/src/PoliciesTable.jsx
index 4b4568c..283012f 100644
--- a/src/PoliciesTable.jsx
+++ b/src/PoliciesTable.jsx
@@ -174,7 +174,6 @@ export class PoliciesTable extends Component {
             return <p>Loading ...</p>;
         }
 
-
         let uniqueOwners = sources.reduce((a, d) => {
             const owner = ownerName(d.source);
 
@@ -245,7 +244,7 @@ export class PoliciesTable extends Component {
             id: 'edit',
             Header: '',
             width: 50,
-            Cell: x => <Link to={policyEditorURL(x.row.original.target)}><Button size="sm">Edit</Button></Link>,
+            Cell: x => <Button data-testid="edit-policy" as={Link} to={policyEditorURL(x.row.original.target)} variant="primary" size="sm">Edit</Button>
         }]
 
         return <>
diff --git a/src/Theme.css b/src/Theme.css
index 26356da..6eb4084 100644
--- a/src/Theme.css
+++ b/src/Theme.css
@@ -8,6 +8,7 @@
   --color-submit: #00B4D8;
 
   --text-color: #ffffff;
+  --text-color-selector: #000000;
   --text-color-body: #000000;
   --text-color-nav: #000000;
 
@@ -16,14 +17,15 @@
 }
 
 .dark-theme {
-  --background-color: #000000;
+  --background-color: #343c43;
   --color-primary: #1162b1;
   --color-secondary: #0d9aab;
   --color-warning: #b30996;
-  --color-success: #030303;
+  --color-success: #00B4D8;
   --color-submit: #00B4D8;
 
   --text-color: #ffffff;
+  --text-color-selector: #000000;
   --text-color-body: #ffffff;
   --text-color-nav: #ffffff;
   
@@ -40,6 +42,7 @@
   --color-submit: #00B4D8;
   
   --text-color: #000000;
+  --text-color-selector: #000000;
   --text-color-body: #000000;
   --text-color-nav: #d7a5e9;
 
@@ -56,6 +59,7 @@
   --color-submit: #00B4D8;
   
   --text-color: #ffffff;
+  --text-color-selector: #000000;
   --text-color-body: #03045E;
   --text-color-nav: #03045E;
 
diff --git a/src/ThemeSelector.tsx b/src/ThemeSelector.tsx
index 013ba49..0445e44 100644
--- a/src/ThemeSelector.tsx
+++ b/src/ThemeSelector.tsx
@@ -1,11 +1,9 @@
-import Select from 'react-select'
+import Select, { components } from 'react-select'
 import { useContext } from 'react';
 import { Theme, UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 export function ThemeSelector() {
     const { theme, setTheme } = useContext(UIPreferencesContext);
-    
-    updateTheme(theme)
 
     const themes = [
         { value: 'light-theme', label: 'light' },
@@ -14,6 +12,8 @@ export function ThemeSelector() {
         { value: 'ocean-theme', label: 'ocean' }
     ]
     
+    updateTheme(theme)
+
     const handleTheme = (event: any) => {
         var selectedTheme = event.value;
         // keep html class in sync with button state.
@@ -21,7 +21,15 @@ export function ThemeSelector() {
         setTheme(selectedTheme)
       };
 
-    return <Select defaultValue={themes[0]} options={themes} onChange={handleTheme} />
+    return <Select options={themes} classNamePrefix="select" onChange={handleTheme} 
+    components={{
+        SingleValue: ({ children, ...props }) => {
+          return (
+            <components.SingleValue {...props}>
+              {"Theme: " + children}
+            </components.SingleValue>
+          );
+        }}}/>
 }
 
 function updateTheme(theme: Theme) {