Improve shortcut styling

frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js

@@ -1,12 +1,9 @@
 // @flow
 import React from 'react';
+import styled from 'styled-components';
+import { color } from 'styles/constants';
 import Flex from 'components/Flex';
 import HelpText from 'components/HelpText';
-import HtmlContent from 'components/HtmlContent';
-import flatpages from 'static/flatpages';
-import { convertToMarkdown } from 'utils/markdown';
-
-const htmlContent = convertToMarkdown(flatpages.keyboard);
 
 function KeyboardShortcuts() {
   return (
@@ -15,9 +12,71 @@ function KeyboardShortcuts() {
         Atlas is designed to be super fast and easy to use.
         All of your usual keyboard shortcuts work here.
       </HelpText>
-      <HtmlContent dangerouslySetInnerHTML={{ __html: htmlContent }} />
+      <List>
+        <Keys><Key>Cmd</Key> + <Key>Enter</Key></Keys>
+        <Label>Save and exit document edit mode</Label>
+
+        <Keys><Key>Cmd</Key> + <Key>S</Key></Keys>
+        <Label>Save document and continue editing</Label>
+
+        <Keys><Key>Cmd</Key> + <Key>Esc</Key></Keys>
+        <Label>Cancel editing</Label>
+
+        <Keys><Key>e</Key></Keys>
+        <Label>Edit current document</Label>
+
+        <Keys><Key>m</Key></Keys>
+        <Label>Move current document</Label>
+
+        <Keys><Key>/</Key> or <Key>t</Key></Keys>
+        <Label>Jump to search</Label>
+
+        <Keys><Key>d</Key></Keys>
+        <Label>Jump to dashboard</Label>
+
+        <Keys><Key>d</Key></Keys>
+        <Label>Jump to dashboard</Label>
+
+        <Keys><Key>?</Key></Keys>
+        <Label>Open this guide</Label>
+      </List>
     </Flex>
   );
 }
 
+const List = styled.dl`
+  width: 100%;
+  overflow: hidden;
+  padding: 0;
+  margin: 0
+`;
+
+const Keys = styled.dt`
+  float: left;
+  width: 25%;
+  padding: 0 0 4px;
+  margin: 0
+`;
+
+const Label = styled.dd`
+  float: left;
+  width: 75%;
+  padding: 0 0 4px;
+  margin: 0
+`;
+
+const Key = styled.kbd`
+  display: inline-block;
+  padding: 4px 6px;
+  font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  line-height: 10px;
+  color: ${color.text};
+  vertical-align: middle;
+  background-color: ${color.smokeLight};
+  border: solid 1px ${color.slateLight};
+  border-bottom-color: ${color.slate};
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 ${color.slate};
+`;
+
 export default KeyboardShortcuts;

frontend/static/flatpages/index.js

@@ -1,8 +1,6 @@
 // @flow
 import api from './api.md';
-import keyboard from './keyboard.md';
 
 export default {
   api,
-  keyboard,
 };

frontend/static/flatpages/keyboard.md

@@ -1,9 +0,0 @@
-- `Cmd+Enter` - Save and exit document editor
-- `Cmd+s` - Save document and continue editing
-- `Cmd+Esc` - Cancel edit
-- `/` or `t` - Jump to search
-- `d` - Jump to dashboard
-- `c` - Compose within a collection
-- `e` - Edit document
-- `m` - Move document
-- `?` - This guide