wip: design

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,
+    div, impl_internal_actions, px, svg, Axis, Context, Edges, InteractiveElement, IntoElement,
-    ParentElement, Render, Styled, View, ViewContext, VisualContext, WeakView, WindowContext,
+    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,
+    theme::{scale::ColorScaleStep, ActiveTheme, Theme},
-    ContextModal, Root, Sizable, TitleBar,
+    ContextModal, Root, TitleBar,
 };
 
 #[derive(Clone, PartialEq, Eq, Deserialize)]
@@ -163,12 +163,12 @@ impl Render for AppView {
 
         if cx.global::<AppRegistry>().is_loading {
             content = content.child(div()).child(
-                div()
+                div().flex_1().flex().items_center().justify_center().child(
-                    .flex_1()
+                    svg()
-                    .flex()
+                        .path("brand/coop.svg")
-                    .items_center()
+                        .size_12()
-                    .justify_center()
+                        .text_color(cx.theme().base.step(cx, ColorScaleStep::THREE)),
-                    .child(Indicator::new().small()),
+                ),
             )
         } else if let Some(account) = self.account.read(cx).as_ref() {
             content = content

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)),
             )

crates/ui/src/dock_area/mod.rs

@@ -1,12 +1,9 @@
-use crate::{
+use crate::dock_area::{
-    dock_area::{
     dock::{Dock, DockPlacement},
     panel::{Panel, PanelEvent, PanelStyle, PanelView},
     stack_panel::StackPanel,
     state::{DockAreaState, DockState},
     tab_panel::TabPanel,
-    },
-    theme::{scale::ColorScaleStep, ActiveTheme},
 };
 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))
+                                this.child(div().flex().flex_none().child(dock))
-                                    .child(div().flex().flex_none().child(dock))
                             })
                             // Center
                             .child(

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<PanelEvent> for StackPanel {}
 impl EventEmitter<DismissEvent> for StackPanel {}
 
 impl Render for StackPanel {
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
         h_flex()
             .size_full()
             .overflow_hidden()
-            .bg(cx.theme().base.step(cx, ColorScaleStep::THREE))
             .child(self.panel_group.clone())
     }
 }

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_hidden()
-                    .overflow_x_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))
     }

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().accent.step(cx, ColorScaleStep::TWELVE),
-                cx.theme().background,
+                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()
+            .rounded(px(cx.theme().radius))
-            .border_color(cx.theme().transparent)
+            .hover(|this| this.bg(hover_bg_color))
-            .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)),
-                )
-            })
             .when_some(self.prefix, |this, prefix| {
                 this.child(prefix).text_color(text_color)
             })

crates/ui/src/tab/tab_bar.rs

@@ -1,7 +1,4 @@
-use crate::{
+use crate::h_flex;
-    h_flex,
-    theme::{scale::ColorScaleStep, ActiveTheme},
-};
 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),

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())