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

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

* style usericon

* further dark mode changes

app/assets/css/button.css

@@ -88,8 +88,8 @@ fieldset[disabled] .btn {
   @apply hover:bg-gray-3 hover:border-gray-5 hover:text-gray-10;
 
   /* dark mode */
-  @apply th-dark:bg-gray-warm-10 th-dark:border-gray-warm-7 th-dark:text-gray-warm-4;
-  @apply th-dark:hover:bg-gray-warm-9 th-dark:hover:border-gray-6 th-dark:hover:text-gray-warm-4;
+  @apply th-dark:bg-gray-iron-10 th-dark:border-gray-warm-7 th-dark:text-gray-warm-4;
+  @apply th-dark:hover:bg-gray-iron-9 th-dark:hover:border-gray-6 th-dark:hover:text-gray-warm-4;
 
   @apply th-highcontrast:bg-black th-highcontrast:border-gray-2 th-highcontrast:text-white;
   @apply th-highcontrast:hover:bg-gray-9 th-highcontrast:hover:border-gray-6 th-highcontrast:hover:text-gray-warm-4;

app/assets/css/theme.css

@@ -94,6 +94,7 @@
   --bg-body-color: var(--grey-9);
   --bg-checkbox-border-color: var(--grey-49);
   --bg-sidebar-color: var(--ui-blue-10);
+  --bg-sidebar-nav-color: var(--ui-blue-11);
   --bg-widget-color: var(--white-color);
   --bg-widget-header-color: var(--grey-10);
   --bg-widget-table-color: var(--ui-gray-3);
@@ -101,7 +102,7 @@
   --bg-hover-table-color: var(--grey-14);
   --bg-switch-box-color: var(--ui-gray-5);
   --bg-input-group-addon-color: var(--ui-gray-3);
-  --bg-btn-default-color: var(--white-color);
+  --bg-btn-default-color: var(--ui-blue-10);
   --bg-blocklist-hover-color: var(--ui-blue-2);
   --bg-boxselector-color: var(--ui-gray-2);
   --bg-table-color: var(--white-color);
@@ -142,7 +143,7 @@
   --bg-daterangepicker-in-range: var(--grey-58);
   --bg-daterangepicker-active: var(--blue-14);
   --bg-input-autofill-color: var(--white-color);
-  --bg-btn-default-hover-color: var(--grey-59);
+  --bg-btn-default-hover-color: var(--ui-blue-9);
   --bg-btn-focus: var(--grey-59);
   --bg-boxselector-disabled-color: var(--white-color);
   --bg-small-select-color: var(--white-color);
@@ -212,7 +213,7 @@
 
   --border-color: var(--grey-42);
   --border-widget-color: var(--grey-43);
-  --border-sidebar-color: var(--white-color);
+  --border-sidebar-color: var(--ui-blue-9);
   --border-form-control-color: var(--grey-44);
   --border-table-color: var(--grey-19);
   --border-table-top-color: var(--grey-19);
@@ -263,6 +264,7 @@
   --bg-multiselect-helpercontainer: var(--white-color);
   --text-input-textarea: var(--white-color);
 
+  --user-menu-icon-color: var(--ui-gray-4);
   --sort-icon-muted: var(--ui-gray-5);
   --sort-icon-hover: var(--ui-gray-6);
   --sort-icon: var(--ui-gray-9);
@@ -290,6 +292,7 @@
   --bg-dropdown-menu-color: var(--ui-gray-7);
   --bg-main-color: var(--grey-2);
   --bg-sidebar-color: var(--grey-1);
+  --bg-sidebar-nav-color: var(--grey-2);
   --bg-widget-color: var(--grey-1);
   --bg-widget-header-color: var(--grey-3);
   --bg-widget-table-color: var(--grey-3);
@@ -332,7 +335,7 @@
   --bg-daterangepicker-in-range: var(--ui-gray-warm-11);
   --bg-daterangepicker-active: var(--blue-14);
   --bg-input-autofill-color: var(--grey-2);
-  --bg-btn-default-hover-color: var(--grey-3);
+  --bg-btn-default-hover-color: var(--grey-4);
   --bg-btn-focus: var(--grey-3);
   --bg-boxselector-disabled-color: var(--grey-54);
   --bg-small-select-color: var(--grey-2);
@@ -402,7 +405,7 @@
 
   --border-color: var(--grey-3);
   --border-widget-color: var(--grey-1);
-  --border-sidebar-color: var(--blue-9);
+  --border-sidebar-color: var(--ui-gray-8);
   --border-form-control-color: var(--grey-54);
   --border-table-color: var(--grey-3);
   --border-table-top-color: var(--grey-3);
@@ -430,7 +433,7 @@
   --border-sortbutton: var(--grey-3);
   --border-bootbox: var(--ui-gray-9);
   --border-blocklist: var(--ui-gray-9);
-  --border-widget: var(--ui-gray-9);
+  --border-widget: var(--grey-3);
   --border-pagination-color: var(--grey-1);
   --border-nav-container-color: var(--ui-gray-neutral-8);
   --border-stepper-color: var(--ui-gray-warm-9);
@@ -453,6 +456,7 @@
   --bg-multiselect-helpercontainer: var(--grey-1);
   --text-input-textarea: var(--grey-1);
 
+  --user-menu-icon-color: var(--grey-3);
   --sort-icon-muted: var(--ui-gray-7);
   --sort-icon-hover: var(--ui-gray-6);
   --sort-icon: var(--ui-gray-3);
@@ -471,6 +475,7 @@
   --bg-body-color: var(--black-color);
   --bg-checkbox-border-color: var(--grey-8);
   --bg-sidebar-color: var(--black-color);
+  --bg-sidebar-nav-color: var(--black-color);
   --bg-widget-color: var(--black-color);
   --bg-widget-header-color: var(--black-color);
   --bg-widget-table-color: var(--black-color);
@@ -518,8 +523,7 @@
   --bg-input-autofill-color: var(--black-color);
   --bg-code-color: var(--ui-black);
   --bg-navtabs-hover-color: var(--grey-3);
-  --bg-btn-default-hover-color: var(--grey-3);
-  --bg-btn-default-color: var(--black-color);
+  --bg-btn-default-hover-color: var(--grey-4);
   --bg-btn-focus: var(--black-color);
   --bg-boxselector-color: var(--black-color);
   --bg-boxselector-disabled-color: var(--black-color);
@@ -582,7 +586,7 @@
 
   --border-color: var(--grey-55);
   --border-widget-color: var(--white-color);
-  --border-sidebar-color: var(--blue-9);
+  --border-sidebar-color: var(--white-color);
   --border-form-control-color: var(--grey-54);
   --border-table-color: var(--grey-55);
   --border-table-top-color: var(--grey-55);
@@ -630,6 +634,7 @@
   --text-cm-string-color: var(--red-7);
   --text-progress-bar-color: var(--black-color);
 
+  --user-menu-icon-color: var(--white-color);
   --sort-icon-muted: var(--ui-gray-7);
   --sort-icon-hover: var(--ui-gray-6);
   --sort-icon: var(--ui-gray-3);

app/react/components/PageHeader/HeaderTitle.module.css

@@ -7,6 +7,10 @@
   align-items: center;
 }
 
+.menu-icon {
+  background: var(--user-menu-icon-color);
+}
+
 .menu-list {
   background: var(--bg-dropdown-menu-color);
   border-radius: 8px;

app/react/components/PageHeader/UserMenu.tsx

@@ -28,9 +28,10 @@ export function UserMenu() {
       >
         <div
           className={clsx(
+            styles.menuIcon,
             'icon-badge text-lg !p-2 mr-1',
-            'bg-gray-4 text-gray-8',
-            'th-dark:bg-gray-warm-10 th-dark:text-gray-warm-7'
+            'text-gray-8',
+            'th-dark:text-gray-warm-7'
           )}
         >
           <User className="feather" />

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 }
         )}