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