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}