Style new lsp log menu, add a test for it

styles/src/styleTree/app.ts

@@ -17,6 +17,7 @@ import projectSharedNotification from "./projectSharedNotification"
 import tooltip from "./tooltip"
 import terminal from "./terminal"
 import contactList from "./contactList"
+import lspLogMenu from "./lspLogMenu"
 import incomingCallNotification from "./incomingCallNotification"
 import { ColorScheme } from "../themes/common/colorScheme"
 import feedback from "./feedback"
@@ -45,6 +46,7 @@ export default function app(colorScheme: ColorScheme): Object {
         contactsPopover: contactsPopover(colorScheme),
         contactFinder: contactFinder(colorScheme),
         contactList: contactList(colorScheme),
+        lspLogMenu: lspLogMenu(colorScheme),
         search: search(colorScheme),
         sharedScreen: sharedScreen(colorScheme),
         updateNotification: updateNotification(colorScheme),

styles/src/styleTree/lspLogMenu.ts

@@ -0,0 +1,41 @@
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
+
+export default function contactsPanel(colorScheme: ColorScheme) {
+    let layer = colorScheme.middle
+
+    return {
+        background: background(layer),
+        border: border(layer),
+        shadow: colorScheme.popoverShadow,
+        header: {
+            ...text(layer, "sans", { size: "sm" }),
+            padding: { left: 8, right: 8, top: 2, bottom: 2 },
+            cornerRadius: 6,
+            background: background(layer, "on"),
+            border: border(layer, "on", { overlay: true }),
+            hover: {
+                background: background(layer, "hovered"),
+                ...text(layer, "sans", "hovered", { size: "sm" }),
+            }
+        },
+        server: {
+            ...text(layer, "sans", { size: "sm" }),
+            padding: { left: 8, right: 8, top: 8, bottom: 8 },
+        },
+        item: {
+            ...text(layer, "sans", { size: "sm" }),
+            padding: { left: 18, right: 18, top: 2, bottom: 2 },
+            hover: {
+                background: background(layer, "hovered"),
+                ...text(layer, "sans", "hovered", { size: "sm" }),
+            },
+            active: {
+                background: background(layer, "active"),
+            },
+            activeHover: {
+                background: background(layer, "active"),
+            },
+        },
+    }
+}