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