Start on contact finder modal

Co-Authored-By: Antonio Scandurra <me@as-cii.com>

styles/src/styleTree/app.ts

@@ -1,6 +1,7 @@
 import Theme from "../themes/theme";
 import chatPanel from "./chatPanel";
 import { text } from "./components";
+import contactFinder from "./contactFinder";
 import contactsPanel from "./contactsPanel";
 import commandPalette from "./commandPalette";
 import editor from "./editor";
@@ -24,6 +25,7 @@ export default function app(theme: Theme): Object {
     projectPanel: projectPanel(theme),
     chatPanel: chatPanel(theme),
     contactsPanel: contactsPanel(theme),
+    contactFinder: contactFinder(theme),
     search: search(theme),
     breadcrumbs: {
       ...text(theme, "sans", "secondary"),

styles/src/styleTree/contactFinder.ts

@@ -0,0 +1,42 @@
+import Theme from "../themes/theme";
+import picker from "./picker";
+import { backgroundColor, border, player, text } from "./components";
+
+export default function contactFinder(theme: Theme) {
+  return {
+    ...picker(theme),
+    maxWidth: 540.,
+    maxHeight: 420.,
+    queryEditor: {
+      background: backgroundColor(theme, 500),
+      cornerRadius: 6,
+      text: text(theme, "mono", "primary"),
+      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
+      selection: player(theme, 1).selection,
+      border: border(theme, "secondary"),
+      padding: {
+        bottom: 4,
+        left: 8,
+        right: 8,
+        top: 4,
+      },
+    },
+    rowHeight: 28,
+    contactAvatar: {
+      cornerRadius: 10,
+      width: 18,
+    },
+    contactUsername: {
+      ...text(theme, "mono", "primary", { size: "sm" }),
+      padding: {
+        left: 8,
+      },
+    },
+    contactButton: {
+      ...text(theme, "mono", "primary", { size: "sm" }),
+      background: backgroundColor(theme, 100),
+      cornerRadius: 12,
+      padding: { left: 7, right: 7 }
+    },
+  }
+}

styles/src/styleTree/contactsPanel.ts

@@ -2,7 +2,7 @@ import Theme from "../themes/theme";
 import { panel } from "./app";
 import { backgroundColor, border, borderColor, iconColor, player, text } from "./components";
 
-export default function(theme: Theme) {
+export default function contactsPanel(theme: Theme) {
   const project = {
     guestAvatarSpacing: 4,
     height: 24,
@@ -64,7 +64,7 @@ export default function(theme: Theme) {
         left: 8,
       },
     },
-    editContact: {
+    contactButton: {
       ...text(theme, "mono", "primary", { size: "sm" }),
       background: backgroundColor(theme, 100),
       cornerRadius: 12,