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 contactUsername: {
120 ...text(theme, "mono", "primary", { size: "sm" }),
121 margin: {
122 left: nameMargin,
123 },
124 },
125 contactButtonSpacing: nameMargin,
126 contactButton: {
127 ...contactButton,
128 hover: {
129 background: backgroundColor(theme, "on300", "hovered"),
130 },
131 },
132 disabledButton: {
133 ...contactButton,
134 background: backgroundColor(theme, 100),
135 color: iconColor(theme, "muted"),
136 },
137 projectRow: {
138 ...projectRow,
139 background: backgroundColor(theme, 300),
140 name: {
141 ...projectRow.name,
142 ...text(theme, "mono", "secondary", { size: "sm" }),
143 },
144 hover: {
145 background: backgroundColor(theme, 300, "hovered"),
146 },
147 active: {
148 background: backgroundColor(theme, 300, "active"),
149 },
150 },
151 inviteRow: {
152 padding: {
153 left: sidePadding,
154 right: sidePadding,
155 },
156 border: { top: true, width: 1, color: borderColor(theme, "primary") },
157 text: text(theme, "sans", "secondary", { size: "sm" }),
158 hover: {
159 text: text(theme, "sans", "active", { size: "sm" }),
160 },
161 },
162 }
163}