1import Theme from "../themes/theme";
  2import { panel } from "./app";
  3import { backgroundColor, border, borderColor, iconColor, player, text } from "./components";
  4
  5export default function contactsPanel(theme: Theme) {
  6  const project = {
  7    guestAvatarSpacing: 4,
  8    height: 24,
  9    guestAvatar: {
 10      cornerRadius: 8,
 11      width: 14,
 12    },
 13    name: {
 14      ...text(theme, "mono", "placeholder", { size: "sm" }),
 15      margin: {
 16        right: 6,
 17      },
 18    },
 19    padding: {
 20      left: 8,
 21    },
 22  };
 23
 24  const sharedProject = {
 25    ...project,
 26    background: backgroundColor(theme, 300),
 27    cornerRadius: 6,
 28    name: {
 29      ...project.name,
 30      ...text(theme, "mono", "secondary", { size: "sm" }),
 31    },
 32  };
 33
 34  const contactButton = {
 35    background: backgroundColor(theme, 100),
 36    color: iconColor(theme, "primary"),
 37    iconWidth: 8,
 38    buttonWidth: 16,
 39    cornerRadius: 8,
 40  };
 41
 42  return {
 43    ...panel,
 44    userQueryEditor: {
 45      background: backgroundColor(theme, 500),
 46      cornerRadius: 6,
 47      text: text(theme, "mono", "primary"),
 48      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
 49      selection: player(theme, 1).selection,
 50      border: border(theme, "secondary"),
 51      padding: {
 52        bottom: 4,
 53        left: 8,
 54        right: 8,
 55        top: 4,
 56      },
 57    },
 58    userQueryEditorHeight: 32,
 59    addContactButton: {
 60      margin: { left: 6 },
 61      color: iconColor(theme, "primary"),
 62      buttonWidth: 8,
 63      iconWidth: 8,
 64    },
 65    row: {
 66      padding: { left: 8 },
 67    },
 68    rowHeight: 28,
 69    header: {
 70      ...text(theme, "mono", "secondary", { size: "sm" }),
 71      margin: { top: 8 },
 72    },
 73    treeBranchColor: borderColor(theme, "muted"),
 74    treeBranchWidth: 1,
 75    contactAvatar: {
 76      cornerRadius: 10,
 77      width: 18,
 78    },
 79    contactUsername: {
 80      ...text(theme, "mono", "primary", { size: "sm" }),
 81      padding: {
 82        left: 8,
 83      },
 84    },
 85    contactButton: {
 86      ...contactButton,
 87      hover: {
 88        background: backgroundColor(theme, 100, "hovered"),
 89      },
 90    },
 91    disabledContactButton: {
 92      ...contactButton,
 93      background: backgroundColor(theme, 100),
 94      color: iconColor(theme, "muted"),
 95    },
 96    project,
 97    sharedProject,
 98    hoveredSharedProject: {
 99      ...sharedProject,
100      background: backgroundColor(theme, 300, "hovered"),
101      cornerRadius: 6,
102    },
103    unsharedProject: project,
104    hoveredUnsharedProject: {
105      ...project,
106      cornerRadius: 6,
107    },
108  }
109}