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

@@ -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);

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 {

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 {