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 buttonWidth: 8,
75 },
76 rowHeight: 28,
77 sectionIconSize: 8,
78 headerRow: {
79 ...text(theme, "mono", "secondary", { size: "sm" }),
80 margin: { top: 14 },
81 padding: {
82 left: sidePadding,
83 right: sidePadding,
84 },
85 active: {
86 ...text(theme, "mono", "primary", { size: "sm" }),
87 background: backgroundColor(theme, 100, "active"),
88 }
89 },
90 contactRow: {
91 padding: {
92 left: sidePadding,
93 right: sidePadding
94 },
95 active: {
96 background: backgroundColor(theme, 100, "active"),
97 }
98 },
99 treeBranch: {
100 color: borderColor(theme, "active"),
101 width: 1,
102 hover: {
103 color: borderColor(theme, "active"),
104 },
105 active: {
106 color: borderColor(theme, "active"),
107 }
108 },
109 contactAvatar: {
110 cornerRadius: 10,
111 width: 18,
112 },
113 contactUsername: {
114 ...text(theme, "mono", "primary", { size: "sm" }),
115 margin: {
116 left: nameMargin,
117 },
118 },
119 contactButtonSpacing: nameMargin,
120 contactButton: {
121 ...contactButton,
122 hover: {
123 background: backgroundColor(theme, 100, "hovered"),
124 },
125 },
126 disabledContactButton: {
127 ...contactButton,
128 background: backgroundColor(theme, 100),
129 color: iconColor(theme, "muted"),
130 },
131 projectRow: {
132 ...projectRow,
133 background: backgroundColor(theme, 300),
134 name: {
135 ...projectRow.name,
136 ...text(theme, "mono", "secondary", { size: "sm" }),
137 },
138 hover: {
139 background: backgroundColor(theme, 300, "hovered"),
140 },
141 active: {
142 background: backgroundColor(theme, 300, "active"),
143 }
144 },
145 inviteRow: {
146 padding: {
147 left: sidePadding,
148 right: sidePadding
149 },
150 border: { top: true, width: 1, color: borderColor(theme, "primary") },
151 text: text(theme, "sans", "primary", { size: "sm" }),
152 hover: {
153 text: text(theme, "sans", "primary", { size: "sm", underline: true })
154 }
155 }
156 }
157}