chore(compass-components): only put the border on selected themed tabs …

…COMPASS-8025 (#5953) only put the border on selected themed tabs
mongodb-js · Jun 20, 2024 · 8dcf863 · 8dcf863
1 parent 370988a
commit 8dcf863
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/packages/compass-components/src/components/workspace-tabs/tab.tsx b/packages/compass-components/src/components/workspace-tabs/tab.tsx
@@ -37,7 +37,7 @@ const tabStyles = css({
   overflow: 'hidden',
 
   // leave space so the active and other tabs line up
-  borderTop: '4px solid transparent',
+  paddingTop: spacing[100],
 
   backgroundColor: 'var(--workspace-tab-background-color)',
   color: 'var(--workspace-tab-color)',
@@ -110,14 +110,18 @@ const tabDarkThemeStyles = css({
 const selectedTabStyles = css({
   color: 'var(--workspace-tab-selected-color)',
   backgroundColor: 'var(--workspace-tab-selected-background-color)',
-  borderTopColor: 'var(--workspace-tab-selected-border-color)',
   boxShadow: 'inset -1px 0 0 0 var(--workspace-tab-border-color)',
 
   '&:hover': {
     cursor: 'default',
   },
 });
 
+const selectedThemedTabStyles = css({
+  borderTop: `${spacing[100]}px solid var(--workspace-tab-selected-border-color)`,
+  paddingTop: 0,
+});
+
 const draggingTabStyles = css({
   cursor: 'grabbing !important',
 });
@@ -240,6 +244,7 @@ function Tab({
         tabStyles,
         themeClass,
         isSelected && selectedTabStyles,
+        isSelected && tabTheme && selectedThemedTabStyles,
         isDragging && draggingTabStyles,
         subtitle && animatedSubtitleStyles
       )}