From 48c2f127f898629283e3b1b5bd7e935f7c715fbe Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Tue, 25 Jan 2022 08:49:28 +1300
Subject: [PATCH] fix(ui): fix components have unreadable text in dark mode
 EE-2417 (#6433)

* add styles to UsersSelector components
---
 app/assets/css/theme.css                      |  4 +++-
 .../UsersSelector/UsersSelector.css           | 23 +++++++++++++++++++
 .../UsersSelector/UsersSelector.tsx           |  2 ++
 .../components/datatables/datatable.css       |  7 ++++++
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 app/portainer/components/UsersSelector/UsersSelector.css

diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index 25897fd42..b14b13b3a 100644
--- a/app/assets/css/theme.css
+++ b/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);
diff --git a/app/portainer/components/UsersSelector/UsersSelector.css b/app/portainer/components/UsersSelector/UsersSelector.css
new file mode 100644
index 000000000..1d3c3690a
--- /dev/null
+++ b/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;
+}
diff --git a/app/portainer/components/UsersSelector/UsersSelector.tsx b/app/portainer/components/UsersSelector/UsersSelector.tsx
index 26ee3eb99..5527332fe 100644
--- a/app/portainer/components/UsersSelector/UsersSelector.tsx
+++ b/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) =>
diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css
index 20179869d..9d07c0f98 100644
--- a/app/portainer/components/datatables/datatable.css
+++ b/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 {