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