Tweak warning diagnostic toggle (#18637)

Danilo Leal created 1 year ago

This PR adds color to the warning diagnostic toggle, so that, if it's
turned on, the warning icon is yellow. And, in the opposite case, it's
muted.

| Turned on | Turned off |
|--------|--------|
| <img width="1136" alt="Screenshot 2024-10-02 at 6 08 30 PM"
src="https://github.com/user-attachments/assets/be64738b-4c14-41d4-b1d4-ad788cf9e72b">
| <img width="1136" alt="Screenshot 2024-10-02 at 6 08 36 PM"
src="https://github.com/user-attachments/assets/d144ff50-4bf6-4c23-925a-05bcbbcd8b9d">
|

---

Release Notes:

- N/A

Change summary

crates/diagnostics/src/toolbar_controls.rs | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)

Detailed changes

crates/diagnostics/src/toolbar_controls.rs

@@ -1,7 +1,7 @@
 use crate::ProjectDiagnosticsEditor;
 use gpui::{EventEmitter, ParentElement, Render, View, ViewContext, WeakView};
 use ui::prelude::*;
-use ui::{IconButton, IconName, Tooltip};
+use ui::{IconButton, IconButtonShape, IconName, Tooltip};
 use workspace::{item::ItemHandle, ToolbarItemEvent, ToolbarItemLocation, ToolbarItemView};
 
 pub struct ToolbarControls {
@@ -33,11 +33,19 @@ impl Render for ToolbarControls {
             "Include Warnings"
         };
 
+        let warning_color = if include_warnings {
+            Color::Warning
+        } else {
+            Color::Muted
+        };
+
         h_flex()
+            .gap_1()
             .when(has_stale_excerpts, |div| {
                 div.child(
                     IconButton::new("update-excerpts", IconName::Update)
                         .icon_color(Color::Info)
+                        .shape(IconButtonShape::Square)
                         .disabled(is_updating)
                         .tooltip(move |cx| Tooltip::text("Update excerpts", cx))
                         .on_click(cx.listener(|this, _, cx| {
@@ -51,6 +59,8 @@ impl Render for ToolbarControls {
             })
             .child(
                 IconButton::new("toggle-warnings", IconName::Warning)
+                    .icon_color(warning_color)
+                    .shape(IconButtonShape::Square)
                     .tooltip(move |cx| Tooltip::text(tooltip, cx))
                     .on_click(cx.listener(|this, _, cx| {
                         if let Some(editor) = this.editor() {