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