1import { useTheme } from "../theme"
  2import { interactive, toggleable } from "../element"
  3import { background, border, foreground, text } from "./components"
  4import picker from "./picker"
  5import { input } from "../component/input"
  6import { toggleable_text_button } from "../component/text_button"
  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        // This is used for the icons that are rendered to the right of channel Members in both UIs
 28        member_icon: {
 29            background: background(theme.middle),
 30            padding: {
 31                bottom: 4,
 32                left: 4,
 33                right: 4,
 34                top: 4,
 35            },
 36            width: 5,
 37            color: foreground(theme.middle, "accent"),
 38        },
 39        // This is used for the icons that are rendered to the right of channel invites in both UIs
 40        invitee_icon: {
 41            background: background(theme.middle),
 42            padding: {
 43                bottom: 4,
 44                left: 4,
 45                right: 4,
 46                top: 4,
 47            },
 48            width: 5,
 49            color: foreground(theme.middle, "accent"),
 50        },
 51        remove_member_button: {
 52            ...text(theme.middle, "sans", { size: "xs" }),
 53            background: background(theme.middle),
 54            padding: {
 55                left: 7,
 56                right: 7
 57            }
 58        },
 59        cancel_invite_button: {
 60            ...text(theme.middle, "sans", { size: "xs" }),
 61            background: background(theme.middle),
 62        },
 63        member_tag: {
 64            ...text(theme.middle, "sans", { size: "xs" }),
 65            border: border(theme.middle, "active"),
 66            background: background(theme.middle),
 67            margin: {
 68                left: 8,
 69            },
 70            padding: {
 71                left: 4,
 72                right: 4,
 73            }
 74        },
 75        container: {
 76            background: background(theme.middle),
 77            border: border(theme.middle),
 78            shadow: theme.modal_shadow,
 79            corner_radius: 12,
 80            padding: {
 81                bottom: 0,
 82                left: 0,
 83                right: 0,
 84                top: 0,
 85            },
 86        },
 87        height: 400,
 88        header: {
 89            ...text(theme.middle, "sans", "on", { size: "lg" }),
 90            padding: {
 91                left: 6,
 92            }
 93        },
 94        mode_button: toggleable_text_button(theme, {
 95            variant: "ghost",
 96            layer: theme.middle,
 97            active_color: "accent",
 98            margin: {
 99                top: 8,
100                bottom: 8,
101                right: 4
102            }
103        }),
104        picker: {
105            empty_container: {},
106            item: {
107                ...picker_style.item,
108                margin: { left: side_margin, right: side_margin },
109            },
110            no_matches: picker_style.no_matches,
111            input_editor: picker_input,
112            empty_input_editor: picker_input,
113            header: picker_style.header,
114            footer: picker_style.footer,
115        },
116        row_height: 28,
117        contact_avatar: {
118            corner_radius: 10,
119            width: 18,
120        },
121        contact_username: {
122            padding: {
123                left: 8,
124            },
125        },
126        contact_button: {
127            ...contact_button,
128            hover: {
129                background: background(theme.middle, "variant", "hovered"),
130            },
131        },
132        disabled_contact_button: {
133            ...contact_button,
134            background: background(theme.middle, "disabled"),
135            color: foreground(theme.middle, "disabled"),
136        },
137    }
138}