crates/dock/src/tab/mod.rs

@@ -1,9 +1,9 @@
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, px, AnyElement, App, Div, InteractiveElement, IntoElement, ParentElement, RenderOnce,
-    StatefulInteractiveElement, Styled, Window,
+    div, px, AnyElement, App, Div, InteractiveElement, IntoElement, MouseButton, ParentElement,
+    RenderOnce, StatefulInteractiveElement, Styled, Window,
 };
-use theme::ActiveTheme;
+use theme::{ActiveTheme, TITLEBAR_HEIGHT};
 use ui::{Selectable, Sizable, Size};
 
 pub mod tab_bar;
@@ -130,7 +130,7 @@ impl RenderOnce for Tab {
 
         self.base
             .id(self.ix)
-            .h(px(30.))
+            .h(TITLEBAR_HEIGHT)
             .px_2()
             .relative()
             .flex()
@@ -142,11 +142,24 @@ impl RenderOnce for Tab {
             .text_ellipsis()
             .text_color(text_color)
             .bg(bg_color)
-            .hover(|this| this.bg(hover_bg_color))
+            .border_l(px(1.))
+            .border_r(px(1.))
+            .border_color(cx.theme().border)
+            .when(!self.selected, |this| {
+                this.hover(|this| {
+                    this.text_color(text_color)
+                        .bg(hover_bg_color)
+                        .border_l(px(0.))
+                        .border_r(px(0.))
+                })
+            })
             .when_some(self.prefix, |this, prefix| {
                 this.child(prefix).text_color(text_color)
             })
             .when_some(self.label, |this, label| this.child(label))
             .when_some(self.suffix, |this, suffix| this.child(suffix))
+            .on_mouse_down(MouseButton::Left, |_ev, _window, cx| {
+                cx.stop_propagation();
+            })
     }
 }

crates/dock/src/tab/tab_bar.rs

@@ -27,7 +27,7 @@ pub struct TabBar {
 impl TabBar {
     pub fn new() -> Self {
         Self {
-            base: div().px(px(-1.)),
+            base: h_flex().px(px(-1.)),
             style: StyleRefinement::default(),
             scroll_handle: None,
             children: SmallVec::new(),
@@ -99,17 +99,23 @@ impl RenderOnce for TabBar {
 
         self.base
             .group("tab-bar")
-            .refine_style(&self.style)
             .relative()
-            .flex()
-            .items_center()
+            .refine_style(&self.style)
             .bg(cx.theme().elevated_surface_background)
             .when(!focused, |this| {
-                this.bg(cx.theme().elevated_surface_background.opacity(0.75))
+                // TODO: add specific styles for unfocused tab bar
+                this.bg(cx.theme().elevated_surface_background)
             })
+            .child(
+                div()
+                    .id("border-bottom")
+                    .absolute()
+                    .left_0()
+                    .bottom_0()
+                    .size_full()
                     .border_b_1()
-            .border_color(cx.theme().border)
-            .overflow_hidden()
+                    .border_color(cx.theme().border),
+            )
             .text_color(cx.theme().text)
             .when_some(self.prefix, |this, prefix| this.child(prefix))
             .child(

crates/dock/src/tab_panel.rs

@@ -664,6 +664,7 @@ impl TabPanel {
                         .top_0()
                         .right(-px(1.))
                         .border_r_1()
+                        .border_b_1()
                         .h_full()
                         .border_color(cx.theme().border)
                         .bg(cx.theme().elevated_surface_background)
@@ -791,16 +792,23 @@ impl TabPanel {
                         ))
                     }),
             )
-            .suffix(
+            .when(!self.collapsed, |this| {
+                this.suffix(
                     h_flex()
                         .items_center()
+                        .px_2()
+                        .gap_1()
                         .top_0()
                         .right_0()
                         .h_full()
-                    .px_2()
-                    .gap_1()
-                    .child(self.render_toolbar(state, window, cx)),
+                        .border_color(cx.theme().border)
+                        .border_l_1()
+                        .border_b_1()
+                        .when(!cx.theme().platform.is_mac(), |this| this.border_r_1())
+                        .child(self.render_toolbar(state, window, cx))
+                        .when_some(right_dock_button, |this, btn| this.child(btn)),
                 )
+            })
             .into_any_element()
     }
 

crates/theme/src/colors.rs

@@ -106,7 +106,7 @@ impl ThemeColors {
             background: neutral().light().step_1(),
             surface_background: neutral().light().step_2(),
             elevated_surface_background: neutral().light().step_3(),
-            panel_background: neutral().light().step_4(),
+            panel_background: neutral().light().step_1(),
             overlay: neutral().light_alpha().step_3(),
             title_bar: gpui::transparent_black(),
             title_bar_inactive: neutral().light().step_1(),
@@ -166,7 +166,7 @@ impl ThemeColors {
 
             tab_inactive_background: neutral().light().step_2(),
             tab_hover_background: neutral().light().step_3(),
-            tab_active_background: neutral().light().step_4(),
+            tab_active_background: neutral().light().step_1(),
 
             scrollbar_thumb_background: neutral().light_alpha().step_3(),
             scrollbar_thumb_hover_background: neutral().light_alpha().step_4(),
@@ -188,7 +188,7 @@ impl ThemeColors {
             background: neutral().dark().step_1(),
             surface_background: neutral().dark().step_2(),
             elevated_surface_background: neutral().dark().step_3(),
-            panel_background: neutral().dark().step_4(),
+            panel_background: neutral().dark().step_1(),
             overlay: neutral().dark_alpha().step_3(),
             title_bar: gpui::transparent_black(),
             title_bar_inactive: neutral().dark().step_1(),
@@ -248,7 +248,7 @@ impl ThemeColors {
 
             tab_inactive_background: neutral().dark().step_2(),
             tab_hover_background: neutral().dark().step_3(),
-            tab_active_background: neutral().dark().step_4(),
+            tab_active_background: neutral().dark().step_1(),
 
             scrollbar_thumb_background: neutral().dark_alpha().step_3(),
             scrollbar_thumb_hover_background: neutral().dark_alpha().step_4(),