Move contact finder into contacts popover

styles/src/styleTree/app.ts

@@ -16,6 +16,8 @@ import updateNotification from "./updateNotification";
 import projectSharedNotification from "./projectSharedNotification";
 import tooltip from "./tooltip";
 import terminal from "./terminal";
+import contactList from "./contactList";
+import incomingCallNotification from "./incomingCallNotification";
 
 export const panel = {
   padding: { top: 12, bottom: 12 },
@@ -36,6 +38,7 @@ export default function app(theme: Theme): Object {
     projectPanel: projectPanel(theme),
     chatPanel: chatPanel(theme),
     contactsPopover: contactsPopover(theme),
+    contactList: contactList(theme),
     contactFinder: contactFinder(theme),
     search: search(theme),
     breadcrumbs: {
@@ -47,6 +50,7 @@ export default function app(theme: Theme): Object {
     contactNotification: contactNotification(theme),
     updateNotification: updateNotification(theme),
     projectSharedNotification: projectSharedNotification(theme),
+    incomingCallNotification: incomingCallNotification(theme),
     tooltip: tooltip(theme),
     terminal: terminal(theme),
   };

styles/src/styleTree/contactFinder.ts

@@ -1,6 +1,6 @@
 import Theme from "../themes/common/theme";
 import picker from "./picker";
-import { backgroundColor, iconColor } from "./components";
+import { backgroundColor, border, iconColor, player, text } from "./components";
 
 export default function contactFinder(theme: Theme) {
   const contactButton = {
@@ -12,7 +12,28 @@ export default function contactFinder(theme: Theme) {
   };
 
   return {
-    ...picker(theme),
+    picker: {
+      item: picker(theme).item,
+      empty: picker(theme).empty,
+      inputEditor: {
+        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,
+        },
+        margin: {
+          left: 12,
+          right: 12,
+        }
+      }
+    },
     rowHeight: 28,
     contactAvatar: {
       cornerRadius: 10,

styles/src/styleTree/contactsPopover.ts

@@ -19,7 +19,6 @@ export default function contactsPopover(theme: Theme) {
     padding: { top: 6 },
     shadow: popoverShadow(theme),
     border: border(theme, "primary"),
-    margin: { top: -5 },
     width: 250,
     height: 300,
     userQueryEditor: {