fix(ui): fix components have unreadable text in dark mode EE-2417 (#6433)

* add styles to UsersSelector components

app/assets/css/theme.css

@@ -365,7 +365,7 @@ html {
   --text-blocklist-item-selected-color: var(--white-color);
   --text-progress-bar-color: var(--white-color);
   --text-pagination-color: var(--white-color);
-  --text-pagination-span-color: var(--white-color);
+  --text-pagination-span-color: var(--blue-2);
   --text-pagination-span-hover-color: var(--white-color);
   --text-ui-select-color: var(--white-color);
   --text-ui-select-hover-color: var(--white-color);
@@ -547,6 +547,8 @@ html {
   --text-button-hover-color: var(--white-color);
   --text-btn-default-color: var(--white-color);
   --text-small-select-color: var(--white-color);
+  --text-multiselect-item-color: var(--white-color);
+  --text-pagination-span-color: var(--blue-2);
 
   --border-color: var(--grey-55);
   --border-widget-color: var(--white-color);

app/portainer/components/UsersSelector/UsersSelector.css

@@ -0,0 +1,23 @@
+.selector__control {
+  border: 1px solid var(--border-multiselect) !important;
+  background-color: var(--bg-multiselect-color) !important;
+}
+
+.selector__multi-value {
+  background-color: var(--bg-multiselect-checkboxcontainer) !important;
+}
+
+.selector__multi-value__label {
+  color: var(--text-multiselect-item-color) !important;
+}
+
+.selector__menu {
+  background-color: var(--bg-multiselect-color) !important;
+  border: 1px solid var(--border-multiselect) !important;
+}
+
+.selector__option {
+  background-color: var(--bg-multiselect-color) !important;
+  border: 1px solid var(--border-multiselect) !important;
+  border: 1px solid red;
+}

app/portainer/components/UsersSelector/UsersSelector.tsx

@@ -2,6 +2,7 @@ import Select from 'react-select';
 
 import { UserViewModel } from '@/portainer/models/user';
 import { UserId } from '@/portainer/users/types';
+import './UsersSelector.css';
 
 interface Props {
   value: UserId[];
@@ -26,6 +27,7 @@ export function UsersSelector({
       getOptionLabel={(user) => user.Username}
       getOptionValue={(user) => user.Id}
       options={users}
+      classNamePrefix="selector"
       value={users.filter((user) => value.includes(user.Id))}
       closeMenuOnSelect={false}
       onChange={(selectedUsers) =>

app/portainer/components/datatables/datatable.css

@@ -96,9 +96,16 @@
   padding: 15px 0;
 }
 
+[data-reach-menu-list],
+[data-reach-menu-items] {
+  padding: 0px;
+  border: 1px var(--bg-dropdown-menu-color);
+}
+
 .tableMenu {
   color: #767676;
   padding: 10px;
+  background-color: var(--bg-dropdown-menu-color) !important;
 }
 
 .tableMenu .menuHeader {