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