1import Theme from "../themes/common/theme";
2import { panel } from "./app";
3import { backgroundColor, border, borderColor, iconColor, player, text } from "./components";
4
5export default function contactsPanel(theme: Theme) {
6 const nameMargin = 8;
7 const sidePadding = 12;
8
9 const projectRow = {
10 guestAvatarSpacing: 4,
11 height: 24,
12 guestAvatar: {
13 cornerRadius: 8,
14 width: 14,
15 },
16 name: {
17 ...text(theme, "mono", "placeholder", { size: "sm" }),
18 margin: {
19 left: nameMargin,
20 right: 6,
21 },
22 },
23 guests: {
24 margin: {
25 left: nameMargin,
26 right: nameMargin,
27 }
28 },
29 padding: {
30 left: sidePadding,
31 right: sidePadding,
32 },
33 };
34
35 const contactButton = {
36 background: backgroundColor(theme, 100),
37 color: iconColor(theme, "primary"),
38 iconWidth: 8,
39 buttonWidth: 16,
40 cornerRadius: 8,
41 };
42
43 return {
44 ...panel,
45 padding: { top: panel.padding.top, bottom: 0 },
46 userQueryEditor: {
47 background: backgroundColor(theme, 500),
48 cornerRadius: 6,
49 text: text(theme, "mono", "primary"),
50 placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
51 selection: player(theme, 1).selection,
52 border: border(theme, "secondary"),
53 padding: {
54 bottom: 4,
55 left: 8,
56 right: 8,
57 top: 4,
58 },
59 margin: {
60 left: sidePadding,
61 right: sidePadding,
62 }
63 },
64 userQueryEditorHeight: 32,
65 addContactButton: {
66 margin: { left: 6, right: 12 },
67 color: iconColor(theme, "primary"),
68 buttonWidth: 8,
69 iconWidth: 8,
70 },
71 privateButton: {
72 iconWidth: 8,
73 color: iconColor(theme, "primary"),
74 cornerRadius: 5,
75 buttonWidth: 12,
76 },
77 rowHeight: 28,
78 sectionIconSize: 8,
79 headerRow: {
80 ...text(theme, "mono", "secondary", { size: "sm" }),
81 margin: { top: 14 },
82 padding: {
83 left: sidePadding,
84 right: sidePadding,
85 },
86 active: {
87 ...text(theme, "mono", "primary", { size: "sm" }),
88 background: backgroundColor(theme, 100, "active"),
89 }
90 },
91 contactRow: {
92 padding: {
93 left: sidePadding,
94 right: sidePadding
95 },
96 active: {
97 background: backgroundColor(theme, 100, "active"),
98 }
99 },
100 treeBranch: {
101 color: borderColor(theme, "active"),
102 width: 1,
103 hover: {
104 color: borderColor(theme, "active"),
105 },
106 active: {
107 color: borderColor(theme, "active"),
108 }
109 },
110 contactAvatar: {
111 cornerRadius: 10,
112 width: 18,
113 },
114 contactUsername: {
115 ...text(theme, "mono", "primary", { size: "sm" }),
116 margin: {
117 left: nameMargin,
118 },
119 },
120 contactButtonSpacing: nameMargin,
121 contactButton: {
122 ...contactButton,
123 hover: {
124 background: backgroundColor(theme, 100, "hovered"),
125 },
126 },
127 disabledContactButton: {
128 ...contactButton,
129 background: backgroundColor(theme, 100),
130 color: iconColor(theme, "muted"),
131 },
132 projectRow: {
133 ...projectRow,
134 background: backgroundColor(theme, 300),
135 name: {
136 ...projectRow.name,
137 ...text(theme, "mono", "secondary", { size: "sm" }),
138 },
139 hover: {
140 background: backgroundColor(theme, 300, "hovered"),
141 },
142 active: {
143 background: backgroundColor(theme, 300, "active"),
144 }
145 },
146 inviteRow: {
147 padding: {
148 left: sidePadding,
149 right: sidePadding
150 },
151 border: { top: true, width: 1, color: borderColor(theme, "primary") },
152 text: text(theme, "sans", "primary", { size: "sm" }),
153 hover: {
154 text: text(theme, "sans", "primary", { size: "sm", underline: true })
155 }
156 }
157 }
158}