fix(theme): env sidebar darkmode color [EE-4188] (#7638)

* fix(theme): env sidebar darkmode color [EE-4188]

* style usericon

* further dark mode changes

app/react/sidebar/EnvironmentSidebar.module.css

@@ -0,0 +1,12 @@
+.root {
+  background-color: var(--bg-sidebar-nav-color);
+  border-color: var(--border-sidebar-color);
+}
+
+.closeBtn {
+  background-color: var(--bg-btn-default-color);
+}
+
+.closeBtn:hover {
+  background-color: var(--bg-btn-default-hover-color);
+}

app/react/sidebar/EnvironmentSidebar.tsx

@@ -16,6 +16,7 @@ import { EndpointProvider } from '@/portainer/services/types';
 
 import { getPlatformIcon } from '../portainer/environments/utils/get-platform-icon';
 
+import styles from './EnvironmentSidebar.module.css';
 import { AzureSidebar } from './AzureSidebar';
 import { DockerSidebar } from './DockerSidebar';
 import { KubernetesSidebar } from './KubernetesSidebar';
@@ -34,13 +35,7 @@ export function EnvironmentSidebar() {
   }
 
   return (
-    <div
-      className={clsx(
-        'rounded border border-dotted py-2',
-        'bg-blue-11 be:bg-gray-10 th-dark:bg-gray-warm-11',
-        'border-blue-9 be:border-gray-8  th-dark:border-gray-warm-9'
-      )}
-    >
+    <div className={clsx(styles.root, 'rounded border border-dotted py-2')}>
       {environment ? (
         <Content environment={environment} onClear={clearEnvironment} />
       ) : (
@@ -157,7 +152,10 @@ function Title({ environment, onClear }: TitleProps) {
         title="Clear environment"
         type="button"
         onClick={onClear}
-        className="flex items-center justify-center be:bg-gray-9 bg-blue-10 th-dark:bg-gray-warm-10 hover:bg-blue-9 be:hover:bg-gray-7 th-dark:hover:bg-gray-8 transition-colors duration-200 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white be:hover:text-white"
+        className={clsx(
+          styles.closeBtn,
+          'flex items-center justify-center transition-colors duration-200 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white be:hover:text-white'
+        )}
       >
         <X />
       </button>

app/react/sidebar/Header.module.css

@@ -3,3 +3,7 @@
   max-height: 55px;
   max-width: min(100%, 230px);
 }
+
+.collapseBtn:hover {
+  background-color: var(--bg-btn-default-hover-color);
+}

app/react/sidebar/Header.tsx

@@ -61,11 +61,12 @@ export function Header({ logo: customLogo }: Props) {
         type="button"
         onClick={() => toggle()}
         className={clsx(
+          styles.collapseBtn,
           'w-6 h-6 flex justify-center items-center border-0 rounded',
           'transition-all duration-200',
           'text-sm text-gray-4 be:text-gray-5 hover:text-white be:hover:text-white',
-          'bg-blue-11 hover:bg-blue-10 be:bg-gray-10 be:hover:bg-gray-8',
-          'th-dark:bg-gray-warm-11 hover:th-dark:bg-gray-warm-9',
+          'bg-blue-11 be:bg-gray-10',
+          'th-dark:bg-gray-warm-11',
           'absolute',
           { '-right-[10px]': !isOpen, 'right-6': isOpen }
         )}