Update Zed UI for 0.2 release

Nate created 

* changes to padding, spacings and borders
* Fix incorrect borders on titlebar and sidebars
* QA pass on all themes, base font size -> 15
* Changed the max size of the file_finder
* Hid file_finder icons
* Modified the size of tab status indicators
* Made the default sidebar size bigger

Change summary

zed/assets/themes/_base.toml | 46 +++++++++++++++++++-------------------
zed/assets/themes/black.toml |  4 +-
zed/assets/themes/dark.toml  |  2 
zed/assets/themes/light.toml |  6 ++--
zed/src/file_finder.rs       | 30 ++++++++++++------------
zed/src/workspace/pane.rs    |  2 
zed/src/workspace/sidebar.rs |  2 
7 files changed, 46 insertions(+), 46 deletions(-)

Detailed changes

zed/assets/themes/_base.toml 🔗 

@@ -1,18 +1,18 @@
 [text]
-base = { family = "Inconsolata", size = 14 }
+base = { family = "Inconsolata", size = 15 }
 
 [workspace]
 background = "$surface.0"
 pane_divider = { width = 3, color = "$border.0" }
 
 [workspace.titlebar]
-border = { width = 1, bottom = true, color = "$surface.1" }
+border = { width = 1, bottom = true, color = "$border.0" }
 
 [workspace.tab]
 text = "$text.2"
-padding = { left = 10, right = 10 }
-icon_width = 12
-spacing = 6
+padding = { left = 8, right = 8 }
+icon_width = 16
+spacing = 7
 icon_close = "$text.2.color"
 icon_close_active = "$text.0.color"
 icon_dirty = "$status.info"
@@ -25,12 +25,12 @@ background = "$surface.1"
 text = "$text.0"
 
 [workspace.sidebar]
-padding = { left = 10, right = 10 }
+padding = { left = 12, right = 12 }
 border = { right = true, width = 1, color = "$border.0" }
 
 [workspace.sidebar.resize_handle]
 padding = { left = 1 }
-background = "$surface.1"
+background = "$border.0"
 
 [workspace.sidebar.icon]
 color = "$text.2.color"
@@ -42,32 +42,31 @@ color = "$text.0.color"
 
 [workspace.left_sidebar]
 extends = "$workspace.sidebar"
-border = { width = 1, color = "$surface.1", right = true }
+border = { width = 1, color = "$border.0", right = true }
 
 [workspace.right_sidebar]
 extends = "$workspace.sidebar"
-border = { width = 1, color = "$surface.1", left = true }
+border = { width = 1, color = "$border.0", left = true }
 
 [chat_panel]
 channel_name = { extends = "$text.0", weight = "bold" }
-channel_name_hash = { text = "$text.2", padding.right = 5 }
-border = { left = true, width = 1, color = "$border.0" }
-padding = 10
+channel_name_hash = { text = "$text.2", padding.right = 8 }
+padding = 12
 
 [chat_panel.message]
 body = "$text.1"
-sender = { extends = "$text.0", weight = "bold", margin.right = 10 }
+sender = { extends = "$text.0", weight = "bold", margin.right = 8 }
 timestamp = "$text.2"
-padding.bottom = 10
+padding.bottom = 6
 
 [chat_panel.channel_select.item]
 padding = 4
 name = "$text.1"
-hash = { extends = "$text.2", margin.right = 5 }
+hash = { extends = "$text.2", margin.right = 8 }
 
 [chat_panel.channel_select.hovered_item]
 extends = "$chat_panel.channel_select.item"
-background = "$surface.2"
+background = "$state.hover"
 corner_radius = 6
 
 [chat_panel.channel_select.active_item]
@@ -80,7 +79,7 @@ name = "$text.0"
 
 [chat_panel.channel_select.header]
 extends = "$chat_panel.channel_select.active_item"
-padding.bottom = 0
+padding.bottom = 4
 padding.left = 0
 
 [chat_panel.channel_select.menu]
@@ -92,10 +91,11 @@ background = "$surface.0"
 [chat_panel.input_editor]
 background = "$surface.1"
 corner_radius = 6
-padding = 6
-text = "$text.1.color"
+padding = { left = 8, right = 8, top = 7, bottom = 7 }
+text = "$text.0.color"
 placeholder_text = "$text.2.color"
 selection = "$selection.host"
+border = { width = 1, color = "$border.0" }
 
 [chat_panel.sign_in_prompt]
 extends = "$text.0"
@@ -108,20 +108,20 @@ color = "$text.1.color"
 [selector]
 background = "$surface.0"
 padding = 8
-margin.top = 12
+margin.top = 52
 corner_radius = 6
 shadow = { offset = [0, 2], blur = 16, color = "$shadow.0" }
 input_editor = "$chat_panel.input_editor"
 border = { width = 1, color = "$border.0" }
 
 [selector.empty]
