From 8dcf8631c4cfe6ef380bc403864ecec825a0e8ae Mon Sep 17 00:00:00 2001
From: Le Roux Bodenstein <lerouxb@gmail.com>
Date: Thu, 20 Jun 2024 12:39:37 +0100
Subject: [PATCH] chore(compass-components): only put the border on selected
 themed tabs COMPASS-8025 (#5953)

only put the border on selected themed tabs
---
 .../src/components/workspace-tabs/tab.tsx                | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/compass-components/src/components/workspace-tabs/tab.tsx b/packages/compass-components/src/components/workspace-tabs/tab.tsx
index b1f7ace55bf..961fdbc57aa 100644
--- 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,7 +110,6 @@ 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': {
@@ -118,6 +117,11 @@ const selectedTabStyles = css({
   },
 });
 
+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
       )}