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