Improve the look of the syntax tree view UI

styles/src/styleTree/app.ts

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

styles/src/styleTree/toolbarDropdownMenu.ts

@@ -1,7 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
-export default function contactsPanel(colorScheme: ColorScheme) {
+export default function dropdownMenu(colorScheme: ColorScheme) {
     let layer = colorScheme.middle
 
     return {
@@ -11,6 +11,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         shadow: colorScheme.popoverShadow,
         header: {
             ...text(layer, "sans", { size: "sm" }),
+            secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
+            secondaryTextSpacing: 10,
             padding: { left: 8, right: 8, top: 2, bottom: 2 },
             cornerRadius: 6,
             background: background(layer, "on"),
@@ -20,12 +22,14 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                 ...text(layer, "sans", "hovered", { size: "sm" }),
             }
         },
-        server: {
+        sectionHeader: {
             ...text(layer, "sans", { size: "sm" }),
             padding: { left: 8, right: 8, top: 8, bottom: 8 },
         },
         item: {
             ...text(layer, "sans", { size: "sm" }),
+            secondaryTextSpacing: 10,
+            secondaryText: text(layer, "sans", { size: "sm" }),
             padding: { left: 18, right: 18, top: 2, bottom: 2 },
             hover: {
                 background: background(layer, "hovered"),