Show incoming request notification and implement dismissal

styles/src/styleTree/app.ts

@@ -10,6 +10,7 @@ import search from "./search";
 import picker from "./picker";
 import workspace from "./workspace";
 import projectDiagnostics from "./projectDiagnostics";
+import incomingRequestNotification from "./incomingRequestNotification";
 
 export const panel = {
   padding: { top: 12, left: 12, bottom: 12, right: 12 },
@@ -32,6 +33,7 @@ export default function app(theme: Theme): Object {
       padding: {
         left: 6,
       },
-    }
+    },
+    incomingRequestNotification: incomingRequestNotification(theme),
   };
 }

styles/src/styleTree/incomingRequestNotification.ts

@@ -0,0 +1,35 @@
+import Theme from "../themes/theme";
+import { backgroundColor, iconColor, text } from "./components";
+
+export default function incomingRequestNotification(theme: Theme): Object {
+  return {
+    headerAvatar: {
+      height: 12,
+      width: 12,
+      cornerRadius: 6,
+    },
+    headerMessage: {
+      ...text(theme, "sans", "primary", { size: "xs" }),
+      margin: { left: 4 }
+    },
+    headerHeight: 18,
+    bodyMessage: {
+      ...text(theme, "sans", "secondary", { size: "xs" }),
+      margin: { top: 6, bottom: 6 },
+    },
+    button: {
+      ...text(theme, "sans", "primary", { size: "xs" }),
+      background: backgroundColor(theme, "on300"),
+      padding: 4,
+      cornerRadius: 6,
+      margin: { left: 6 },
+    },
+    dismissButton: {
+      color: iconColor(theme, "secondary"),
+      iconWidth: 8,
+      iconHeight: 8,
+      buttonWidth: 8,
+      buttonHeight: 8,
+    }
+  }
+}

styles/src/styleTree/workspace.ts

@@ -1,5 +1,5 @@
 import Theme from "../themes/theme";
-import { backgroundColor, border, iconColor, text } from "./components";
+import { backgroundColor, border, iconColor, shadow, text } from "./components";
 import statusBar from "./statusBar";
 
 export default function workspace(theme: Theme) {
@@ -148,11 +148,15 @@ export default function workspace(theme: Theme) {
     },
     notification: {
       margin: { top: 10 },
+      background: backgroundColor(theme, 300),
+      cornerRadius: 6,
+      padding: 12,
+      border: border(theme, "primary"),
+      shadow: shadow(theme),
     },
     notifications: {
       width: 256,
       margin: { right: 10, bottom: 10 },
-      background: "#ff0000",
     }
   };
 }