diff --git a/app/scenes/Document/components/KeyboardShortcutsButton.tsx b/app/scenes/Document/components/KeyboardShortcutsButton.tsx
index 28f79659d..1eedf252c 100644
--- a/app/scenes/Document/components/KeyboardShortcutsButton.tsx
+++ b/app/scenes/Document/components/KeyboardShortcutsButton.tsx
@@ -1,36 +1,31 @@
+import { observer } from "mobx-react";
import { KeyboardIcon } from "outline-icons";
import * as React from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";
import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
-import Guide from "~/components/Guide";
import NudeButton from "~/components/NudeButton";
import Tooltip from "~/components/Tooltip";
-import useBoolean from "~/hooks/useBoolean";
+import useStores from "~/hooks/useStores";
function KeyboardShortcutsButton() {
const { t } = useTranslation();
- const [
- keyboardShortcutsOpen,
- handleOpenKeyboardShortcuts,
- handleCloseKeyboardShortcuts,
- ] = useBoolean();
+ const { dialogs } = useStores();
+
+ const handleOpenKeyboardShortcuts = () => {
+ dialogs.openGuide({
+ title: t("Keyboard shortcuts"),
+ content: ,
+ });
+ };
+
return (
- <>
-
-
-
-
-
-
- >
+
+
+
);
}
@@ -49,4 +44,4 @@ const Button = styled(NudeButton)`
}
`;
-export default KeyboardShortcutsButton;
+export default observer(KeyboardShortcutsButton);
diff --git a/app/scenes/KeyboardShortcuts.tsx b/app/scenes/KeyboardShortcuts.tsx
index f7ae2f280..3e158e793 100644
--- a/app/scenes/KeyboardShortcuts.tsx
+++ b/app/scenes/KeyboardShortcuts.tsx
@@ -442,6 +442,7 @@ const List = styled.dl`
overflow: hidden;
padding: 0;
margin: 0;
+ user-select: none;
`;
const Keys = styled.dt`