diff --git a/crates/app/src/views/app.rs b/crates/app/src/views/app.rs index 51df303..6d95452 100644 --- a/crates/app/src/views/app.rs +++ b/crates/app/src/views/app.rs @@ -4,17 +4,17 @@ use super::{ }; use crate::states::{app::AppRegistry, chat::ChatRegistry}; use gpui::{ - div, impl_internal_actions, px, Axis, Context, Edges, InteractiveElement, IntoElement, Model, - ParentElement, Render, Styled, View, ViewContext, VisualContext, WeakView, WindowContext, + div, impl_internal_actions, px, svg, Axis, Context, Edges, InteractiveElement, IntoElement, + Model, ParentElement, Render, Styled, View, ViewContext, VisualContext, WeakView, + WindowContext, }; use serde::Deserialize; use std::sync::Arc; use ui::{ dock_area::{dock::DockPlacement, DockArea, DockItem}, - indicator::Indicator, notification::NotificationType, - theme::Theme, - ContextModal, Root, Sizable, TitleBar, + theme::{scale::ColorScaleStep, ActiveTheme, Theme}, + ContextModal, Root, TitleBar, }; #[derive(Clone, PartialEq, Eq, Deserialize)] @@ -163,12 +163,12 @@ impl Render for AppView { if cx.global::().is_loading { content = content.child(div()).child( - div() - .flex_1() - .flex() - .items_center() - .justify_center() - .child(Indicator::new().small()), + div().flex_1().flex().items_center().justify_center().child( + svg() + .path("brand/coop.svg") + .size_12() + .text_color(cx.theme().base.step(cx, ColorScaleStep::THREE)), + ), ) } else if let Some(account) = self.account.read(cx).as_ref() { content = content diff --git a/crates/ui/src/dock_area/dock.rs b/crates/ui/src/dock_area/dock.rs index 01fb80d..f46ff84 100644 --- a/crates/ui/src/dock_area/dock.rs +++ b/crates/ui/src/dock_area/dock.rs @@ -274,7 +274,7 @@ impl Dock { }) .child( div() - .bg(cx.theme().base.step(cx, ColorScaleStep::FIVE)) + .hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::SIX))) .when(axis.is_horizontal(), |this| this.h_full().w(HANDLE_SIZE)) .when(axis.is_vertical(), |this| this.w_full().h(HANDLE_SIZE)), ) diff --git a/crates/ui/src/dock_area/mod.rs b/crates/ui/src/dock_area/mod.rs index 42c9fa5..6e60355 100644 --- a/crates/ui/src/dock_area/mod.rs +++ b/crates/ui/src/dock_area/mod.rs @@ -1,12 +1,9 @@ -use crate::{ - dock_area::{ - dock::{Dock, DockPlacement}, - panel::{Panel, PanelEvent, PanelStyle, PanelView}, - stack_panel::StackPanel, - state::{DockAreaState, DockState}, - tab_panel::TabPanel, - }, - theme::{scale::ColorScaleStep, ActiveTheme}, +use crate::dock_area::{ + dock::{Dock, DockPlacement}, + panel::{Panel, PanelEvent, PanelStyle, PanelView}, + stack_panel::StackPanel, + state::{DockAreaState, DockState}, + tab_panel::TabPanel, }; use anyhow::Result; use gpui::{ @@ -777,8 +774,7 @@ impl Render for DockArea { .h_full() // Left dock .when_some(self.left_dock.clone(), |this, dock| { - this.bg(cx.theme().base.step(cx, ColorScaleStep::ONE)) - .child(div().flex().flex_none().child(dock)) + this.child(div().flex().flex_none().child(dock)) }) // Center .child( diff --git a/crates/ui/src/dock_area/stack_panel.rs b/crates/ui/src/dock_area/stack_panel.rs index 36b0afe..7ece0a8 100644 --- a/crates/ui/src/dock_area/stack_panel.rs +++ b/crates/ui/src/dock_area/stack_panel.rs @@ -10,7 +10,6 @@ use crate::{ h_resizable, resizable_panel, v_resizable, ResizablePanel, ResizablePanelEvent, ResizablePanelGroup, }, - theme::{scale::ColorScaleStep, ActiveTheme}, AxisExt as _, Placement, }; use gpui::{ @@ -374,11 +373,10 @@ impl EventEmitter for StackPanel {} impl EventEmitter for StackPanel {} impl Render for StackPanel { - fn render(&mut self, cx: &mut ViewContext) -> impl IntoElement { + fn render(&mut self, _cx: &mut ViewContext) -> impl IntoElement { h_flex() .size_full() .overflow_hidden() - .bg(cx.theme().base.step(cx, ColorScaleStep::THREE)) .child(self.panel_group.clone()) } } diff --git a/crates/ui/src/dock_area/tab_panel.rs b/crates/ui/src/dock_area/tab_panel.rs index 9255a93..1cb0cb4 100644 --- a/crates/ui/src/dock_area/tab_panel.rs +++ b/crates/ui/src/dock_area/tab_panel.rs @@ -574,11 +574,7 @@ impl TabPanel { .top_0() // Right -1 for avoid border overlap with the first tab .right(-px(1.)) - .border_r_1() - .border_b_1() .h_full() - .border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE)) - .bg(cx.theme().base.step(cx, ColorScaleStep::TWO)) .px_2() .children(left_dock_button) .children(bottom_dock_button), @@ -658,11 +654,7 @@ impl TabPanel { .items_center() .top_0() .right_0() - .border_l_1() - .border_b_1() .h_full() - .border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE)) - .bg(cx.theme().base.step(cx, ColorScaleStep::TWO)) .px_2() .gap_1() .child(self.render_toolbar(state, cx)) @@ -681,10 +673,23 @@ impl TabPanel { div() .id("tab-content") .group("") - .overflow_y_scroll() - .overflow_x_hidden() + .overflow_hidden() .flex_1() - .child(panel.view()) + .p_1() + .child( + div() + .size_full() + .rounded_lg() + .shadow_sm() + .border_1() + .border_color(cx.theme().background) + .when(cx.theme().appearance.is_dark(), |this| { + this.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE)) + }) + .bg(cx.theme().background) + .overflow_hidden() + .child(panel.view()), + ) .when(state.droppable, |this| { this.on_drag_move(cx.listener(Self::on_panel_drag_move)) .child( @@ -950,7 +955,6 @@ impl Render for TabPanel { .on_action(cx.listener(Self::on_action_close_panel)) .size_full() .overflow_hidden() - .bg(cx.theme().background) .child(self.render_title_bar(state, cx)) .child(self.render_active_panel(state, cx)) } diff --git a/crates/ui/src/tab/mod.rs b/crates/ui/src/tab/mod.rs index d19cfed..71e5616 100644 --- a/crates/ui/src/tab/mod.rs +++ b/crates/ui/src/tab/mod.rs @@ -84,22 +84,26 @@ impl Styled for Tab { impl RenderOnce for Tab { fn render(self, cx: &mut WindowContext) -> impl IntoElement { - let (text_color, bg_color) = match (self.selected, self.disabled) { + let (text_color, bg_color, hover_bg_color) = match (self.selected, self.disabled) { (true, false) => ( - cx.theme().base.step(cx, ColorScaleStep::TWELVE), - cx.theme().background, + cx.theme().accent.step(cx, ColorScaleStep::TWELVE), + cx.theme().accent.step(cx, ColorScaleStep::THREE), + cx.theme().accent.step(cx, ColorScaleStep::FOUR), ), (false, false) => ( cx.theme().base.step(cx, ColorScaleStep::ELEVEN), + cx.theme().base.step(cx, ColorScaleStep::ONE), cx.theme().base.step(cx, ColorScaleStep::TWO), ), // disabled (true, true) => ( cx.theme().base.step(cx, ColorScaleStep::ELEVEN), + cx.theme().base.step(cx, ColorScaleStep::ONE), cx.theme().base.step(cx, ColorScaleStep::TWO), ), (false, true) => ( cx.theme().base.step(cx, ColorScaleStep::ELEVEN), + cx.theme().base.step(cx, ColorScaleStep::ONE), cx.theme().base.step(cx, ColorScaleStep::TWO), ), }; @@ -115,22 +119,8 @@ impl RenderOnce for Tab { .text_sm() .text_color(text_color) .bg(bg_color) - .border_x_1() - .border_color(cx.theme().transparent) - .when(self.selected, |this| { - this.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE)) - }) - .when(!self.selected, |this| { - this.child( - div() - .absolute() - .left_0() - .bottom_0() - .size_full() - .border_b_1() - .border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE)), - ) - }) + .rounded(px(cx.theme().radius)) + .hover(|this| this.bg(hover_bg_color)) .when_some(self.prefix, |this, prefix| { this.child(prefix).text_color(text_color) }) diff --git a/crates/ui/src/tab/tab_bar.rs b/crates/ui/src/tab/tab_bar.rs index e104e01..b1764b1 100644 --- a/crates/ui/src/tab/tab_bar.rs +++ b/crates/ui/src/tab/tab_bar.rs @@ -1,7 +1,4 @@ -use crate::{ - h_flex, - theme::{scale::ColorScaleStep, ActiveTheme}, -}; +use crate::h_flex; use gpui::{ div, prelude::FluentBuilder as _, px, AnyElement, Div, ElementId, InteractiveElement, IntoElement, ParentElement, RenderOnce, ScrollHandle, StatefulInteractiveElement as _, Styled, @@ -63,29 +60,21 @@ impl Styled for TabBar { } impl RenderOnce for TabBar { - fn render(self, cx: &mut WindowContext) -> impl IntoElement { + fn render(self, _cx: &mut WindowContext) -> impl IntoElement { self.base .id(self.id) .group("tab-bar") .relative() + .px_1() .flex() .flex_none() .items_center() - .bg(cx.theme().base.step(cx, ColorScaleStep::TWO)) - .child( - div() - .id("border-b") - .absolute() - .bottom_0() - .size_full() - .border_b_1() - .border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE)), - ) .when_some(self.prefix, |this, prefix| this.child(prefix)) .child( h_flex() .id("tabs") .flex_grow() + .gap_1() .overflow_x_scroll() .track_scroll(&self.scroll_handle) .children(self.children), diff --git a/crates/ui/src/title_bar.rs b/crates/ui/src/title_bar.rs index 41c3893..009dbfe 100644 --- a/crates/ui/src/title_bar.rs +++ b/crates/ui/src/title_bar.rs @@ -251,8 +251,6 @@ impl RenderOnce for TitleBar { .items_center() .justify_between() .h(HEIGHT) - .border_b_1() - .border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE)) .bg(cx.theme().base.step(cx, ColorScaleStep::ONE)) .when(cx.is_fullscreen(), |this| this.pl(px(12.))) .on_double_click(|_, cx| cx.zoom_window())