1import Theme from "../themes/common/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    padding: { top: panel.padding.top, bottom: 0 },
 46    userQueryEditor: {
 47      background: backgroundColor(theme, 500),
 48      cornerRadius: 6,
 49      text: text(theme, "mono", "primary"),
 50      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
 51      selection: player(theme, 1).selection,
 52      border: border(theme, "secondary"),
 53      padding: {
 54        bottom: 4,
 55        left: 8,
 56        right: 8,
 57        top: 4,
 58      },
 59      margin: {
 60        left: sidePadding,
 61        right: sidePadding,
 62      }
 63    },
 64    userQueryEditorHeight: 32,
 65    addContactButton: {
 66      margin: { left: 6, right: 12 },
 67      color: iconColor(theme, "primary"),
 68      buttonWidth: 8,
 69      iconWidth: 8,
 70    },
 71    rowHeight: 28,
 72    sectionIconSize: 8,
 73    headerRow: {
 74      ...text(theme, "mono", "secondary", { size: "sm" }),
 75      margin: { top: 14 },
 76      padding: {
 77        left: sidePadding,
 78        right: sidePadding,
 79      },
 80      active: {
 81        ...text(theme, "mono", "primary", { size: "sm" }),
 82        background: backgroundColor(theme, 100, "active"),
 83      }
 84    },
 85    contactRow: {
 86      padding: {
 87        left: sidePadding,
 88        right: sidePadding
 89      },
 90      active: {
 91        background: backgroundColor(theme, 100, "active"),
 92      }
 93    },
 94    treeBranch: {
 95      color: borderColor(theme, "active"),
 96      width: 1,
 97      hover: {
 98        color: borderColor(theme, "active"),
 99      },
100      active: {
101        color: borderColor(theme, "active"),
102      }
103    },
104    contactAvatar: {
105      cornerRadius: 10,
106      width: 18,
107    },
108    contactUsername: {
109      ...text(theme, "mono", "primary", { size: "sm" }),
110      margin: {
111        left: nameMargin,
112      },
113    },
114    contactButtonSpacing: nameMargin,
115    contactButton: {
116      ...contactButton,
117      hover: {
118        background: backgroundColor(theme, 100, "hovered"),
119      },
120    },
121    disabledContactButton: {
122      ...contactButton,
123      background: backgroundColor(theme, 100),
124      color: iconColor(theme, "muted"),
125    },
126    projectRow: {
127      ...projectRow,
128      background: backgroundColor(theme, 300),
129      name: {
130        ...projectRow.name,
131        ...text(theme, "mono", "secondary", { size: "sm" }),
132      },
133      hover: {
134        background: backgroundColor(theme, 300, "hovered"),
135      },
136      active: {
137        background: backgroundColor(theme, 300, "active"),
138      }
139    },
140    inviteRow: {
141      padding: {
142        left: sidePadding,
143        right: sidePadding
144      },
145      border: { top: true, width: 1, color: borderColor(theme, "primary") },
146      text: text(theme, "sans", "primary", { size: "sm" }),
147      hover: {
148        text: text(theme, "sans", "primary", { size: "sm", underline: true })
149      }
150    }
151  }
152}