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