contactsPanel.ts

 1import Theme from "../themes/theme";
 2import { panel } from "./app";
 3import { backgroundColor, borderColor, text } from "./components";
 4
 5export default function(theme: Theme) {
 6    const project = {
 7        guestAvatarSpacing: 4,
 8        height: 24,
 9        guestAvatar: {
10            cornerRadius: 8,
11            width: 14,
12        },
13        name: {
14            ...text(theme, "mono", "placeholder", { size: "sm" }),
15            margin: {
16                right: 6,
17            },
18        },
19        padding: {
20            left: 8,
21        },
22    };
23
24    const sharedProject = {
25        ...project,
26        background: backgroundColor(theme, 300),
27        cornerRadius: 6,
28        name: {
29            ...project.name,
30            ...text(theme, "mono", "secondary", { size: "sm" }),
31        },
32    };
33
34    return {
35        ...panel,
36        hostRowHeight: 28,
37        treeBranchColor: borderColor(theme, "muted"),
38        treeBranchWidth: 1,
39        hostAvatar: {
40            cornerRadius: 10,
41            width: 18,
42        },
43        hostUsername: {
44            ...text(theme, "mono", "primary", { size: "sm" }),
45            padding: {
46                left: 8,
47            },
48        },
49        project,
50        sharedProject,
51        hoveredSharedProject: {
52            ...sharedProject,
53            background: backgroundColor(theme, 300, "hovered"),
54            cornerRadius: 6,
55        },
56        unsharedProject: project,
57        hoveredUnsharedProject: {
58            ...project,
59            cornerRadius: 6,
60        },
61    }
62}