1import { useTheme } from "../theme"
2import { background, border, foreground, text } from "./components"
3import picker from "./picker"
4import { input } from "../component/input"
5import contact_finder from "./contact_finder"
6import { tab } from "../component/tab"
7import { icon_button } from "../component/icon_button"
8
9export default function channel_modal(): any {
10 const theme = useTheme()
11
12 const SPACING = 12 as const
13 const BUTTON_OFFSET = 6 as const
14 const ITEM_HEIGHT = 36 as const
15
16 const contact_button = {
17 background: background(theme.middle, "variant"),
18 color: foreground(theme.middle, "variant"),
19 icon_width: 8,
20 button_width: 16,
21 corner_radius: 8,
22 }
23
24 const picker_style = picker()
25 delete picker_style.shadow
26 delete picker_style.border
27
28 const picker_input = input()
29
30 const member_icon_style = icon_button({
31 variant: "ghost",
32 size: "sm",
33 }).default
34
35 return {
36 contact_finder: contact_finder(),
37 tabbed_modal: {
38 tab_button: tab({ layer: theme.middle }),
39 row_height: ITEM_HEIGHT,
40 header: {
41 background: background(theme.lowest),
42 border: border(theme.middle, {
43 bottom: true,
44 top: false,
45 left: false,
46 right: false,
47 }),
48 padding: {
49 top: SPACING,
50 left: SPACING - BUTTON_OFFSET,
51 right: SPACING - BUTTON_OFFSET,
52 },
53 corner_radii: {
54 top_right: 12,
55 top_left: 12,
56 },
57 },
58 body: {
59 background: background(theme.middle),
60 padding: {
61 top: SPACING - 4,
62 left: SPACING,
63 right: SPACING,
64 bottom: SPACING,
65 },
66 corner_radii: {
67 bottom_right: 12,
68 bottom_left: 12,
69 },
70 },
71 modal: {
72 background: background(theme.middle),
73 shadow: theme.modal_shadow,
74 corner_radius: 12,
75 padding: {
76 bottom: 0,
77 left: 0,
78 right: 0,
79 top: 0,
80 },
81 },
82 // FIXME: due to a bug in the picker's size calculation, this must be 600
83 max_height: 600,
84 max_width: 540,
85 title: {
86 ...text(theme.middle, "sans", "on", { size: "lg" }),
87 padding: {
88 left: BUTTON_OFFSET,
89 },
90 },
91 picker: {
92 empty_container: {},
93 item: {
94 ...picker_style.item,
95 margin: { left: SPACING, right: SPACING },
96 },
97 no_matches: picker_style.no_matches,
98 input_editor: picker_input,
99 empty_input_editor: picker_input,
100 header: picker_style.header,
101 footer: picker_style.footer,
102 },
103 },
104 channel_modal: {
105 // This is used for the icons that are rendered to the right of channel Members in both UIs
106 member_icon: member_icon_style,
107 // This is used for the icons that are rendered to the right of channel invites in both UIs
108 invitee_icon: member_icon_style,
109 remove_member_button: {
110 ...text(theme.middle, "sans", { size: "xs" }),
111 background: background(theme.middle),
112 padding: {
113 left: 7,
114 right: 7,
115 },
116 },
117 cancel_invite_button: {
118 ...text(theme.middle, "sans", { size: "xs" }),
119 background: background(theme.middle),
120 },
121 member_tag: {
122 ...text(theme.middle, "sans", { size: "xs" }),
123 border: border(theme.middle, "active"),
124 background: background(theme.middle),
125 margin: {
126 left: 8,
127 },
128 padding: {
129 left: 4,
130 right: 4,
131 },
132 },
133 contact_avatar: {
134 corner_radius: 10,
135 width: 18,
136 },
137 contact_username: {
138 padding: {
139 left: 8,
140 },
141 },
142 contact_button: {
143 ...contact_button,
144 hover: {
145 background: background(theme.middle, "variant", "hovered"),
146 },
147 },
148 disabled_contact_button: {
149 ...contact_button,
150 background: background(theme.middle, "disabled"),
151 color: foreground(theme.middle, "disabled"),
152 },
153 },
154 }
155}