1import picker from "./picker"
2import { ColorScheme } from "../themes/common/colorScheme"
3import { background, border, foreground, text } from "./components"
4
5export default function contactFinder(colorScheme: ColorScheme) {
6 let layer = colorScheme.middle
7
8 const sideMargin = 6
9 const contactButton = {
10 background: background(layer, "variant"),
11 color: foreground(layer, "variant"),
12 iconWidth: 8,
13 buttonWidth: 16,
14 cornerRadius: 8,
15 }
16
17 const pickerStyle = picker(colorScheme)
18 const pickerInput = {
19 background: background(layer, "on"),
20 cornerRadius: 6,
21 text: text(layer, "mono"),
22 placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
23 selection: colorScheme.players[0],
24 border: border(layer),
25 padding: {
26 bottom: 4,
27 left: 8,
28 right: 8,
29 top: 4,
30 },
31 margin: {
32 left: sideMargin,
33 right: sideMargin,
34 },
35 }
36
37 return {
38 picker: {
39 emptyContainer: {},
40 item: {
41 ...pickerStyle.item,
42 margin: { left: sideMargin, right: sideMargin },
43 },
44 noMatches: pickerStyle.noMatches,
45 inputEditor: pickerInput,
46 emptyInputEditor: pickerInput,
47 },
48 rowHeight: 28,
49 contactAvatar: {
50 cornerRadius: 10,
51 width: 18,
52 },
53 contactUsername: {
54 padding: {
55 left: 8,
56 },
57 },
58 contactButton: {
59 ...contactButton,
60 hover: {
61 background: background(layer, "variant", "hovered"),
62 },
63 },
64 disabledContactButton: {
65 ...contactButton,
66 background: background(layer, "disabled"),
67 color: foreground(layer, "disabled"),
68 },
69 }
70}