Make toolbar horizontal padding more consistent (#2944)

Max Brunsfeld created 2 years ago

* increase horizontal padding of toolbar itself, remove padding that was
added to individual toolbar items like feedback button.
* make feedback info text and breadcrumbs have the same additional
padding as quick action buttons.

Release Notes:

- Fixed some inconsistencies in the layout of toolbars.

Change summary

crates/feedback/src/feedback_info_text.rs |  8 +++++---
styles/src/style_tree/feedback.ts         | 15 +++++++++------
styles/src/style_tree/toolbar.ts          |  8 ++++----
3 files changed, 18 insertions(+), 13 deletions(-)

Detailed changes

crates/feedback/src/feedback_info_text.rs

@@ -42,14 +42,14 @@ impl View for FeedbackInfoText {
             )
             .with_child(
                 MouseEventHandler::new::<OpenZedCommunityRepo, _>(0, cx, |state, _| {
-                    let contained_text = if state.hovered() {
+                    let style = if state.hovered() {
                         &theme.feedback.link_text_hover
                     } else {
                         &theme.feedback.link_text_default
                     };
-
-                    Label::new("community repo", contained_text.text.clone())
+                    Label::new("community repo", style.text.clone())
                         .contained()
+                        .with_style(style.container)
                         .aligned()
                         .left()
                         .clipped()
@@ -64,6 +64,8 @@ impl View for FeedbackInfoText {
                     .with_soft_wrap(false)
                     .aligned(),
             )
+            .contained()
+            .with_style(theme.feedback.info_text_default.container)
             .aligned()
             .left()
             .clipped()

styles/src/style_tree/feedback.ts

@@ -12,9 +12,6 @@ export default function feedback(): any {
                 background: background(theme.highest, "on"),
                 corner_radius: 6,
                 border: border(theme.highest, "on"),
-                margin: {
-                    right: 4,
-                },
                 padding: {
                     bottom: 2,
                     left: 10,
@@ -41,9 +38,15 @@ export default function feedback(): any {
             },
         }),
         button_margin: 8,
-        info_text_default: text(theme.highest, "sans", "default", {
-            size: "xs",
-        }),
+        info_text_default: {
+            padding: {
+                left: 4,
+                right: 4,
+            },
+            ...text(theme.highest, "sans", "default", {
+                size: "xs",
+            })
+        },
         link_text_default: text(theme.highest, "sans", "default", {
             size: "xs",
             underline: true,

styles/src/style_tree/toolbar.ts

@@ -8,7 +8,7 @@ export const toolbar = () => {
 
     return {
         height: 42,
-        padding: { left: 4, right: 4 },
+        padding: { left: 8, right: 8 },
         background: background(theme.highest),
         border: border(theme.highest, { bottom: true }),
         item_spacing: 4,
@@ -23,9 +23,9 @@ export const toolbar = () => {
                 ...text(theme.highest, "sans", "variant"),
                 corner_radius: 6,
                 padding: {
-                    left: 6,
-                    right: 6,
-                },
+                    left: 4,
+                    right: 4,
+                }
             },
             state: {
                 hovered: {