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