-text = "$text.0"
-padding = { left = 16, right = 16, top = 4, bottom = 4 }
+text = "$text.2"
+padding = { left = 8, right = 8, top = 8, bottom = 4 }
 
 [selector.item]
 text = "$text.1"
 highlight_text = { extends = "$text.base", color = "$syntax.keyword.color", weight = "$syntax.keyword.weight" }
-padding = { left = 16, right = 16, top = 4, bottom = 4 }
+padding = { left = 8, right = 8, top = 4, bottom = 4 }
 corner_radius = 6
 
 [selector.active_item]

zed/assets/themes/black.toml 🔗 

@@ -9,7 +9,7 @@ extends = "_base"
 0 = "#0F1011"
 
 [text]
-base = { family = "Inconsolata", size = 14 }
+base = { family = "Inconsolata", size = 15 }
 0 = { extends = "$text.base", color = "#ffffff" }
 1 = { extends = "$text.base", color = "#b3b3b3" }
 2 = { extends = "$text.base", color = "#7b7d80" }
@@ -34,7 +34,7 @@ hover = "#00000033"
 
 [syntax]
 keyword = { color = "#0086c0", weight = "bold" }
-function = "#dcdcaa"
+function = { color = "#dcdcaa", underline = true }
 string = "#cb8f77"
 type = "#4ec9b0"
 number = "#b5cea8"

zed/assets/themes/dark.toml 🔗 

@@ -9,7 +9,7 @@ extends = "_base"
 0 = "#1B222B"
 
 [text]
-base = { family = "Inconsolata", size = 14 }
+base = { family = "Inconsolata", size = 15 }
 0 = { extends = "$text.base", color = "#FFFFFF" }
 1 = { extends = "$text.base", color = "#CDD1E2" }
 2 = { extends = "$text.base", color = "#9BA8BE" }

zed/assets/themes/light.toml 🔗 

@@ -6,10 +6,10 @@ extends = "_base"
 2 = "#FFFFFF"
 
 [border]
-0 = "#DBDBDC"
+0 = "#DDDDDC"
 
 [text]
-base = { family = "Inconsolata", size = 14 }
+base = { family = "Inconsolata", size = 15 }
 0 = { extends = "$text.base", color = "#000000" }
 1 = { extends = "$text.base", color = "#29292B" }
 2 = { extends = "$text.base", color = "#7E7E83" }
@@ -34,7 +34,7 @@ hover = "#0000000D"
 
 [syntax]
 keyword = { color = "#0000fa", weight = "bold" }
-function = "#795e26"
+function = { color = "#795e26", underline = true }
 string = "#a82121"
 type = "#267f29"
 number = "#b5cea8"

zed/src/file_finder.rs 🔗 

@@ -97,8 +97,8 @@ impl View for FileFinder {
                 .with_style(&settings.theme.selector.container)
                 .boxed(),
             )
-            .with_max_width(600.0)
-            .with_max_height(400.0)
+            .with_max_width(500.0)
+            .with_max_height(420.0)
             .boxed(),
         )
         .top()
@@ -167,19 +167,19 @@ impl FileFinder {
             self.labels_for_match(path_match);
         let container = Container::new(
             Flex::row()
-                .with_child(
-                    Container::new(
-                        LineBox::new(
-                            Svg::new("icons/file-16.svg")
-                                .with_color(style.label.text.color)
-                                .boxed(),
-                            style.label.text.clone(),
-                        )
-                        .boxed(),
-                    )
-                    .with_padding_right(6.0)
-                    .boxed(),
-                )
+                // .with_child(
+                //     Container::new(
+                //         LineBox::new(
+                //             Svg::new("icons/file-16.svg")
+                //                 .with_color(style.label.text.color)
+                //                 .boxed(),
+                //             style.label.text.clone(),
+                //         )
+                //         .boxed(),
+                //     )
+                //     .with_padding_right(6.0)
+                //     .boxed(),
+                // )
                 .with_child(
                     Flexible::new(
                         1.0,

zed/src/workspace/pane.rs 🔗 

@@ -216,7 +216,7 @@ impl Pane {
                             Flex::row()
                                 .with_child(
                                     Align::new({
-                                        let diameter = 6.0;
+                                        let diameter = 7.0;
                                         let icon_color = if item.has_conflict(cx) {
                                             Some(style.icon_conflict)
                                         } else if item.is_dirty(cx) {

zed/src/workspace/sidebar.rs 🔗 

@@ -37,7 +37,7 @@ impl Sidebar {
             side,
             items: Default::default(),
             active_item_ix: None,
-            width: Rc::new(RefCell::new(220.)),
+            width: Rc::new(RefCell::new(260.)),
         }
     }