Replace "Give Feedback" with an icon and move it to the left

Antonio Scandurra and Nathan Sobo created 2 years ago

This is so we can show the current language in the status bar on
the right, and having two pieces of text sitting next to each other
felt too busy.

Co-Authored-By: Nathan Sobo <[e-mail]>

Change summary

assets/icons/speech_bubble_12.svg             |  3 +++
crates/feedback/src/deploy_feedback_button.rs | 20 +++++++++++++-------
crates/theme/src/theme.rs                     |  2 +-
crates/zed/src/zed.rs                         |  2 +-
styles/src/styleTree/statusBar.ts             |  8 ++++++--
5 files changed, 24 insertions(+), 11 deletions(-)

Detailed changes

assets/icons/speech_bubble_12.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6667 0.400196H1.33346C0.819658 0.400196 0.399658 0.820196 0.399658 1.3326V10.6658C0.399658 11.181 0.816998 11.5982 1.33206 11.5982C1.58966 11.5982 1.82206 11.4932 1.99146 11.3238L4.51706 8.79684H10.6639C11.1763 8.79684 11.5963 8.37544 11.5963 7.86304V1.3298C11.5963 0.815996 11.1749 0.395996 10.6625 0.395996L10.6667 0.400196ZM2.2667 2.2664H6.00008V3.1988H2.26628V2.265L2.2667 2.2664ZM7.8667 6.93316H2.2667V5.99936H7.8667V6.93176V6.93316ZM9.7329 5.06556H2.26488V4.13176H9.73164V5.06416L9.7329 5.06556Z" fill="#282C34"/>
+</svg>

crates/feedback/src/deploy_feedback_button.rs

@@ -1,7 +1,4 @@
-use gpui::{
-    elements::{MouseEventHandler, ParentElement, Stack, Text},
-    CursorStyle, Element, ElementBox, Entity, MouseButton, RenderContext, View, ViewContext,
-};
+use gpui::{elements::*, CursorStyle, Entity, MouseButton, RenderContext, View, ViewContext};
 use settings::Settings;
 use workspace::{item::ItemHandle, StatusItemView};
 
@@ -23,9 +20,18 @@ impl View for DeployFeedbackButton {
             .with_child(
                 MouseEventHandler::<Self>::new(0, cx, |state, cx| {
                     let theme = &cx.global::<Settings>().theme;
-                    let theme = &theme.workspace.status_bar.feedback;
-
-                    Text::new("Give Feedback", theme.style_for(state, true).clone()).boxed()
+                    let style = &theme.workspace.status_bar.feedback.style_for(state, false);
+                    Svg::new("icons/speech_bubble_12.svg")
+                        .with_color(style.color)
+                        .constrained()
+                        .with_width(style.icon_width)
+                        .aligned()
+                        .constrained()
+                        .with_width(style.button_width)
+                        .with_height(style.button_width)
+                        .contained()
+                        .with_style(style.container)
+                        .boxed()
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
                 .on_click(MouseButton::Left, |_, cx| cx.dispatch_action(GiveFeedback))

crates/theme/src/theme.rs

@@ -280,7 +280,7 @@ pub struct StatusBar {
     pub auto_update_progress_message: TextStyle,
     pub auto_update_done_message: TextStyle,
     pub lsp_status: Interactive<StatusBarLspStatus>,
-    pub feedback: Interactive<TextStyle>,
+    pub feedback: Interactive<IconButton>,
     pub sidebar_buttons: StatusBarSidebarButtons,
     pub diagnostic_summary: Interactive<StatusBarDiagnosticSummary>,
     pub diagnostic_message: Interactive<ContainedText>,

crates/zed/src/zed.rs

@@ -342,10 +342,10 @@ pub fn initialize_workspace(
     let feedback_button =
         cx.add_view(|_| feedback::deploy_feedback_button::DeployFeedbackButton {});
     workspace.status_bar().update(cx, |status_bar, cx| {
+        status_bar.add_left_item(feedback_button, cx);
         status_bar.add_left_item(diagnostic_summary, cx);
         status_bar.add_left_item(activity_indicator, cx);
         status_bar.add_right_item(cursor_position, cx);
-        status_bar.add_right_item(feedback_button, cx);
     });
 
     auto_update::notify_of_any_new_update(cx.weak_handle(), cx);

styles/src/styleTree/statusBar.ts

@@ -45,8 +45,12 @@ export default function statusBar(colorScheme: ColorScheme) {
             hover: text(layer, "sans", "hovered"),
         },
         feedback: {
-            ...text(layer, "sans", "variant"),
-            hover: text(layer, "sans", "hovered"),
+            color: foreground(layer, "variant"),
+            iconWidth: 14,
+            buttonWidth: 20,
+            hover: {
+              color: foreground(layer, "on"),
+            },
         },
         diagnosticSummary: {
             height: 20,