Show a notification after Zed auto-updates

styles/src/styleTree/app.ts

@@ -12,6 +12,7 @@ import workspace from "./workspace";
 import contextMenu from "./contextMenu";
 import projectDiagnostics from "./projectDiagnostics";
 import contactNotification from "./contactNotification";
+import updateNotification from "./updateNotification";
 import tooltip from "./tooltip";
 
 export const panel = {
@@ -38,6 +39,7 @@ export default function app(theme: Theme): Object {
       },
     },
     contactNotification: contactNotification(theme),
+    updateNotification: updateNotification(theme),
     tooltip: tooltip(theme),
   };
 }

styles/src/styleTree/updateNotification.ts

@@ -0,0 +1,30 @@
+import Theme from "../themes/common/theme";
+import { iconColor, text } from "./components";
+
+const headerPadding = 8;
+
+export default function updateNotification(theme: Theme): Object {
+  return {
+    message: {
+      ...text(theme, "sans", "primary", { size: "xs" }),
+      margin: { left: headerPadding, right: headerPadding }
+    },
+    actionMessage: {
+      ...text(theme, "sans", "secondary", { size: "xs" }),
+      margin: { left: headerPadding, top: 6, bottom: 6 },
+      hover: {
+        color: theme.textColor["active"].value
+      }
+    },
+    dismissButton: {
+      color: iconColor(theme, "secondary"),
+      iconWidth: 8,
+      iconHeight: 8,
+      buttonWidth: 8,
+      buttonHeight: 8,
+      hover: {
+        color: iconColor(theme, "primary")
+      }
+    }
+  }
+}