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