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