1import Theme from "../themes/theme";
 2import { panel } from "./app";
 3import { backgroundColor, border, borderColor, iconColor, player, text } from "./components";
 4
 5export default function contactsPanel(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    userQueryEditor: {
37      background: backgroundColor(theme, 500),
38      cornerRadius: 6,
39      text: text(theme, "mono", "primary"),
40      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
41      selection: player(theme, 1).selection,
42      border: border(theme, "secondary"),
43      padding: {
44        bottom: 4,
45        left: 8,
46        right: 8,
47        top: 4,
48      },
49    },
50    addContactIcon: {
51      margin: { left: 6 },
52      color: iconColor(theme, "primary")
53    },
54    rowHeight: 28,
55    treeBranchColor: borderColor(theme, "muted"),
56    treeBranchWidth: 1,
57    contactAvatar: {
58      cornerRadius: 10,
59      width: 18,
60    },
61    contactUsername: {
62      ...text(theme, "mono", "primary", { size: "sm" }),
63      padding: {
64        left: 8,
65      },
66    },
67    contactButton: {
68      ...text(theme, "mono", "primary", { size: "sm" }),
69      background: backgroundColor(theme, 100),
70      cornerRadius: 12,
71      padding: { left: 7, right: 7 }
72    },
73    header: {
74      ...text(theme, "mono", "secondary", { size: "sm" }),
75      // padding: {
76      //   left: 8,
77      // }
78    },
79    project,
80    sharedProject,
81    hoveredSharedProject: {
82      ...sharedProject,
83      background: backgroundColor(theme, 300, "hovered"),
84      cornerRadius: 6,
85    },
86    unsharedProject: project,
87    hoveredUnsharedProject: {
88      ...project,
89      cornerRadius: 6,
90    },
91  }
92}