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    addContactButton: {
 59      margin: { left: 6 },
 60      color: iconColor(theme, "primary"),
 61      width: 8,
 62    },
 63    rowHeight: 28,
 64    treeBranchColor: borderColor(theme, "muted"),
 65    treeBranchWidth: 1,
 66    contactAvatar: {
 67      cornerRadius: 10,
 68      width: 18,
 69    },
 70    contactUsername: {
 71      ...text(theme, "mono", "primary", { size: "sm" }),
 72      padding: {
 73        left: 8,
 74      },
 75    },
 76    contactButton,
 77    disabledContactButton: {
 78      ...contactButton,
 79      background: backgroundColor(theme, 100),
 80      color: iconColor(theme, "muted"),
 81    },
 82    header: {
 83      ...text(theme, "mono", "secondary", { size: "sm" }),
 84      // padding: {
 85      //   left: 8,
 86      // }
 87    },
 88    project,
 89    sharedProject,
 90    hoveredSharedProject: {
 91      ...sharedProject,
 92      background: backgroundColor(theme, 300, "hovered"),
 93      cornerRadius: 6,
 94    },
 95    unsharedProject: project,
 96    hoveredUnsharedProject: {
 97      ...project,
 98      cornerRadius: 6,
 99    },
100  }
101}