diff --git a/frontend/components/HelpText/HelpText.js b/frontend/components/HelpText/HelpText.js
index dcb48df8..a4ff8c9b 100644
--- a/frontend/components/HelpText/HelpText.js
+++ b/frontend/components/HelpText/HelpText.js
@@ -3,6 +3,7 @@ import styled from 'styled-components';
import { color } from 'styles/constants';
const HelpText = styled.p`
+ margin-top: 0;
color: ${color.slateDark};
`;
diff --git a/frontend/components/Key/index.js b/frontend/components/Key/index.js
new file mode 100644
index 00000000..efe24263
--- /dev/null
+++ b/frontend/components/Key/index.js
@@ -0,0 +1,3 @@
+// @flow
+import Key from './key';
+export default Key;
diff --git a/frontend/components/Key/key.js b/frontend/components/Key/key.js
new file mode 100644
index 00000000..8f4954d8
--- /dev/null
+++ b/frontend/components/Key/key.js
@@ -0,0 +1,19 @@
+// @flow
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+
+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 Key;
diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js
index 1d72cd14..14cd805d 100644
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -70,7 +70,7 @@ type Props = {
@keydown('shift+/')
goToOpenKeyboardShortcuts() {
- this.props.ui.setActiveModal('keyboard-shortcuts');
+ this.props.ui.setActiveModal('markdown-shortcuts');
}
handleCreateCollection = () => {
diff --git a/frontend/components/Layout/components/Modals.js b/frontend/components/Layout/components/Modals.js
index 37193b8b..7ac3d91d 100644
--- a/frontend/components/Layout/components/Modals.js
+++ b/frontend/components/Layout/components/Modals.js
@@ -8,6 +8,7 @@ import CollectionEdit from 'scenes/CollectionEdit';
import CollectionDelete from 'scenes/CollectionDelete';
import DocumentDelete from 'scenes/DocumentDelete';
import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
+import MarkdownShortcuts from 'scenes/MarkdownShortcuts';
import Settings from 'scenes/Settings';
@observer class Modals extends Component {
@@ -51,6 +52,9 @@ import Settings from 'scenes/Settings';
+
+
+
diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js
index d0b208e9..df0ee9e5 100644
--- a/frontend/components/Modal/Modal.js
+++ b/frontend/components/Modal/Modal.js
@@ -61,7 +61,8 @@ const StyledModal = styled(ReactModal)`
overflow-x: hidden;
overflow-y: auto;
background: white;
- padding: 15vh 2rem 2rem
+ padding: 13vh 2rem 2rem;
+ outline: none;
`;
const Close = styled.a`
diff --git a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js
index de910034..f0c27c53 100644
--- a/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js
+++ b/frontend/scenes/KeyboardShortcuts/KeyboardShortcuts.js
@@ -1,7 +1,7 @@
// @flow
import React from 'react';
import styled from 'styled-components';
-import { color } from 'styles/constants';
+import Key from 'components/Key';
import Flex from 'components/Flex';
import HelpText from 'components/HelpText';
@@ -34,9 +34,6 @@ function KeyboardShortcuts() {
d
- d
-
-
?
@@ -65,18 +62,4 @@ const Label = styled.dd`
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/scenes/MarkdownShortcuts/MarkdownShortcuts.js b/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js
new file mode 100644
index 00000000..ff84ecf1
--- /dev/null
+++ b/frontend/scenes/MarkdownShortcuts/MarkdownShortcuts.js
@@ -0,0 +1,71 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import Key from 'components/Key';
+import Flex from 'components/Flex';
+import HelpText from 'components/HelpText';
+
+function MarkdownShortcuts() {
+ return (
+
+
+ Know a little markdown syntax? You
+ {"'"}
+ re going to love all of the markdown
+ shortcuts built right into the Atlas editor.
+
+
+ # Space
+
+ ## Space
+
+ ### Space
+
+
+ 1. Space
+
+ - Space
+
+ [ ] Space
+
+ > Space
+
+ ---
+
+ {'```'}
+
+ _italic_
+
+ **bold**
+
+ ~~strikethrough~~
+
+ {'`code`'}
+
+
+
+ );
+}
+
+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
+`;
+
+export default MarkdownShortcuts;
diff --git a/frontend/scenes/MarkdownShortcuts/index.js b/frontend/scenes/MarkdownShortcuts/index.js
new file mode 100644
index 00000000..1a6460e7
--- /dev/null
+++ b/frontend/scenes/MarkdownShortcuts/index.js
@@ -0,0 +1,3 @@
+// @flow
+import MarkdownShortcuts from './MarkdownShortcuts';
+export default MarkdownShortcuts;