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