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, { "bottom": true, "top": false, left: false, right: false }),
43 padding: {
44 top: SPACING,
45 left: SPACING - BUTTON_OFFSET,
46 right: SPACING - BUTTON_OFFSET,
47 },
48 corner_radii: {
49 top_right: 12,
50 top_left: 12,
51 }
52 },
53 body: {
54 background: background(theme.middle),
55 padding: {
56 top: SPACING - 4,
57 left: SPACING,
58 right: SPACING,
59 bottom: SPACING,
60
61 },
62 corner_radii: {
63 bottom_right: 12,
64 bottom_left: 12,
65 }
66 },
67 modal: {
68 background: background(theme.middle),
69 shadow: theme.modal_shadow,
70 corner_radius: 12,
71 padding: {
72 bottom: 0,
73 left: 0,
74 right: 0,
75 top: 0,
76 },
77
78 },
79 // FIXME: due to a bug in the picker's size calculation, this must be 600
80 max_height: 600,
81 max_width: 540,
82 title: {
83 ...text(theme.middle, "sans", "on", { size: "lg" }),
84 padding: {
85 left: BUTTON_OFFSET,
86 }
87 },
88 picker: {
89 empty_container: {},
90 item: {
91 ...picker_style.item,
92 margin: { left: SPACING, right: SPACING },
93 },
94 no_matches: picker_style.no_matches,
95 input_editor: picker_input,
96 empty_input_editor: picker_input,
97 header: picker_style.header,
98 footer: picker_style.footer,
99 },
100 },
101 channel_modal: {
102 // This is used for the icons that are rendered to the right of channel Members in both UIs
103 member_icon: member_icon_style,
104 // This is used for the icons that are rendered to the right of channel invites in both UIs
105 invitee_icon: member_icon_style,
106 remove_member_button: {
107 ...text(theme.middle, "sans", { size: "xs" }),
108 background: background(theme.middle),
109 padding: {
110 left: 7,
111 right: 7
112 }
113 },
114 cancel_invite_button: {
115 ...text(theme.middle, "sans", { size: "xs" }),
116 background: background(theme.middle),
117 },
118 member_tag: {
119 ...text(theme.middle, "sans", { size: "xs" }),
120 border: border(theme.middle, "active"),
121 background: background(theme.middle),
122 margin: {
123 left: 8,
124 },
125 padding: {
126 left: 4,
127 right: 4,
128 }
129 },
130 contact_avatar: {
131 corner_radius: 10,
132 width: 18,
133 },
134 contact_username: {
135 padding: {
136 left: 8,
137 },
138 },
139 contact_button: {
140 ...contact_button,
141 hover: {
142 background: background(theme.middle, "variant", "hovered"),
143 },
144 },
145 disabled_contact_button: {
146 ...contact_button,
147 background: background(theme.middle, "disabled"),
148 color: foreground(theme.middle, "disabled"),
149 },
150 }
151 }
152}