fix(compass-components): keep the colour tabs' background COMPASS-8168 (

#6131) * keep the colour tabs' background * fix unit tests
mongodb-js · Aug 16, 2024 · 08e5c32 · 08e5c32
1 parent 3bd6e57
commit 08e5c32
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 0 deletions.
diff --git a/packages/compass-components/src/components/workspace-tabs/tab.tsx b/packages/compass-components/src/components/workspace-tabs/tab.tsx
@@ -47,6 +47,7 @@ const tabStyles = css({
   boxShadow: 'inset -1px -1px 0 0 var(--workspace-tab-border-color)',
 
   '&:hover': {
+    backgroundColor: 'inherit',
     cursor: 'pointer',
     zIndex: 1,
   },
@@ -132,6 +133,7 @@ const selectedTabStyles = css({
   boxShadow: 'inset -1px 0 0 0 var(--workspace-tab-border-color)',
 
   '&:hover': {
+    backgroundColor: 'var(--workspace-tab-selected-background-color)',
     cursor: 'default',
   },
 

diff --git a/packages/compass-connections/src/hooks/use-tab-connection-theme.spec.ts b/packages/compass-connections/src/hooks/use-tab-connection-theme.spec.ts
@@ -96,6 +96,7 @@ describe('useTabConnectionTheme', function () {
             '--workspace-tab-border-color': '#016BF8',
             '--workspace-tab-selected-color': '#016BF8',
           },
+          '--workspace-tab-background-color': '#D5EFFF',
           '--workspace-tab-border-color': '#E8EDEB',
           '--workspace-tab-color': '#5C6C75',
           '--workspace-tab-selected-background-color': '#FFFFFF',

diff --git a/packages/compass-connections/src/hooks/use-tab-connection-theme.ts b/packages/compass-connections/src/hooks/use-tab-connection-theme.ts
@@ -39,6 +39,7 @@ export function useTabConnectionTheme(): ThemeProvider {
       }
 
       return {
+        '--workspace-tab-background-color': bgColor,
         '--workspace-tab-top-border-color': bgColor,
         '--workspace-tab-border-color': darkTheme
           ? palette.gray.dark2