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