From 2edff939ef1e38489364eacc186117f0138f62f6 Mon Sep 17 00:00:00 2001
From: itsconquest <william.conquest@portainer.io>
Date: Thu, 8 Sep 2022 13:49:09 +1200
Subject: [PATCH] fix(theme): update dark mode colors [EE-4188] (#7623)

* fix(theme): update dark mode colors [EE-4188]

* fix sidebar hover/selected
---
 app/assets/css/theme.css                      | 19 +++++++++++--------
 .../components/datatables/datatable.css       |  2 --
 app/react/sidebar/Sidebar.module.css          |  1 +
 app/react/sidebar/Sidebar.tsx                 |  8 +-------
 app/react/sidebar/SidebarItem/Head.tsx        |  4 ++--
 5 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index 150e891c5..609d158e7 100644
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@@ -93,6 +93,7 @@
   --bg-main-color: var(--white-color);
   --bg-body-color: var(--grey-9);
   --bg-checkbox-border-color: var(--grey-49);
+  --bg-sidebar-color: var(--ui-blue-10);
   --bg-widget-color: var(--white-color);
   --bg-widget-header-color: var(--grey-10);
   --bg-widget-table-color: var(--ui-gray-3);
@@ -267,7 +268,7 @@
   --sort-icon: var(--ui-gray-9);
   --border-checkbox: var(--ui-gray-5);
   --bg-checkbox: var(--white-color);
-  --border-searchbar: var(--ui-gray-5);
+  --border-searchbar: var(--grey-44);
   --bg-button-group: var(--white-color);
   --border-button-group: var(--ui-gray-5);
   --text-button-group: var(--ui-gray-9);
@@ -284,13 +285,14 @@
   --bg-checkbox-border-color: var(--grey-8);
   --bg-code-color: var(--ui-gray-warm-11);
   --bg-codemirror-color: var(--ui-gray-warm-11);
-  --bg-codemirror-gutters-color: var(--ui-gray-warm-8);
-  --bg-codemirror-selected-color: var(--ui-gray-warm-7);
+  --bg-codemirror-gutters-color: var(--grey-3);
+  --bg-codemirror-selected-color: var(--grey-3);
   --bg-dropdown-menu-color: var(--ui-gray-7);
   --bg-main-color: var(--grey-2);
-  --bg-widget-color: var(--ui-gray-warm-10);
-  --bg-widget-header-color: var(--grey-1);
-  --bg-widget-table-color: var(--ui-gray-warm-9);
+  --bg-sidebar-color: var(--grey-1);
+  --bg-widget-color: var(--grey-1);
+  --bg-widget-header-color: var(--grey-3);
+  --bg-widget-table-color: var(--grey-3);
   --bg-header-color: var(--grey-2);
   --bg-hover-table-color: var(--grey-3);
   --bg-switch-box-color: var(--grey-53);
@@ -341,7 +343,7 @@
   --bg-searchbar: var(--ui-grey-warm-11);
   --bg-inputbox: var(--grey-2);
   --bg-dropdown-hover: var(--grey-3);
-  --bg-webeditor-color: var(--ui-gray-warm-9);
+  --bg-webeditor-color: var(--ui-gray-iron-10);
   --bg-button-group-color: var(--ui-black);
   --bg-pagination-disabled-color: var(--grey-1);
   --bg-nav-container-color: var(--ui-gray-iron-10);
@@ -456,7 +458,7 @@
   --sort-icon: var(--ui-gray-3);
   --border-checkbox: var(--ui-gray-5);
   --bg-checkbox: var(--white-color);
-  --border-searchbar: var(--ui-gray-warm-9);
+  --border-searchbar: var(--grey-54);
   --bg-button-group: var(--white-color);
   --border-button-group: var(--ui-gray-5);
   --text-button-group: var(--ui-gray-9);
@@ -468,6 +470,7 @@
   --bg-main-color: var(--black-color);
   --bg-body-color: var(--black-color);
   --bg-checkbox-border-color: var(--grey-8);
+  --bg-sidebar-color: var(--black-color);
   --bg-widget-color: var(--black-color);
   --bg-widget-header-color: var(--black-color);
   --bg-widget-table-color: var(--black-color);
diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css
index de115ad9e..074ac4497 100644
--- a/app/portainer/components/datatables/datatable.css
+++ b/app/portainer/components/datatables/datatable.css
@@ -72,8 +72,6 @@
 
 .datatable .searchBar input[type='text'] {
   border: 0px !important;
-  @apply placeholder:text-gray-7;
-  @apply th-dark:placeholder:text-gray-warm-7;
 }
 
 .datatable .searchIcon {
diff --git a/app/react/sidebar/Sidebar.module.css b/app/react/sidebar/Sidebar.module.css
index c4a31e386..5dac4ead1 100644
--- a/app/react/sidebar/Sidebar.module.css
+++ b/app/react/sidebar/Sidebar.module.css
@@ -32,6 +32,7 @@
 
   z-index: 999;
   transition: all 0.4s ease 0s;
+  background-color: var(--bg-sidebar-color);
 }
 
 .root ul {
diff --git a/app/react/sidebar/Sidebar.tsx b/app/react/sidebar/Sidebar.tsx
index d09583830..98df5cf26 100644
--- a/app/react/sidebar/Sidebar.tsx
+++ b/app/react/sidebar/Sidebar.tsx
@@ -29,13 +29,7 @@ export function Sidebar() {
   return (
     /* in the future (when we remove r2a) this should wrap the whole app - to change root styles */
     <SidebarProvider>
-      <nav
-        className={clsx(
-          styles.root,
-          'p-5 flex flex-col be:bg-gray-11 bg-blue-10 th-dark:bg-gray-warm-10'
-        )}
-        aria-label="Main"
-      >
+      <nav className={clsx(styles.root, 'p-5 flex flex-col')} aria-label="Main">
         <Header logo={LogoURL} />
 
         {/* negative margin + padding -> scrollbar won't hide the content */}
diff --git a/app/react/sidebar/SidebarItem/Head.tsx b/app/react/sidebar/SidebarItem/Head.tsx
index ebfdc6eb4..8f30cb07a 100644
--- a/app/react/sidebar/SidebarItem/Head.tsx
+++ b/app/react/sidebar/SidebarItem/Head.tsx
@@ -34,7 +34,7 @@ export function Head({
   const { isOpen } = useSidebarState();
   const anchorProps = useSrefActive(
     to,
-    'bg-blue-8 be:bg-gray-8 th-dark:bg-gray-9',
+    'bg-blue-8 be:bg-gray-8 th-dark:bg-gray-true-8',
     params,
     options,
     ignorePaths
@@ -48,7 +48,7 @@ export function Head({
         anchorProps.className,
         'text-inherit no-underline hover:no-underline hover:text-inherit focus:no-underline focus:text-inherit',
         'w-full flex-1 rounded-md flex items-center h-8 space-x-4 text-sm',
-        'hover:bg-blue-9 be:hover:bg-gray-9 transition-colors duration-200',
+        'hover:bg-blue-9 th-dark:hover:bg-gray-true-9 be:hover:bg-gray-9 transition-colors duration-200',
         {
           'px-3 justify-start w-full': isOpen,
           'justify-center w-8': !isOpen,