1import { ColorScheme } from "../themes/common/colorScheme";
2import { panel } from "./app";
3import {
4 background,
5 border,
6 borderColor,
7 foreground,
8 text,
9} from "./components";
10
11export default function contactsPanel(colorScheme: ColorScheme) {
12 const nameMargin = 8;
13 const sidePadding = 12;
14
15 let layer = colorScheme.lowest.middle;
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 const contactButton = {
44 background: background(layer, "on"),
45 color: foreground(layer, "on"),
46 iconWidth: 8,
47 buttonWidth: 16,
48 cornerRadius: 8,
49 };
50
51 return {
52 ...panel,
53 padding: { top: panel.padding.top, bottom: 0 },
54 userQueryEditor: {
55 background: background(layer, "on"),
56 cornerRadius: 6,
57 text: text(layer, "mono", "on"),
58 placeholderText: text(layer, "mono", "on", "disabled", { size: "sm" }),
59 selection: colorScheme.players[0],
60 border: border(layer, "on"),
61 padding: {
62 bottom: 4,
63 left: 8,
64 right: 8,
65 top: 4,
66 },
67 margin: {
68 left: sidePadding,
69 right: sidePadding,
70 },
71 },
72 userQueryEditorHeight: 32,
73 addContactButton: {
74 margin: { left: 6, right: 12 },
75 color: foreground(layer, "on"),
76 buttonWidth: 16,
77 iconWidth: 16,
78 },
79 privateButton: {
80 iconWidth: 12,
81 color: foreground(layer, "on"),
82 cornerRadius: 5,
83 buttonWidth: 12,
84 },
85 rowHeight: 28,
86 sectionIconSize: 8,
87 headerRow: {
88 ...text(layer, "mono", { size: "sm" }),
89 margin: { top: 14 },
90 padding: {
91 left: sidePadding,
92 right: sidePadding,
93 },
94 active: {
95 ...text(layer, "mono", "base", "active", { size: "sm" }),
96 background: background(layer, "base", "active"),
97 },
98 },
99 contactRow: {
100 padding: {
101 left: sidePadding,
102 right: sidePadding,
103 },
104 active: {
105 background: background(layer, "base", "active"),
106 },
107 },
108 treeBranch: {
109 color: borderColor(layer),
110 width: 1,
111 hover: {
112 color: borderColor(layer, "base", "hovered"),
113 },
114 active: {
115 color: borderColor(layer, "base", "active"),
116 },
117 },
118 contactAvatar: {
119 cornerRadius: 10,
120 width: 18,
121 },
122 contactUsername: {
123 ...text(layer, "mono", { size: "sm" }),
124 margin: {
125 left: nameMargin,
126 },
127 },
128 contactButtonSpacing: nameMargin,
129 contactButton: {
130 ...contactButton,
131 hover: {
132 background: background(layer, "base", "hovered"),
133 },
134 },
135 disabledButton: {
136 ...contactButton,
137 background: background(layer, "on"),
138 color: foreground(layer, "on"),
139 },
140 projectRow: {
141 ...projectRow,
142 background: background(layer, "on"),
143 name: {
144 ...projectRow.name,
145 ...text(layer, "mono", { size: "sm" }),
146 },
147 hover: {
148 background: background(layer, "base", "hovered"),
149 },
150 active: {
151 background: background(layer, "base", "active"),
152 },
153 },
154 inviteRow: {
155 padding: {
156 left: sidePadding,
157 right: sidePadding,
158 },
159 border: border(layer, { top: true }),
160 text: text(layer, "sans", { size: "sm" }),
161 hover: {
162 text: text(layer, "sans", "base", "hovered", { size: "sm" }),
163 },
164 },
165 };
166}