zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-11-08 07:35:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve styling of collab panel

Browse Source
This commit is contained in:
Max Brunsfeld 2023-08-09 15:11:30 -07:00
parent ac1b2b18aa
commit 076b72cf2b
1 changed files with 60 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
styles/src/style_tree/collab_panel.ts
View File

@ -52,7 +52,61 @@ export default function contacts_panel(): any {
},
}
const headerButton = toggleable_icon_button(theme, {})
const headerButton = toggleable({
state: {
inactive: interactive({
base: {
corner_radius: 6,
padding: {
top: 2,
bottom: 2,
left: 4,
right: 4,
},
icon_width: 14,
icon_height: 14,
button_width: 20,
button_height: 16,
color: foreground(layer, "on"),
},
state: {
default: {
},
hovered: {
background: background(layer, "base", "hovered"),
},
clicked: {
background: background(layer, "base", "pressed"),
},
},
}),
active: interactive({
base: {
corner_radius: 6,
padding: {
top: 2,
bottom: 2,
left: 4,
right: 4,
},
icon_width: 14,
icon_height: 14,
button_width: 20,
button_height: 16,
color: foreground(layer, "on"),
},
state: {
default: {
background: background(layer, "base", "active"),
},
clicked: {
background: background(layer, "base", "active"),
},
},
}),
},
})
return {
channel_modal: channel_modal(),
@ -154,9 +208,6 @@ export default function contacts_panel(): any {
...text(layer, "mono", "active", { size: "sm" }),
background: background(layer, "active"),
},
hovered: {
background: background(layer, "hovered"),
},
clicked: {
background: background(layer, "pressed"),
},
@ -196,23 +247,22 @@ export default function contacts_panel(): any {
},
},
state: {
hovered: {
background: background(layer, "hovered"),
},
clicked: {
background: background(layer, "pressed"),
},
},
}),
state: {
inactive: {
hovered: {
background: background(layer, "hovered"),
},
},
active: {
default: {
...text(layer, "mono", "active", { size: "sm" }),
background: background(layer, "active"),
},
hovered: {
background: background(layer, "hovered"),
},
clicked: {
background: background(layer, "pressed"),
},