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 nameMargin = 8;
  7  const sidePadding = 12;
  8
  9  const projectRow = {
 10    guestAvatarSpacing: 4,
 11    height: 24,
 12    guestAvatar: {
 13      cornerRadius: 8,
 14      width: 14,
 15    },
 16    name: {
 17      ...text(theme, "mono", "placeholder", { size: "sm" }),
 18      margin: {
 19        left: nameMargin,
 20        right: 6,
 21      },
 22    },
 23    guests: {
 24      margin: {
 25        left: nameMargin,
 26        right: nameMargin,
 27      }
 28    },
 29    padding: {
 30      left: sidePadding,
 31      right: sidePadding,
 32    },
 33  };
 34
 35  const contactButton = {
 36    background: backgroundColor(theme, 100),
 37    color: iconColor(theme, "primary"),
 38    iconWidth: 8,
 39    buttonWidth: 16,
 40    cornerRadius: 8,
 41  };
 42
 43  return {
 44    ...panel,
 45    userQueryEditor: {
 46      background: backgroundColor(theme, 500),
 47      cornerRadius: 6,
 48      text: text(theme, "mono", "primary"),
 49      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
 50      selection: player(theme, 1).selection,
 51      border: border(theme, "secondary"),
 52      padding: {
 53        bottom: 4,
 54        left: 8,
 55        right: 8,
 56        top: 4,
 57      },
 58      margin: {
 59        left: sidePadding,
 60        right: sidePadding,
 61      }
 62    },
 63    userQueryEditorHeight: 32,
 64    addContactButton: {
 65      margin: { left: 6, right: 12 },
 66      color: iconColor(theme, "primary"),
 67      buttonWidth: 8,
 68      iconWidth: 8,
 69    },
 70    rowHeight: 28,
 71    headerRow: {
 72      ...text(theme, "mono", "secondary", { size: "sm" }),
 73      margin: { top: 14 },
 74      padding: {
 75        left: sidePadding,
 76        right: sidePadding,
 77      },
 78      active: {
 79        ...text(theme, "mono", "primary", { size: "sm" }),
 80        background: backgroundColor(theme, 100, "active"),
 81      }
 82    },
 83    contactRow: {
 84      padding: {
 85        left: sidePadding,
 86        right: sidePadding
 87      },
 88      active: {
 89        background: backgroundColor(theme, 100, "active"),
 90      }
 91    },
 92    treeBranch: {
 93      color: borderColor(theme, "active"),
 94      width: 1,
 95      hover: {
 96        color: borderColor(theme, "active"),
 97      },
 98      active: {
 99        color: borderColor(theme, "active"),
100      }
101    },
102    contactAvatar: {
103      cornerRadius: 10,
104      width: 18,
105    },
106    contactUsername: {
107      ...text(theme, "mono", "primary", { size: "sm" }),
108      margin: {
109        left: nameMargin,
110      },
111    },
112    contactButtonSpacing: nameMargin,
113    contactButton: {
114      ...contactButton,
115      hover: {
116        background: backgroundColor(theme, 100, "hovered"),
117      },
118    },
119    disabledContactButton: {
120      ...contactButton,
121      background: backgroundColor(theme, 100),
122      color: iconColor(theme, "muted"),
123    },
124    sharedProjectRow: {
125      ...projectRow,
126      background: backgroundColor(theme, 300),
127      name: {
128        ...projectRow.name,
129        ...text(theme, "mono", "secondary", { size: "sm" }),
130      },
131      hover: {
132        background: backgroundColor(theme, 300, "hovered"),
133      },
134      active: {
135        background: backgroundColor(theme, 300, "active"),
136      }
137    },
138    unsharedProjectRow: {
139      ...projectRow,
140      background: backgroundColor(theme, 300),
141      name: {
142        ...projectRow.name,
143        ...text(theme, "mono", "secondary", { size: "sm" }),
144      },
145      hover: {
146        background: backgroundColor(theme, 300, "hovered"),
147      },
148      active: {
149        background: backgroundColor(theme, 300, "active"),
150      }
151    }
152  }
153}