feat: Change shortcuts menu to help menu (#2812)

Co-authored-by: Panayiotis Lipiridis <lipiridis@gmail.com>
2024-11-10 11:35:52 +01:00 · 2021-01-17 17:46:23 +01:00 · 2021-01-17 17:46:23 +01:00 · ce2c341910
commit ce2c341910
parent 07cc858926
17 changed files with 470 additions and 437 deletions
--- a/src/actions/actionMenu.tsx
+++ b/src/actions/actionMenu.tsx
@ -74,13 +74,13 @@ export const actionShortcuts = register({
    return {
      appState: {
        ...appState,
-        showShortcutsDialog: true,
+        showHelpDialog: true,
      },
      commitToHistory: false,
    };
  },
  PanelComponent: ({ updateData }) => (
-    <HelpIcon title={t("shortcutsDialog.title")} onClick={updateData} />
+    <HelpIcon title={t("helpDialog.title")} onClick={updateData} />
  ),
  keyTest: (event) => event.key === KEYS.QUESTION_MARK,
 });
--- a/src/actions/shortcuts.ts
+++ b/src/actions/shortcuts.ts
@ -34,7 +34,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  delete: [getShortcutKey("Del")],
  duplicateSelection: [
    getShortcutKey("CtrlOrCmd+D"),
-    getShortcutKey(`Alt+${t("shortcutsDialog.drag")}`),
+    getShortcutKey(`Alt+${t("helpDialog.drag")}`),
  ],
  sendBackward: [getShortcutKey("CtrlOrCmd+[")],
  bringForward: [getShortcutKey("CtrlOrCmd+]")],
--- a/src/appState.ts
+++ b/src/appState.ts
@ -63,7 +63,7 @@ export const getDefaultAppState = (): Omit<
    selectionElement: null,
    shouldAddWatermark: false,
    shouldCacheIgnoreZoom: false,
-    showShortcutsDialog: false,
+    showHelpDialog: false,
    showStats: false,
    startBoundElement: null,
    suggestedBindings: [],
