diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js
index 8aeb5f606..de9100343 100644
--- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js
+++ b/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.
-
+
+ Cmd + Enter
+
+
+ Cmd + S
+
+
+ Cmd + Esc
+
+
+ e
+
+
+ m
+
+
+ / or t
+
+
+ d
+
+
+ d
+
+
+ ?
+
+
);
}
+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;
diff --git a/frontend/static/flatpages/index.js b/frontend/static/flatpages/index.js
index 731dd6b70..3b1fe70f0 100644
--- a/frontend/static/flatpages/index.js
+++ b/frontend/static/flatpages/index.js
@@ -1,8 +1,6 @@
// @flow
import api from './api.md';
-import keyboard from './keyboard.md';
export default {
api,
- keyboard,
};
diff --git a/frontend/static/flatpages/keyboard.md b/frontend/static/flatpages/keyboard.md
deleted file mode 100644
index 56e604a0c..000000000
--- a/frontend/static/flatpages/keyboard.md
+++ /dev/null
@@ -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