166 lines
3.6 KiB
TypeScript
166 lines
3.6 KiB
TypeScript
import { ColorScheme } from "../themes/common/colorScheme";
|
|
import {
|
|
background,
|
|
border,
|
|
borderColor,
|
|
foreground,
|
|
text,
|
|
} from "./components";
|
|
|
|
export default function contactsPanel(colorScheme: ColorScheme) {
|
|
const nameMargin = 8;
|
|
const sidePadding = 12;
|
|
|
|
let layer = colorScheme.lowest.middle;
|
|
|
|
const projectRow = {
|
|
guestAvatarSpacing: 4,
|
|
height: 24,
|
|
guestAvatar: {
|
|
cornerRadius: 8,
|
|
width: 14,
|
|
},
|
|
name: {
|
|
...text(layer, "mono", { size: "sm" }),
|
|
margin: {
|
|
left: nameMargin,
|
|
right: 6,
|
|
},
|
|
},
|
|
guests: {
|
|
margin: {
|
|
left: nameMargin,
|
|
right: nameMargin,
|
|
},
|
|
},
|
|
padding: {
|
|
left: sidePadding,
|
|
right: sidePadding,
|
|
},
|
|
};
|
|
|
|
const contactButton = {
|
|
background: background(layer, "on"),
|
|
color: foreground(layer, "on"),
|
|
iconWidth: 8,
|
|
buttonWidth: 16,
|
|
cornerRadius: 8,
|
|
};
|
|
|
|
return {
|
|
background: background(layer),
|
|
padding: { top: 12, bottom: 0 },
|
|
userQueryEditor: {
|
|
background: background(layer, "on"),
|
|
cornerRadius: 6,
|
|
text: text(layer, "mono", "on"),
|
|
placeholderText: text(layer, "mono", "on", "disabled", { size: "sm" }),
|
|
selection: colorScheme.players[0],
|
|
border: border(layer, "on"),
|
|
padding: {
|
|
bottom: 4,
|
|
left: 8,
|
|
right: 8,
|
|
top: 4,
|
|
},
|
|
margin: {
|
|
left: sidePadding,
|
|
right: sidePadding,
|
|
},
|
|
},
|
|
userQueryEditorHeight: 32,
|
|
addContactButton: {
|
|
margin: { left: 6, right: 12 },
|
|
color: foreground(layer, "on"),
|
|
buttonWidth: 16,
|
|
iconWidth: 16,
|
|
},
|
|
privateButton: {
|
|
iconWidth: 12,
|
|
color: foreground(layer, "on"),
|
|
cornerRadius: 5,
|
|
buttonWidth: 12,
|
|
},
|
|
rowHeight: 28,
|
|
sectionIconSize: 8,
|
|
headerRow: {
|
|
...text(layer, "mono", { size: "sm" }),
|
|
margin: { top: 14 },
|
|
padding: {
|
|
left: sidePadding,
|
|
right: sidePadding,
|
|
},
|
|
active: {
|
|
...text(layer, "mono", "active", { size: "sm" }),
|
|
background: background(layer, "active"),
|
|
},
|
|
},
|
|
contactRow: {
|
|
padding: {
|
|
left: sidePadding,
|
|
right: sidePadding,
|
|
},
|
|
active: {
|
|
background: background(layer, "active"),
|
|
},
|
|
},
|
|
treeBranch: {
|
|
color: borderColor(layer),
|
|
width: 1,
|
|
hover: {
|
|
color: borderColor(layer, "hovered"),
|
|
},
|
|
active: {
|
|
color: borderColor(layer, "active"),
|
|
},
|
|
},
|
|
contactAvatar: {
|
|
cornerRadius: 10,
|
|
width: 18,
|
|
},
|
|
contactUsername: {
|
|
...text(layer, "mono", { size: "sm" }),
|
|
margin: {
|
|
left: nameMargin,
|
|
},
|
|
},
|
|
contactButtonSpacing: nameMargin,
|
|
contactButton: {
|
|
...contactButton,
|
|
hover: {
|
|
background: background(layer, "hovered"),
|
|
},
|
|
},
|
|
disabledButton: {
|
|
...contactButton,
|
|
background: background(layer, "on"),
|
|
color: foreground(layer, "on"),
|
|
},
|
|
projectRow: {
|
|
...projectRow,
|
|
background: background(layer, "on"),
|
|
name: {
|
|
...projectRow.name,
|
|
...text(layer, "mono", { size: "sm" }),
|
|
},
|
|
hover: {
|
|
background: background(layer, "hovered"),
|
|
},
|
|
active: {
|
|
background: background(layer, "active"),
|
|
},
|
|
},
|
|
inviteRow: {
|
|
padding: {
|
|
left: sidePadding,
|
|
right: sidePadding,
|
|
},
|
|
border: border(layer, { top: true }),
|
|
text: text(layer, "sans", { size: "sm" }),
|
|
hover: {
|
|
text: text(layer, "sans", "hovered", { size: "sm" }),
|
|
},
|
|
},
|
|
};
|
|
}
|