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 max_height: 400,
80 max_width: 540,
81 title: {
82 ...text(theme.middle, "sans", "on", { size: "lg" }),
83 padding: {
84 left: BUTTON_OFFSET,
85 }
86 },
87 picker: {
88 empty_container: {},
89 item: {
90 ...picker_style.item,
91 margin: { left: SPACING, right: SPACING },
92 },
93 no_matches: picker_style.no_matches,
94 input_editor: picker_input,
95 empty_input_editor: picker_input,
96 header: picker_style.header,
97 footer: picker_style.footer,
98 },
99 },
100 channel_modal: {
101 // This is used for the icons that are rendered to the right of channel Members in both UIs
102 member_icon: member_icon_style,
103 // This is used for the icons that are rendered to the right of channel invites in both UIs
104 invitee_icon: member_icon_style,
105 remove_member_button: {
106 ...text(theme.middle, "sans", { size: "xs" }),
107 background: background(theme.middle),
108 padding: {
109 left: 7,
110 right: 7
111 }
112 },
113 cancel_invite_button: {
114 ...text(theme.middle, "sans", { size: "xs" }),
115 background: background(theme.middle),
116 },
117 member_tag: {
118 ...text(theme.middle, "sans", { size: "xs" }),
119 border: border(theme.middle, "active"),
120 background: background(theme.middle),
121 margin: {
122 left: 8,
123 },
124 padding: {
125 left: 4,
126 right: 4,
127 }
128 },
129 contact_avatar: {
130 corner_radius: 10,
131 width: 18,
132 },
133 contact_username: {
134 padding: {
135 left: 8,
136 },
137 },
138 contact_button: {
139 ...contact_button,
140 hover: {
141 background: background(theme.middle, "variant", "hovered"),
142 },
143 },
144 disabled_contact_button: {
145 ...contact_button,
146 background: background(theme.middle, "disabled"),
147 color: foreground(theme.middle, "disabled"),
148 },
149 }
150 }
151}