Refine keymap UI design (#34437)

Release Notes:

- N/A

---------

Co-authored-by: Ben Kunkle <Ben.kunkle@gmail.com>

crates/ui_input/src/ui_input.rs

@@ -27,6 +27,8 @@ pub struct SingleLineInput {
     ///
     /// Its position is determined by the [`FieldLabelLayout`].
     label: Option<SharedString>,
+    /// The size of the label text.
+    label_size: LabelSize,
     /// The placeholder text for the text field.
     placeholder: SharedString,
     /// Exposes the underlying [`Entity<Editor>`] to allow for customizing the editor beyond the provided API.
@@ -59,6 +61,7 @@ impl SingleLineInput {
 
         Self {
             label: None,
+            label_size: LabelSize::Small,
             placeholder: placeholder_text,
             editor,
             start_icon: None,
@@ -76,6 +79,11 @@ impl SingleLineInput {
         self
     }
 
+    pub fn label_size(mut self, size: LabelSize) -> Self {
+        self.label_size = size;
+        self
+    }
+
     pub fn set_disabled(&mut self, disabled: bool, cx: &mut Context<Self>) {
         self.disabled = disabled;
         self.editor
@@ -138,7 +146,7 @@ impl Render for SingleLineInput {
             .when_some(self.label.clone(), |this, label| {
                 this.child(
                     Label::new(label)
-                        .size(LabelSize::Small)
+                        .size(self.label_size)
                         .color(if self.disabled {
                             Color::Disabled
                         } else {
@@ -148,16 +156,17 @@ impl Render for SingleLineInput {
             })
             .child(
                 h_flex()
+                    .min_w_48()
+                    .min_h_8()
+                    .w_full()
                     .px_2()
                     .py_1p5()
-                    .bg(style.background_color)
+                    .flex_grow()
                     .text_color(style.text_color)
-                    .rounded_md()
+                    .rounded_lg()
+                    .bg(style.background_color)
                     .border_1()
                     .border_color(style.border_color)
-                    .min_w_48()
-                    .w_full()
-                    .flex_grow()
                     .when_some(self.start_icon, |this, icon| {
                         this.gap_1()
                             .child(Icon::new(icon).size(IconSize::Small).color(Color::Muted))
@@ -173,16 +182,28 @@ impl Component for SingleLineInput {
     }
 
     fn preview(window: &mut Window, cx: &mut App) -> Option<AnyElement> {
-        let input_1 =
-            cx.new(|cx| SingleLineInput::new(window, cx, "placeholder").label("Some Label"));
+        let input_small =
+            cx.new(|cx| SingleLineInput::new(window, cx, "placeholder").label("Small Label"));
+
+        let input_regular = cx.new(|cx| {
+            SingleLineInput::new(window, cx, "placeholder")
+                .label("Regular Label")
+                .label_size(LabelSize::Default)
+        });
 
         Some(
             v_flex()
                 .gap_6()
-                .children(vec![example_group(vec![single_example(
-                    "Default",
-                    div().child(input_1.clone()).into_any_element(),
-                )])])
+                .children(vec![example_group(vec![
+                    single_example(
+                        "Small Label (Default)",
+                        div().child(input_small.clone()).into_any_element(),
+                    ),
+                    single_example(
+                        "Regular Label",
+                        div().child(input_regular.clone()).into_any_element(),
+                    ),
+                ])])
                 .into_any_element(),
         )
     }