1import Theme from "../themes/common/theme";
  2import { backgroundColor, border, borderColor, iconColor, player, popoverShadow, text } from "./components";
  3
  4export default function contactsPopover(theme: Theme) {
  5  const nameMargin = 8;
  6  const sidePadding = 12;
  7
  8  const contactButton = {
  9    background: backgroundColor(theme, 100),
 10    color: iconColor(theme, "primary"),
 11    iconWidth: 8,
 12    buttonWidth: 16,
 13    cornerRadius: 8,
 14  };
 15
 16  return {
 17    background: backgroundColor(theme, 300, "base"),
 18    cornerRadius: 6,
 19    padding: { top: 6 },
 20    shadow: popoverShadow(theme),
 21    border: border(theme, "primary"),
 22    width: 250,
 23    height: 300,
 24    userQueryEditor: {
 25      background: backgroundColor(theme, 500),
 26      cornerRadius: 6,
 27      text: text(theme, "mono", "primary"),
 28      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
 29      selection: player(theme, 1).selection,
 30      border: border(theme, "secondary"),
 31      padding: {
 32        bottom: 4,
 33        left: 8,
 34        right: 8,
 35        top: 4,
 36      },
 37      margin: {
 38        left: sidePadding,
 39        right: sidePadding,
 40      },
 41    },
 42    userQueryEditorHeight: 32,
 43    addContactButton: {
 44      margin: { left: 6, right: 12 },
 45      color: iconColor(theme, "primary"),
 46      buttonWidth: 16,
 47      iconWidth: 16,
 48    },
 49    privateButton: {
 50      iconWidth: 12,
 51      color: iconColor(theme, "primary"),
 52      cornerRadius: 5,
 53      buttonWidth: 12,
 54    },
 55    rowHeight: 28,
 56    sectionIconSize: 8,
 57    headerRow: {
 58      ...text(theme, "mono", "secondary", { size: "sm" }),
 59      margin: { top: 14 },
 60      padding: {
 61        left: sidePadding,
 62        right: sidePadding,
 63      },
 64      active: {
 65        ...text(theme, "mono", "primary", { size: "sm" }),
 66        background: backgroundColor(theme, 100, "active"),
 67      },
 68    },
 69    contactRow: {
 70      padding: {
 71        left: sidePadding,
 72        right: sidePadding,
 73      },
 74      active: {
 75        background: backgroundColor(theme, 100, "active"),
 76      },
 77    },
 78    contactAvatar: {
 79      cornerRadius: 10,
 80      width: 18,
 81    },
 82    contactStatusFree: {
 83      cornerRadius: 4,
 84      padding: 4,
 85      margin: { top: 12, left: 12 },
 86      background: iconColor(theme, "success"),
 87    },
 88    contactStatusBusy: {
 89      cornerRadius: 4,
 90      padding: 4,
 91      margin: { top: 12, left: 12 },
 92      background: iconColor(theme, "warning"),
 93    },
 94    contactUsername: {
 95      ...text(theme, "mono", "primary", { size: "sm" }),
 96      margin: {
 97        left: nameMargin,
 98      },
 99    },
100    contactButtonSpacing: nameMargin,
101    contactButton: {
102      ...contactButton,
103      hover: {
104        background: backgroundColor(theme, "on300", "hovered"),
105      },
106    },
107    disabledButton: {
108      ...contactButton,
109      background: backgroundColor(theme, 100),
110      color: iconColor(theme, "muted"),
111    },
112    inviteRow: {
113      padding: {
114        left: sidePadding,
115        right: sidePadding,
116      },
117      border: { top: true, width: 1, color: borderColor(theme, "primary") },
118      text: text(theme, "sans", "secondary", { size: "sm" }),
119      hover: {
120        text: text(theme, "sans", "active", { size: "sm" }),
121      },
122    },
123    callingIndicator: {
124      ...text(theme, "mono", "muted", { size: "xs" })
125    }
126  }
127}