Make toolbar horizontal padding more consistent

* 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.
This commit is contained in:
Max Brunsfeld 2023-09-07 12:50:08 -07:00
parent 5b0f4ac9e8
commit 56d9a578bd
3 changed files with 19 additions and 14 deletions

View file

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

View file

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

View file

@ -2,14 +2,14 @@ import { useTheme } from "../common"
import { toggleable_icon_button } from "../component/icon_button" import { toggleable_icon_button } from "../component/icon_button"
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
import { text_button } from "../component"; import { text_button } from "../component"
export const toolbar = () => { export const toolbar = () => {
const theme = useTheme() const theme = useTheme()
return { return {
height: 42, height: 42,
padding: { left: 4, right: 4 }, padding: { left: 8, right: 8 },
background: background(theme.highest), background: background(theme.highest),
border: border(theme.highest, { bottom: true }), border: border(theme.highest, { bottom: true }),
item_spacing: 4, item_spacing: 4,
@ -24,9 +24,9 @@ export const toolbar = () => {
...text(theme.highest, "sans", "variant"), ...text(theme.highest, "sans", "variant"),
corner_radius: 6, corner_radius: 6,
padding: { padding: {
left: 6, left: 4,
right: 6, right: 4,
}, }
}, },
state: { state: {
hovered: { hovered: {