Update line heights, buttons to respond to UI scale

Co-Authored-By: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com>

crates/gpui3/src/styled.rs

@@ -1,6 +1,6 @@
 use crate::{
-    self as gpui3, hsla, point, px, relative, rems, AlignItems, Display, Fill, FlexDirection, Hsla,
+    self as gpui3, hsla, point, px, relative, rems, AlignItems, DefiniteLength, Display, Fill,
-    JustifyContent, Length, Position, Rems, SharedString, StyleRefinement,
+    FlexDirection, Hsla, JustifyContent, Length, Position, Rems, SharedString, StyleRefinement,
 };
 use crate::{BoxShadow, TextStyleRefinement};
 use smallvec::smallvec;
@@ -529,4 +529,14 @@ pub trait Styled {
             .font_family = Some(family_name.into());
         self
     }
+
+    fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self
+    where
+        Self: Sized,
+    {
+        self.text_style()
+            .get_or_insert_with(Default::default)
+            .line_height = Some(line_height.into());
+        self
+    }
 }

crates/ui2/src/components/title_bar.rs

@@ -112,6 +112,7 @@ impl TitleBar {
             .justify_between()
             .w_full()
             .bg(color.background)
+            .py_1()
             .child(
                 div()
                     .flex()
@@ -132,7 +133,7 @@ impl TitleBar {
                             .child(Button::new("zed"))
                             .child(Button::new("nate/gpui2-ui-components")),
                     )
-                    .children(player_list.map(|p| PlayerStack::new(p)))
+                    // .children(player_list.map(|p| PlayerStack::new(p)))
                     .child(IconButton::new(Icon::Plus)),
             )
             .child(
@@ -146,7 +147,7 @@ impl TitleBar {
                             .items_center()
                             .gap_1()
                             .child(IconButton::new(Icon::FolderX))
-                            .child(IconButton::new(Icon::Close)),
+                            .child(IconButton::new(Icon::Exit)),
                     )
                     .child(ToolDivider::new())
                     .child(

crates/ui2/src/elements/button.rs

@@ -3,9 +3,9 @@ use std::sync::Arc;
 
 use gpui3::{DefiniteLength, Hsla, Interactive, MouseButton, WindowContext};
 
-use crate::prelude::*;
 use crate::settings::user_settings;
 use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor};
+use crate::{prelude::*, LineHeightStyle};
 
 #[derive(Default, PartialEq, Clone, Copy)]
 pub enum IconPosition {
@@ -137,7 +137,9 @@ impl<S: 'static + Send + Sync + Clone> Button<S> {
     }
 
     fn render_label(&self) -> Label<S> {
-        Label::new(self.label.clone()).color(self.label_color())
+        Label::new(self.label.clone())
+            .color(self.label_color())
+            .line_height_style(LineHeightStyle::UILabel)
     }
 
     fn render_icon(&self, icon_color: IconColor) -> Option<IconElement<S>> {

crates/ui2/src/elements/icon.rs

@@ -11,7 +11,7 @@ use crate::theme::{theme, Theme};
 pub enum IconSize {
     Small,
     #[default]
-    Large,
+    Medium,
 }
 
 #[derive(Default, PartialEq, Copy, Clone)]
@@ -58,6 +58,7 @@ pub enum Icon {
     ChevronRight,
     ChevronUp,
     Close,
+    Exit,
     ExclamationTriangle,
     File,
     FileGeneric,
@@ -109,6 +110,7 @@ impl Icon {
             Icon::ChevronRight => "icons/chevron_right.svg",
             Icon::ChevronUp => "icons/chevron_up.svg",
             Icon::Close => "icons/x.svg",
+            Icon::Exit => "icons/exit.svg",
             Icon::ExclamationTriangle => "icons/warning.svg",
             Icon::File => "icons/file.svg",
             Icon::FileGeneric => "icons/file_icons/file.svg",
@@ -177,13 +179,13 @@ impl<S: 'static + Send + Sync> IconElement<S> {
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
         let theme = theme(cx);
         let fill = self.color.color(theme);
-
+        let svg_size = match self.size {
-        let sized_svg = match self.size {
+            IconSize::Small => ui_size(12. / 14.),
-            IconSize::Small => svg().size_3p5(),
+            IconSize::Medium => ui_size(15. / 14.),
-            IconSize::Large => svg().size_4(),
         };
 
-        sized_svg
+        svg()
+            .size(svg_size)
             .flex_none()
             .path(self.icon.path())
             .text_color(fill)

crates/ui2/src/elements/label.rs

@@ -1,6 +1,6 @@
 use std::marker::PhantomData;
 
-use gpui3::{Hsla, WindowContext};
+use gpui3::{relative, Hsla, WindowContext};
 use smallvec::SmallVec;
 
 use crate::prelude::*;
@@ -38,10 +38,19 @@ impl LabelColor {
     }
 }
 
+#[derive(Default, PartialEq, Copy, Clone)]
+pub enum LineHeightStyle {
+    #[default]
+    TextLabel,
+    /// Sets the line height to 1
+    UILabel,
+}
+
 #[derive(Element, Clone)]
 pub struct Label<S: 'static + Send + Sync + Clone> {
     state_type: PhantomData<S>,
     label: SharedString,
+    line_height_style: LineHeightStyle,
     color: LabelColor,
     strikethrough: bool,
 }
@@ -51,6 +60,7 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
         Self {
             state_type: PhantomData,
             label: label.into(),
+            line_height_style: LineHeightStyle::default(),
             color: LabelColor::Default,
             strikethrough: false,
         }
@@ -61,6 +71,11 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
         self
     }
 
+    pub fn line_height_style(mut self, line_height_style: LineHeightStyle) -> Self {
+        self.line_height_style = line_height_style;
+        self
+    }
+
     pub fn set_strikethrough(mut self, strikethrough: bool) -> Self {
         self.strikethrough = strikethrough;
         self
@@ -82,6 +97,9 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
                 )
             })
             .text_size(ui_size(1.))
+            .when(self.line_height_style == LineHeightStyle::UILabel, |this| {
+                this.line_height(relative(1.))
+            })
             .text_color(self.color.hsla(cx))
             .child(self.label.clone())
     }

crates/ui2/src/settings.rs

@@ -8,6 +8,7 @@ use crate::DisclosureControlStyle;
 pub fn user_settings() -> Settings {
     let mut settings = Settings::default();
     settings.list_indent_depth = SettingValue::UserDefined(rems(0.5).into());
+    // settings.ui_scale = SettingValue::UserDefined(2.);
     settings
 }