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: 6
57 },
58 },
59 userQueryEditorHeight: 33,
60 addContactButton: {
61 color: iconColor(theme, "primary"),
62 buttonWidth: 28,
63 iconWidth: 16,
64 },
65 rowHeight: 28,
66 sectionIconSize: 8,
67 headerRow: {
68 ...text(theme, "mono", "secondary", { size: "sm" }),
69 margin: { top: 6 },
70 padding: {
71 left: sidePadding,
72 right: sidePadding,
73 },
74 active: {
75 ...text(theme, "mono", "primary", { size: "sm" }),
76 background: backgroundColor(theme, 100, "active"),
77 },
78 },
79 leaveCall: {
80 background: backgroundColor(theme, 100),
81 border: border(theme, "secondary"),
82 cornerRadius: 6,
83 margin: {
84 top: 1,
85 },
86 padding: {
87 top: 1,
88 bottom: 1,
89 left: 7,
90 right: 7,
91 },
92 ...text(theme, "sans", "secondary", { size: "xs" }),
93 hover: {
94 ...text(theme, "sans", "active", { size: "xs" }),
95 background: backgroundColor(theme, "on300", "hovered"),
96 border: border(theme, "primary"),
97 },
98 },
99 contactRow: {
100 padding: {
101 left: sidePadding,
102 right: sidePadding,
103 },
104 active: {
105 background: backgroundColor(theme, 100, "active"),
106 },
107 },
108 contactAvatar: {
109 cornerRadius: 10,
110 width: 18,
111 },
112 contactStatusFree: {
113 cornerRadius: 4,
114 padding: 4,
115 margin: { top: 12, left: 12 },
116 background: iconColor(theme, "ok"),
117 },
118 contactStatusBusy: {
119 cornerRadius: 4,
120 padding: 4,
121 margin: { top: 12, left: 12 },
122 background: iconColor(theme, "error"),
123 },
124 contactUsername: {
125 ...text(theme, "mono", "primary", { size: "sm" }),
126 margin: {
127 left: nameMargin,
128 },
129 },
130 contactButtonSpacing: nameMargin,
131 contactButton: {
132 ...contactButton,
133 hover: {
134 background: backgroundColor(theme, "on300", "hovered"),
135 },
136 },
137 disabledButton: {
138 ...contactButton,
139 background: backgroundColor(theme, 100),
140 color: iconColor(theme, "muted"),
141 },
142 callingIndicator: {
143 ...text(theme, "mono", "muted", { size: "xs" })
144 },
145 treeBranch: {
146 color: borderColor(theme, "active"),
147 width: 1,
148 hover: {
149 color: borderColor(theme, "active"),
150 },
151 active: {
152 color: borderColor(theme, "active"),
153 },
154 },
155 projectRow: {
156 ...projectRow,
157 background: backgroundColor(theme, 300),
158 name: {
159 ...projectRow.name,
160 ...text(theme, "mono", "secondary", { size: "sm" }),
161 },
162 hover: {
163 background: backgroundColor(theme, 300, "hovered"),
164 },
165 active: {
166 background: backgroundColor(theme, 300, "active"),
167 },
168 },
169 }
170}