Add basic styling to keystrokes in command palette

styles/src/styleTree/app.ts

@@ -2,6 +2,7 @@ import Theme from "../themes/theme";
 import chatPanel from "./chatPanel";
 import { text } from "./components";
 import contactsPanel from "./contactsPanel";
+import commandPalette from "./commandPalette";
 import editor from "./editor";
 import projectPanel from "./projectPanel";
 import search from "./search";
@@ -29,6 +30,7 @@ export default function app(theme: Theme): Object {
         },
       },
     },
+    commandPalette: commandPalette(theme),
     projectPanel: projectPanel(theme),
     chatPanel: chatPanel(theme),
     contactsPanel: contactsPanel(theme),

styles/src/styleTree/commandPalette.ts

@@ -0,0 +1,21 @@
+import Theme from "../themes/theme";
+import { text, backgroundColor, border } from "./components";
+
+export default function commandPalette(theme: Theme) {
+  return {
+    keystrokeSpacing: 8,
+    key: {
+      text: text(theme, "mono", "secondary", { size: "xs" }),
+      cornerRadius: 3,
+      background: backgroundColor(theme, "info", "base"),
+      border: border(theme, "info"),
+      padding: {
+        left: 3,
+        right: 3,
+      },
+      margin: {
+        left: 3
+      },
+    }
+  }
+}

styles/src/styleTree/selectorModal.ts

@@ -38,7 +38,7 @@ export default function selectorModal(theme: Theme): Object {
     },
     inputEditor: {
       background: backgroundColor(theme, 500),
-      corner_radius: 6,
+      cornerRadius: 6,
       placeholderText: text(theme, "sans", "placeholder"),
       selection: player(theme, 1).selection,
       text: text(theme, "mono", "primary"),