@ -142,7 +142,7 @@ const APP_STATE_STORAGE_CONF = (<
  selectionElement: { browser: false, export: false },
  shouldAddWatermark: { browser: true, export: false },
  shouldCacheIgnoreZoom: { browser: true, export: false },
-  showShortcutsDialog: { browser: false, export: false },
+  showHelpDialog: { browser: false, export: false },
  showStats: { browser: true, export: false },
  startBoundElement: { browser: false, export: false },
  suggestedBindings: { browser: false, export: false },
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@ -163,9 +163,9 @@ export const ShapesSwitcher = ({
    {SHAPES.map(({ value, icon, key }, index) => {
      const label = t(`toolBar.${value}`);
      const letter = typeof key === "string" ? key : key[0];
-      const shortcut = `${capitalizeString(letter)} ${t(
-        "shortcutsDialog.or",
-      )} ${index + 1}`;
+      const shortcut = `${capitalizeString(letter)} ${t("helpDialog.or")} ${
+        index + 1
+      }`;
      return (
        <ToolButton
          className="Shape"
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -1249,7 +1249,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {

    if (event.key === KEYS.QUESTION_MARK) {
      this.setState({
-        showShortcutsDialog: true,
+        showHelpDialog: true,
      });
    }

--- a/src/components/Dialog.scss
+++ b/src/components/Dialog.scss
@ -15,6 +15,7 @@
    padding: calc(var(--space-factor) * 2);
    text-align: center;
    font-variant: small-caps;
+    font-size: 1.2em;
  }

  .Dialog__titleContent {
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@ -80,7 +80,7 @@ export const Dialog = (props: {
      onCloseRequest={props.onCloseRequest}
    >
      <Island ref={setIslandNode}>
-        <h3 id="dialog-title" className="Dialog__title">
+        <h2 id="dialog-title" className="Dialog__title">
          <span className="Dialog__titleContent">{props.title}</span>
          <button
            className="Modal__close"
@ -89,7 +89,7 @@ export const Dialog = (props: {
          >
            {useIsMobile() ? back : close}
          </button>
-        </h3>
+        </h2>
        <div className="Dialog__content">{props.children}</div>
      </Island>
    </Modal>
--- a/src/components/ShortcutsDialog.scss
+++ b/src/components/ShortcutsDialog.scss
@ -1,23 +1,28 @@
@import "../css/_variables";

 .excalidraw {
-  .ShortcutsDialog-island {
+  .HelpDialog h3 {
+    border-bottom: 1px solid var(--button-gray-2);
+    padding-bottom: 4px;
+  }
+
+  .HelpDialog--island {
    border: 1px solid var(--button-gray-2);
    margin-bottom: 16px;
  }

-  .ShortcutsDialog-island-title {
+  .HelpDialog--island-title {
    margin: 0;
    padding: 4px;
    background-color: var(--button-gray-1);
    text-align: center;
  }

-  .ShorcutsDialog-shortcut {
+  .HelpDialog--shortcut {
    border-top: 1px solid var(--button-gray-2);
  }

-  .ShorcutsDialog-key {
+  .HelpDialog--key {
    word-break: keep-all;
    border: 1px solid var(--button-gray-2);
    padding: 2px 8px;
@ -32,12 +37,20 @@
    font-family: inherit;
  }

-  .ShortcutsDialog-footer {
+  .HelpDialog--header {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
-    border-top: 1px solid var(--button-gray-2);
-    margin-top: 8px;
-    padding-top: 16px;
+    margin-bottom: 32px;
+    padding-bottom: 16px;
+  }
+
+  .HelpDialog--btn {
+    border: 1px solid var(--link-color);
+    padding: 8px 32px;
+    border-radius: 4px;
+  }
+  .HelpDialog--btn:hover {
+    text-decoration: none;
  }
 }
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@ -0,0 +1,348 @@
+import React from "react";
+import { t } from "../i18n";
+import { isDarwin } from "../keys";
+import { Dialog } from "./Dialog";
+import { getShortcutKey } from "../utils";
+import "./HelpDialog.scss";
+
+const Header = () => (
+  <div className="HelpDialog--header">
+    <a
+      className="HelpDialog--btn"
+      href="https://github.com/excalidraw/excalidraw#documentation"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {t("helpDialog.documentation")}
+    </a>
+    <a
+      className="HelpDialog--btn"
+      href="https://blog.excalidraw.com"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {t("helpDialog.blog")}
+    </a>
+    <a
+      className="HelpDialog--btn"
+      href="https://github.com/excalidraw/excalidraw/issues"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {t("helpDialog.github")}
+    </a>
+  </div>
+);
+
+const Section = (props: { title: string; children: React.ReactNode }) => (
+  <>
+    <h3>{props.title}</h3>
+    {props.children}
+  </>
+);
+
+const Columns = (props: { children: React.ReactNode }) => (
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "space-between",
+    }}
+  >
+    {props.children}
+  </div>
+);
+
+const Column = (props: { children: React.ReactNode }) => (
+  <div style={{ width: "49%" }}>{props.children}</div>
+);
+
+const ShortcutIsland = (props: {
+  caption: string;
+  children: React.ReactNode;
+}) => (
+  <div className="HelpDialog--island">
+    <h3 className="HelpDialog--island-title">{props.caption}</h3>
+    {props.children}
+  </div>
+);
+
+const Shortcut = (props: {
+  label: string;
+  shortcuts: string[];
+  isOr: boolean;
+}) => {
+  return (
+    <div className="HelpDialog--shortcut">
+      <div
+        style={{
+          display: "flex",
+          margin: "0",
+          padding: "4px 8px",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            lineHeight: 1.4,
+          }}
+        >
+          {props.label}
+        </div>
+        <div
+          style={{
+            display: "flex",
+            flex: "0 0 auto",
+            justifyContent: "flex-end",
+            marginInlineStart: "auto",
+            minWidth: "30%",
+          }}
+        >
+          {props.shortcuts.map((shortcut, index) => (
+            <React.Fragment key={index}>
+              <ShortcutKey>{shortcut}</ShortcutKey>
+              {props.isOr &&
+                index !== props.shortcuts.length - 1 &&
+                t("helpDialog.or")}
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Shortcut.defaultProps = {
+  isOr: true,
+};
+
+const ShortcutKey = (props: { children: React.ReactNode }) => (
+  <kbd className="HelpDialog--key" {...props} />
+);
+
+export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
+  const handleClose = React.useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  return (
+    <>
+      <Dialog
+        onCloseRequest={handleClose}
+        title={t("helpDialog.title")}
+        className={"HelpDialog"}
+      >
+        <Header />
+        <Section title={t("helpDialog.shortcuts")}>
+          <Columns>
+            <Column>
+              <ShortcutIsland caption={t("helpDialog.shapes")}>
+                <Shortcut
+                  label={t("toolBar.selection")}
+                  shortcuts={["V", "1"]}
+                />
+                <Shortcut
+                  label={t("toolBar.rectangle")}
+                  shortcuts={["R", "2"]}
+                />
+                <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
+                <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
+                <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
+                <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
+                <Shortcut
+                  label={t("toolBar.draw")}
+                  shortcuts={["Shift+P", "7"]}
+                />
+                <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
+                <Shortcut
+                  label={t("helpDialog.textNewLine")}
+                  shortcuts={[
+                    getShortcutKey("Enter"),
+                    getShortcutKey("Shift+Enter"),
+                  ]}
+                />
+                <Shortcut
+                  label={t("helpDialog.textFinish")}
+                  shortcuts={[
+                    getShortcutKey("Esc"),
+                    getShortcutKey("CtrlOrCmd+Enter"),
+                  ]}
+                />
+                <Shortcut
+                  label={t("helpDialog.curvedArrow")}
+                  shortcuts={[
+                    "A",
+                    t("helpDialog.click"),
+                    t("helpDialog.click"),
+                    t("helpDialog.click"),
+                  ]}
+                  isOr={false}
+                />
+                <Shortcut
+                  label={t("helpDialog.curvedLine")}
+                  shortcuts={[
+                    "L",
+                    t("helpDialog.click"),
+                    t("helpDialog.click"),
+                    t("helpDialog.click"),
+                  ]}
+                  isOr={false}
+                />
+                <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
+                <Shortcut
+                  label={t("helpDialog.preventBinding")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd")]}
+                />
+              </ShortcutIsland>
+              <ShortcutIsland caption={t("helpDialog.view")}>
+                <Shortcut
+                  label={t("buttons.zoomIn")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd++")]}
+                />
+                <Shortcut
+                  label={t("buttons.zoomOut")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+-")]}
+                />
+                <Shortcut
+                  label={t("buttons.resetZoom")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+0")]}
+                />
+                <Shortcut
+                  label={t("helpDialog.zoomToFit")}
+                  shortcuts={["Shift+1"]}
+                />
+                <Shortcut
+                  label={t("helpDialog.zoomToSelection")}
+                  shortcuts={["Shift+2"]}
+                />
+                <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
+                <Shortcut
+                  label={t("buttons.zenMode")}
+                  shortcuts={[getShortcutKey("Alt+Z")]}
+                />
+                <Shortcut
+                  label={t("labels.gridMode")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
+                />
+              </ShortcutIsland>
+            </Column>
+            <Column>
+              <ShortcutIsland caption={t("helpDialog.editor")}>
+                <Shortcut
+                  label={t("labels.selectAll")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+A")]}
+                />
+                <Shortcut
+                  label={t("labels.multiSelect")}
+                  shortcuts={[getShortcutKey(`Shift+${t("helpDialog.click")}`)]}
+                />
+                <Shortcut
+                  label={t("labels.moveCanvas")}
+                  shortcuts={[
+                    getShortcutKey(`Space+${t("helpDialog.drag")}`),
+                    getShortcutKey(`Wheel+${t("helpDialog.drag")}`),
+                  ]}
+                  isOr={true}
+                />
+                <Shortcut
+                  label={t("labels.cut")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+X")]}
+                />
+                <Shortcut
+                  label={t("labels.copy")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+C")]}
+                />
+                <Shortcut
+                  label={t("labels.paste")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
+                />
+                <Shortcut
+                  label={t("labels.copyAsPng")}
+                  shortcuts={[getShortcutKey("Shift+Alt+C")]}
+                />
+                <Shortcut
+                  label={t("labels.copyStyles")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Alt+C")]}
+                />
+                <Shortcut
+                  label={t("labels.pasteStyles")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Alt+V")]}
+                />
+                <Shortcut
+                  label={t("labels.delete")}
+                  shortcuts={[getShortcutKey("Del")]}
+                />
+                <Shortcut
+                  label={t("labels.sendToBack")}
+                  shortcuts={[
+                    isDarwin
+                      ? getShortcutKey("CtrlOrCmd+Alt+[")
+                      : getShortcutKey("CtrlOrCmd+Shift+["),
+                  ]}
+                />
+                <Shortcut
+                  label={t("labels.bringToFront")}
+                  shortcuts={[
+                    isDarwin
+                      ? getShortcutKey("CtrlOrCmd+Alt+]")
+                      : getShortcutKey("CtrlOrCmd+Shift+]"),
+                  ]}
+                />
+                <Shortcut
+                  label={t("labels.sendBackward")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+[")]}
+                />
+                <Shortcut
+                  label={t("labels.bringForward")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+]")]}
+                />
+                <Shortcut
+                  label={t("labels.alignTop")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Up")]}
+                />
+                <Shortcut
+                  label={t("labels.alignBottom")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Down")]}
+                />
+                <Shortcut
+                  label={t("labels.alignLeft")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Left")]}
+                />
+                <Shortcut
+                  label={t("labels.alignRight")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Right")]}
+                />
+                <Shortcut
+                  label={t("labels.duplicateSelection")}
+                  shortcuts={[
+                    getShortcutKey("CtrlOrCmd+D"),
+                    getShortcutKey(`Alt+${t("helpDialog.drag")}`),
+                  ]}
+                />
+                <Shortcut
+                  label={t("buttons.undo")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
+                />
+                <Shortcut
+                  label={t("buttons.redo")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Z")]}
+                />
+                <Shortcut
+                  label={t("labels.group")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+G")]}
+                />
+                <Shortcut
+                  label={t("labels.ungroup")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+G")]}
+                />
+              </ShortcutIsland>
+            </Column>
+          </Columns>
+        </Section>
+      </Dialog>
+    </>
+  );
+};
--- a/src/components/HelpIcon.tsx
+++ b/src/components/HelpIcon.tsx
@ -1,4 +1,5 @@
 import React from "react";
+import { questionCircle } from "../components/icons";

 type HelpIconProps = {
  title?: string;
@ -7,19 +8,8 @@ type HelpIconProps = {
  onClick?(): void;
 };

-const ICON = (
-  <svg
-    width="30"
-    height="22"
-    viewBox="0 0 512 512"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" />
-  </svg>
-);
-
 export const HelpIcon = (props: HelpIconProps) => (
  <label title={`${props.title} — ?`} className="help-icon">
-    <div onClick={props.onClick}>{ICON}</div>
+    <div onClick={props.onClick}>{questionCircle}</div>
  </label>
 );
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@ -36,7 +36,7 @@ import { LockIcon } from "./LockIcon";
 import { MobileMenu } from "./MobileMenu";
 import { PasteChartDialog } from "./PasteChartDialog";
 import { Section } from "./Section";
-import { ShortcutsDialog } from "./ShortcutsDialog";
+import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { Tooltip } from "./Tooltip";
@ -566,10 +566,8 @@ const LayerUI = ({
          onClose={() => setAppState({ errorMessage: null })}
        />
      )}
-      {appState.showShortcutsDialog && (
-        <ShortcutsDialog
-          onClose={() => setAppState({ showShortcutsDialog: false })}
-        />
+      {appState.showHelpDialog && (
+        <HelpDialog onClose={() => setAppState({ showHelpDialog: false })} />
      )}
      {appState.pasteDialog.shown && (
        <PasteChartDialog
--- a/src/components/ShortcutsDialog.tsx
+++ b/src/components/ShortcutsDialog.tsx
@ -1,321 +0,0 @@
-import React from "react";
-import { t } from "../i18n";
-import { isDarwin } from "../keys";
-import { Dialog } from "./Dialog";
-import { getShortcutKey } from "../utils";
-import "./ShortcutsDialog.scss";
-
-const Columns = (props: { children: React.ReactNode }) => (
-  <div
-    style={{
-      display: "flex",
-      flexDirection: "row",
-      flexWrap: "wrap",
-      justifyContent: "space-between",
-    }}
-  >
-    {props.children}
-  </div>
-);
-
-const Column = (props: { children: React.ReactNode }) => (
-  <div style={{ width: "49%" }}>{props.children}</div>
-);
-
-const ShortcutIsland = (props: {
-  caption: string;
-  children: React.ReactNode;
-}) => (
-  <div className="ShortcutsDialog-island">
-    <h3 className="ShortcutsDialog-island-title">{props.caption}</h3>
-    {props.children}
-  </div>
-);
-
-const Shortcut = (props: {
-  label: string;
-  shortcuts: string[];
-  isOr: boolean;
-}) => {
-  return (
-    <div className="ShorcutsDialog-shortcut">
-      <div
-        style={{
-          display: "flex",
-          margin: "0",
-          padding: "4px 8px",
-          alignItems: "center",
-        }}
-      >
-        <div
-          style={{
-            lineHeight: 1.4,
-          }}
-        >
-          {props.label}
-        </div>
-        <div
-          style={{
-            display: "flex",
-            flex: "0 0 auto",
-            justifyContent: "flex-end",
-            marginInlineStart: "auto",
-            minWidth: "30%",
-          }}
-        >
-          {props.shortcuts.map((shortcut, index) => (
-            <React.Fragment key={index}>
-              <ShortcutKey>{shortcut}</ShortcutKey>
-              {props.isOr &&
-                index !== props.shortcuts.length - 1 &&
-                t("shortcutsDialog.or")}
-            </React.Fragment>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Shortcut.defaultProps = {
-  isOr: true,
-};
-
-const ShortcutKey = (props: { children: React.ReactNode }) => (
-  <kbd className="ShorcutsDialog-key" {...props} />
-);
-
-const Footer = () => (
-  <div className="ShortcutsDialog-footer">
-    <a
-      href="https://blog.excalidraw.com"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {t("shortcutsDialog.blog")}
-    </a>
-    <a
-      href="https://github.com/excalidraw/excalidraw/issues"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {t("shortcutsDialog.github")}
-    </a>
-  </div>
-);
-
-export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
-  const handleClose = React.useCallback(() => {
-    if (onClose) {
-      onClose();
-    }
-  }, [onClose]);
-
-  return (
-    <>
-      <Dialog onCloseRequest={handleClose} title={t("shortcutsDialog.title")}>
-        <Columns>
-          <Column>
-            <ShortcutIsland caption={t("shortcutsDialog.shapes")}>
-              <Shortcut label={t("toolBar.selection")} shortcuts={["V", "1"]} />
-              <Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
-              <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
-              <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
-              <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
-              <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
-              <Shortcut
-                label={t("toolBar.draw")}
-                shortcuts={["Shift+P", "7"]}
-              />
-              <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
-              <Shortcut
-                label={t("shortcutsDialog.textNewLine")}
-                shortcuts={[
-                  getShortcutKey("Enter"),
-                  getShortcutKey("Shift+Enter"),
-                ]}
-              />
-              <Shortcut
-                label={t("shortcutsDialog.textFinish")}
-                shortcuts={[
-                  getShortcutKey("Esc"),
-                  getShortcutKey("CtrlOrCmd+Enter"),
-                ]}
-              />
-              <Shortcut
-                label={t("shortcutsDialog.curvedArrow")}
-                shortcuts={[
-                  "A",
-                  t("shortcutsDialog.click"),
-                  t("shortcutsDialog.click"),
-                  t("shortcutsDialog.click"),
-                ]}
-                isOr={false}
-              />
-              <Shortcut
-                label={t("shortcutsDialog.curvedLine")}
-                shortcuts={[
-                  "L",
-                  t("shortcutsDialog.click"),
-                  t("shortcutsDialog.click"),
-                  t("shortcutsDialog.click"),
-                ]}
-                isOr={false}
-              />
-              <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
-              <Shortcut
-                label={t("shortcutsDialog.preventBinding")}
-                shortcuts={[getShortcutKey("CtrlOrCmd")]}
-              />
-            </ShortcutIsland>
-            <ShortcutIsland caption={t("shortcutsDialog.view")}>
-              <Shortcut
-                label={t("buttons.zoomIn")}
-                shortcuts={[getShortcutKey("CtrlOrCmd++")]}
-              />
-              <Shortcut
-                label={t("buttons.zoomOut")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+-")]}
-              />
-              <Shortcut
-                label={t("buttons.resetZoom")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+0")]}
-              />
-              <Shortcut
-                label={t("shortcutsDialog.zoomToFit")}
-                shortcuts={["Shift+1"]}
-              />
-              <Shortcut
-                label={t("shortcutsDialog.zoomToSelection")}
-                shortcuts={["Shift+2"]}
-              />
-              <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
-              <Shortcut
-                label={t("buttons.zenMode")}
-                shortcuts={[getShortcutKey("Alt+Z")]}
-              />
-              <Shortcut
-                label={t("labels.gridMode")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
-              />
-            </ShortcutIsland>
-          </Column>
-          <Column>
-            <ShortcutIsland caption={t("shortcutsDialog.editor")}>
-              <Shortcut
-                label={t("labels.selectAll")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+A")]}
-              />
-              <Shortcut
-                label={t("labels.multiSelect")}
-                shortcuts={[
-                  getShortcutKey(`Shift+${t("shortcutsDialog.click")}`),
-                ]}
-              />
-              <Shortcut
-                label={t("labels.moveCanvas")}
-                shortcuts={[
-                  getShortcutKey(`Space+${t("shortcutsDialog.drag")}`),
-                  getShortcutKey(`Wheel+${t("shortcutsDialog.drag")}`),
-                ]}
-                isOr={true}
-              />
-              <Shortcut
-                label={t("labels.cut")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+X")]}
-              />
-              <Shortcut
-                label={t("labels.copy")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+C")]}
-              />
-              <Shortcut
-                label={t("labels.paste")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
-              />
-              <Shortcut
-                label={t("labels.copyAsPng")}
-                shortcuts={[getShortcutKey("Shift+Alt+C")]}
-              />
-              <Shortcut
-                label={t("labels.copyStyles")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Alt+C")]}
-              />
-              <Shortcut
-                label={t("labels.pasteStyles")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Alt+V")]}
-              />
-              <Shortcut
-                label={t("labels.delete")}
-                shortcuts={[getShortcutKey("Del")]}
-              />
-              <Shortcut
-                label={t("labels.sendToBack")}
-                shortcuts={[
-                  isDarwin
-                    ? getShortcutKey("CtrlOrCmd+Alt+[")
-                    : getShortcutKey("CtrlOrCmd+Shift+["),
-                ]}
-              />
-              <Shortcut
-                label={t("labels.bringToFront")}
-                shortcuts={[
-                  isDarwin
-                    ? getShortcutKey("CtrlOrCmd+Alt+]")
-                    : getShortcutKey("CtrlOrCmd+Shift+]"),
-                ]}
-              />
-              <Shortcut
-                label={t("labels.sendBackward")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+[")]}
-              />
-              <Shortcut
-                label={t("labels.bringForward")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+]")]}
-              />
-              <Shortcut
-                label={t("labels.alignTop")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Up")]}
-              />
-              <Shortcut
-                label={t("labels.alignBottom")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Down")]}
-              />
-              <Shortcut
-                label={t("labels.alignLeft")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Left")]}
-              />
-              <Shortcut
-                label={t("labels.alignRight")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Right")]}
-              />
-              <Shortcut
-                label={t("labels.duplicateSelection")}
-                shortcuts={[
-                  getShortcutKey("CtrlOrCmd+D"),
-                  getShortcutKey(`Alt+${t("shortcutsDialog.drag")}`),
-                ]}
-              />
-              <Shortcut
-                label={t("buttons.undo")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
-              />
-              <Shortcut
-                label={t("buttons.redo")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Z")]}
-              />
-              <Shortcut
-                label={t("labels.group")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+G")]}
-              />
-              <Shortcut
-                label={t("labels.ungroup")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+G")]}
-              />
-            </ShortcutIsland>
-          </Column>
-        </Columns>
-        <Footer />
-      </Dialog>
-    </>
-  );
-};
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@ -13,7 +13,7 @@
  a {
    font-weight: 500;
    text-decoration: none;
-    color: $oc-blue-7; /* OC Blue 7 */
+    color: var(--link-color);

    &:hover {
      text-decoration: underline;
@ -431,6 +431,7 @@
    cursor: pointer;
    fill: $oc-gray-6;
    bottom: 14px;
+    width: 1.5rem;

    :root[dir="ltr"] & {
      right: 14px;
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@ -32,6 +32,7 @@
  --popup-text-color: #{$oc-black};
  --popup-text-inverted-color: #{$oc-white};
  --dialog-border: #{$oc-gray-6};
+  --link-color: #{$oc-blue-7};
 }

 .excalidraw {
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -199,24 +199,26 @@
  "errorDialog": {
    "title": "Error"
  },
-  "shortcutsDialog": {
-    "title": "Keyboard shortcuts",
-    "shapes": "Shapes",
-    "or": "or",
+  "helpDialog": {
+    "blog": "Read our blog",
    "click": "click",
-    "drag": "drag",
    "curvedArrow": "Curved arrow",
    "curvedLine": "Curved line",
+    "documentation": "Documentation",
+    "drag": "drag",
    "editor": "Editor",
-    "view": "View",
-    "blog": "Read our blog",
-    "howto": "Follow our guides",
    "github": "Found an issue? Submit",
-    "textNewLine": "Add new line (text)",
+    "howto": "Follow our guides",
+    "or": "or",
+    "preventBinding": "Prevent arrow binding",
+    "shapes": "Shapes",
+    "shortcuts": "Keyboard shortcuts",
    "textFinish": "Finish editing (text)",
+    "textNewLine": "Add new line (text)",
+    "title": "Help",
+    "view": "View",
    "zoomToFit": "Zoom to fit all elements",
-    "zoomToSelection": "Zoom to selection",
-    "preventBinding": "Prevent arrow binding"
+    "zoomToSelection": "Zoom to selection"
  },
  "encrypted": {
    "tooltip": "Your drawings are end-to-end encrypted so Excalidraw's servers will never see them."
--- a/src/tests/snapshots/regressionTests.test.tsx.snap
+++ b/src/tests/snapshots/regressionTests.test.tsx.snap
@ -70,7 +70,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -536,7 +536,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -984,7 +984,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -1760,7 +1760,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -1967,7 +1967,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -2418,7 +2418,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -2666,7 +2666,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -2831,7 +2831,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -3303,7 +3303,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -3612,7 +3612,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -3816,7 +3816,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -4056,7 +4056,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -4307,7 +4307,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -4708,7 +4708,7 @@ Object {
  },
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -4979,7 +4979,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -5304,7 +5304,7 @@ Object {
  },
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -5488,7 +5488,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -5650,7 +5650,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -6108,7 +6108,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -6417,7 +6417,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -8454,7 +8454,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -8815,7 +8815,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -9066,7 +9066,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -9318,7 +9318,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -9626,7 +9626,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -9788,7 +9788,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -9950,7 +9950,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -10112,7 +10112,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -10304,7 +10304,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -10496,7 +10496,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -10688,7 +10688,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -10880,7 +10880,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -11042,7 +11042,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -11204,7 +11204,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -11396,7 +11396,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -11558,7 +11558,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -11761,7 +11761,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -12468,7 +12468,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -12715,7 +12715,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": true,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -12813,7 +12813,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -12913,7 +12913,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -13075,7 +13075,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -13381,7 +13381,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -13687,7 +13687,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -13847,7 +13847,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -14043,7 +14043,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -14296,7 +14296,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -14612,7 +14612,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -15449,7 +15449,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -15755,7 +15755,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -16065,7 +16065,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -16441,7 +16441,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -16612,7 +16612,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -16925,7 +16925,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -17165,7 +17165,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -17420,7 +17420,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -17735,7 +17735,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -17835,7 +17835,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -18008,7 +18008,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -18814,7 +18814,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -18916,7 +18916,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -19692,7 +19692,7 @@ Object {
  },
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -20093,7 +20093,7 @@ Object {
  },
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -20340,7 +20340,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": true,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -20440,7 +20440,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -20934,7 +20934,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
@ -21032,7 +21032,7 @@ Object {
  "selectionElement": null,
  "shouldAddWatermark": false,
  "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
  "showStats": false,
  "startBoundElement": null,
  "suggestedBindings": Array [],
--- a/src/types.ts
+++ b/src/types.ts
@ -81,7 +81,7 @@ export type AppState = {
  selectedElementIds: { [id: string]: boolean };
  previousSelectedElementIds: { [id: string]: boolean };
  shouldCacheIgnoreZoom: boolean;
-  showShortcutsDialog: boolean;
+  showHelpDialog: boolean;
  toastMessage: string | null;
  zenModeEnabled: boolean;
  appearance: "light" | "dark";