Improve layout and styling of contact notifications

Co-authored-by: Nathan Sobo <nathan@zed.dev>

styles/src/styleTree/contactNotification.ts

@@ -1,21 +1,24 @@
 import Theme from "../themes/theme";
 import { backgroundColor, iconColor, text } from "./components";
 
+const avatarSize = 12;
+const headerPadding = 8;
+
 export default function contactNotification(theme: Theme): Object {
   return {
     headerAvatar: {
-      height: 12,
-      width: 12,
+      height: avatarSize,
+      width: avatarSize,
       cornerRadius: 6,
     },
     headerMessage: {
       ...text(theme, "sans", "primary", { size: "xs" }),
-      margin: { left: 4 }
+      margin: { left: headerPadding, right: headerPadding }
     },
     headerHeight: 18,
     bodyMessage: {
       ...text(theme, "sans", "secondary", { size: "xs" }),
-      margin: { top: 6, bottom: 6 },
+      margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
     },
     button: {
       ...text(theme, "sans", "primary", { size: "xs" }),
@@ -23,6 +26,9 @@ export default function contactNotification(theme: Theme): Object {
       padding: 4,
       cornerRadius: 6,
       margin: { left: 6 },
+      hover: {
+        background: backgroundColor(theme, "on300", "hovered")
+      }
     },
     dismissButton: {
       color: iconColor(theme, "secondary"),
@@ -30,6 +36,9 @@ export default function contactNotification(theme: Theme): Object {
       iconHeight: 8,
       buttonWidth: 8,
       buttonHeight: 8,
+      hover: {
+        color: iconColor(theme, "primary")
+      }
     }
   }
 }

styles/src/styleTree/workspace.ts

@@ -159,7 +159,7 @@ export default function workspace(theme: Theme) {
       shadow: shadow(theme),
     },
     notifications: {
-      width: 256,
+      width: 380,
       margin: { right: 10, bottom: 10 },
     }
   };