From 0242c8e4ef1b46a514f644d9c32d1443e1119c06 Mon Sep 17 00:00:00 2001
From: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Date: Wed, 14 Sep 2022 10:16:02 +1200
Subject: [PATCH] fix(dropdown): fixed dropdown menu background color in dark
 mode. [EE-4026] (#7591)

* fix(dropdown): fixed dropdown menu background color in dark mode. [EE-4026]

* fix(dropdown): fixed table setting background color in dark mode.

* fix(dropdown): updated --bg-dropdown-menu-color in dark theme.

* fix(dropdown): fixed dropdown border radius issue

* fix(dropdown): fixed dropdown option text color in dark mode
---
 app/assets/css/theme.css                               | 6 +++---
 app/portainer/components/datatables/datatable.css      | 2 ++
 app/react/components/PageHeader/HeaderTitle.module.css | 2 ++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index d65e22680..c1505e5bf 100644
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@@ -290,7 +290,7 @@
   --bg-codemirror-color: var(--grey-2);
   --bg-codemirror-gutters-color: var(--grey-3);
   --bg-codemirror-selected-color: var(--grey-3);
-  --bg-dropdown-menu-color: var(--ui-gray-7);
+  --bg-dropdown-menu-color: var(--ui-gray-warm-8);
   --bg-main-color: var(--grey-2);
   --bg-sidebar-color: var(--grey-1);
   --bg-sidebar-nav-color: var(--grey-2);
@@ -398,7 +398,7 @@
   --text-daterangepicker-active: var(--white-color);
   --text-input-autofill-color: var(--text-form-control-color);
   --text-button-hover-color: var(--white-color);
-  --text-small-select-color: var(--grey-7);
+  --text-small-select-color: var(--white-color);
   --text-bootbox: var(--white-color);
   --text-button-group-color: var(--ui-white);
   --text-button-dangerlight-color: var(--ui-error-7);
@@ -485,7 +485,7 @@
   --bg-hover-table-color: var(--grey-3);
   --bg-switch-box-color: var(--grey-53);
   --bg-panel-body-color: var(--black-color);
-  --bg-dropdown-menu-color: var(--black-color);
+  --bg-dropdown-menu-color: var(--ui-gray-warm-8);
   --bg-codemirror-selected-color: var(--grey-3);
   --bg-motd-body-color: var(--black-color);
   --bg-blocklist-hover-color: var(--black-color);
diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css
index 074ac4497..bd39ca3bf 100644
--- a/app/portainer/components/datatables/datatable.css
+++ b/app/portainer/components/datatables/datatable.css
@@ -341,7 +341,9 @@
 [data-reach-menu-list],
 [data-reach-menu-items] {
   padding: 0px;
+  border-radius: 8px;
   border: 1px var(--bg-dropdown-menu-color);
+  background-color: var(--bg-dropdown-menu-color);
 }
 
 .dropdown-menu .tableMenu {
diff --git a/app/react/components/PageHeader/HeaderTitle.module.css b/app/react/components/PageHeader/HeaderTitle.module.css
index 5b7c268ce..6b4ef49a0 100644
--- a/app/react/components/PageHeader/HeaderTitle.module.css
+++ b/app/react/components/PageHeader/HeaderTitle.module.css
@@ -18,6 +18,8 @@
   width: 180px;
   padding: 5px !important;
   box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+  @apply th-dark:!border-none;
+  @apply th-highcontrast:!border-none;
 }
 
 .menu-link {