Use square buttons for code action and run indicators in the gutter (#12906)

versecafe and Marshall Bowers created 2 years ago

### Before

<img width="94" alt="Screenshot 2024-06-14 at 1 34 54 PM"
src="https://github.com/zed-industries/zed/assets/1486634/fe756434-f072-4506-8fd2-c220c17cf112">

<img width="115" alt="Screenshot 2024-06-14 at 1 35 04 PM"
src="https://github.com/zed-industries/zed/assets/1486634/e378f02b-cb55-467d-9a5e-04e162d6daab">

### After

<img width="128" alt="Screenshot 2024-06-14 at 1 34 27 PM"
src="https://github.com/zed-industries/zed/assets/1486634/3d857a85-7673-43b1-8c48-56766455dd81">

<img width="134" alt="Screenshot 2024-06-14 at 1 34 33 PM"
src="https://github.com/zed-industries/zed/assets/1486634/b04c1fef-0a30-4eb1-b8f7-4eff351fcdc7">


Release Notes:

- Improved the look of code action and run indicators in the gutter
([#12803](https://github.com/zed-industries/zed/issues/12803)).

---------

Co-authored-by: Marshall Bowers <[e-mail]>

Change summary

crates/editor/src/editor.rs                    | 4 ++--
crates/ui/src/components/button/icon_button.rs | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)

Detailed changes

crates/editor/src/editor.rs

@@ -4915,8 +4915,8 @@ impl Editor {
         if self.available_code_actions.is_some() {
             Some(
                 IconButton::new("code_actions_indicator", ui::IconName::Bolt)
+                    .shape(ui::IconButtonShape::Square)
                     .icon_size(IconSize::XSmall)
-                    .size(ui::ButtonSize::None)
                     .icon_color(Color::Muted)
                     .selected(is_active)
                     .on_click(cx.listener(move |editor, _e, cx| {
@@ -4953,8 +4953,8 @@ impl Editor {
         cx: &mut ViewContext<Self>,
     ) -> IconButton {
         IconButton::new(("run_indicator", row.0 as usize), ui::IconName::Play)
+            .shape(ui::IconButtonShape::Square)
             .icon_size(IconSize::XSmall)
-            .size(ui::ButtonSize::None)
             .icon_color(Color::Muted)
             .selected(is_active)
             .on_click(cx.listener(move |editor, _e, cx| {

crates/ui/src/components/button/icon_button.rs

@@ -145,7 +145,7 @@ impl RenderOnce for IconButton {
                     let icon_size = self.icon_size.rems() * cx.rem_size();
                     let padding = match self.icon_size {
                         IconSize::Indicator => Spacing::None.px(cx),
-                        IconSize::XSmall => Spacing::None.px(cx),
+                        IconSize::XSmall => Spacing::XSmall.px(cx),
                         IconSize::Small => Spacing::XSmall.px(cx),
                         IconSize::Medium => Spacing::XSmall.px(cx),
                     };