Merge pull request #34160 from overleaf/mj-tabs-design-tweaks

[web] Apply design tweaks to editor tabs

GitOrigin-RevId: c0b064c4f5977bb13a961f03d2c5f2949d338cfe

services/web/frontend/js/features/source-editor/components/tabs/tab.tsx

@@ -222,18 +222,20 @@ export const Tab = memo(function Tab({
         'tab-temporary': tab.lifetime === 'temporary',
       })}
     >
-      <span className="editor-file-tab-icon">
-        <FileTreeIcon isLinkedFile={tab.isLinkedFile} name={tab.name} />
-      </span>
-      <div className="editor-file-tab-path">&lrm;{tab.displayPath}</div>
-      <div className="editor-file-tab-action">
-        <button
-          onClick={onCloseClick}
-          className="editor-file-tab-close-action"
-          aria-label={t('close_tab')}
-        >
-          <MaterialIcon type="close" />
-        </button>
+      <div className="editor-file-tab-content">
+        <span className="editor-file-tab-icon">
+          <FileTreeIcon isLinkedFile={tab.isLinkedFile} name={tab.name} />
+        </span>
+        <div className="editor-file-tab-path">&lrm;{tab.displayPath}</div>
+        <div className="editor-file-tab-action">
+          <button
+            onClick={onCloseClick}
+            className="editor-file-tab-close-action"
+            aria-label={t('close_tab')}
+          >
+            <MaterialIcon type="close" />
+          </button>
+        </div>
       </div>
     </div>
   )

services/web/frontend/stylesheets/pages/editor/tabs.scss

@@ -1,5 +1,10 @@
 :root {
-  --editor-tab-max-path-length: 150px;
+  --editor-tab-max-path-length: 250px;
+  --editor-tab-divider-color: var(--neutral-70);
+}
+
+@include theme('light') {
+  --editor-tab-divider-color: var(--border-divider);
 }
 
 .editor-tabs-container {
@@ -8,9 +13,8 @@
   align-items: center;
   gap: var(--spacing-02);
   flex: 0 0 auto;
-  background: var(--bg-primary-themed);
+  background: var(--bg-secondary-themed);
   justify-content: space-between;
-  border-bottom: 1px solid var(--border-divider-themed);
 
   .editor-tabs-labs-icon {
     flex: 0 0 auto;
@@ -29,7 +33,7 @@
   padding: 0;
   margin: 0;
   flex: 1;
-  background: var(--bg-primary-themed);
+  background: var(--bg-secondary-themed);
   overflow-x: auto;
 
   &.editor-tabs-row-hovered {
@@ -40,28 +44,56 @@
 }
 
 .editor-file-tab {
-  --tab-bg-color: transparent;
-  --tab-icon-colour: var(--content-secondary-themed);
+  --tab-bg-color: var(--bg-secondary-themed);
+  --tab-text-color: var(--content-secondary-themed);
 
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-02);
-  justify-content: center;
-  box-sizing: border-box;
-  padding: var(--spacing-02) var(--spacing-03);
-  background: var(--tab-bg-color);
-  color: var(--content-primary-themed);
-  border: none;
-  font-size: var(--font-size-02);
-  flex-direction: row;
-  cursor: pointer;
-  border-right: 1px solid var(--border-divider-themed);
-  border-left: 1px solid var(--tab-bg-color);
-  user-select: none;
+  border-right: 1px solid var(--editor-tab-divider-color);
+  border-left: 1px solid var(--bg-secondary-themed);
+  padding: var(--spacing-01) var(--spacing-02) 0 var(--spacing-02);
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  &:last-child.tab-selected {
+    border-right-color: var(--bg-secondary-themed);
+  }
+
+  .editor-file-tab-content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-02);
+    justify-content: center;
+    box-sizing: border-box;
+    padding: var(--spacing-02) var(--spacing-03);
+    background: var(--tab-bg-color);
+    color: var(--tab-text-color);
+    font-size: var(--font-size-02);
+    flex-direction: row;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid transparent;
+    border-bottom-width: 0;
+  }
 
   &.tab-selected {
-    --tab-bg-color: var(--bg-secondary-themed);
-    --tab-icon-colour: var(--content-primary-themed);
+    --tab-bg-color: var(--bg-primary-themed);
+    --tab-text-color: var(--content-primary-themed);
+
+    .editor-file-tab-content {
+      border-top-left-radius: var(--border-radius-medium);
+      border-top-right-radius: var(--border-radius-medium);
+      border-color: var(--editor-tab-divider-color);
+    }
+  }
+
+  &:not(.tab-selected) .editor-file-tab-content:hover {
+    background-color: var(--bg-tertiary-themed);
+    border-radius: var(--border-radius-medium);
   }
 
   .material-symbols {
@@ -71,7 +103,7 @@
 
   .file-tree-icon,
   .linked-file-highlight {
-    color: var(--tab-icon-colour);
+    color: var(--tab-text-color);
   }
 
   .editor-file-tab-icon {
@@ -116,8 +148,9 @@
 
   .editor-file-tab-close-action {
     background: transparent;
+    opacity: 0;
     border: none;
-    color: var(--content-primary-themed);
+    color: var(--tab-text-color);
     cursor: pointer;
     margin: 0;
     padding: 0;
@@ -125,7 +158,15 @@
     align-items: center;
 
     &:hover {
-      color: var(--content-secondary-themed);
+      color: var(--content-primary-themed);
+    }
+  }
+
+  &:hover,
+  &:focus-within,
+  &.tab-selected {
+    .editor-file-tab-close-action {
+      opacity: 1;
     }
   }
 }