don't use unicode characters for shortcut help (#1565)

* don't use unicode characters for shortcut help

* use option instead of alt

* make shortcut replacement case-insensitive

* improve shortcut dialog layout

src/components/ShortcutsDialog.tsx

@@ -56,7 +56,9 @@ const Shortcut = (props: {
   label: string;
   shortcuts: string[];
   isOr: boolean;
-}) => (
+}) => {
+  const isRTL = document.documentElement.getAttribute("dir") === "rtl";
+  return (
     <div
       style={{
         borderTop: `1px solid ${oc.gray[4]}`,
@@ -65,16 +67,13 @@ const Shortcut = (props: {
       <div
         style={{
           display: "flex",
-        justifyContent: "space-between",
           margin: "0",
-        padding: "4px",
+          padding: "4px 8px",
           alignItems: "center",
         }}
       >
         <div
           style={{
-          flexBasis: 0,
-          flexGrow: 2,
             lineHeight: 1.4,
           }}
         >
@@ -83,9 +82,11 @@ const Shortcut = (props: {
         <div
           style={{
             display: "flex",
-          flexBasis: 0,
+            flex: "0 0 auto",
-          flexGrow: 1,
+            justifyContent: "flex-end",
-          justifyContent: "center",
+            marginLeft: isRTL ? "0em" : "auto",
+            marginRight: isRTL ? "auto" : "0em",
+            minWidth: "30%",
           }}
         >
           {props.shortcuts.map((shortcut, index) => (
@@ -100,6 +101,7 @@ const Shortcut = (props: {
       </div>
     </div>
   );
+};
 
 Shortcut.defaultProps = {
   isOr: true,
@@ -111,10 +113,14 @@ const ShortcutKey = (props: { children: React.ReactNode }) => (
       wordBreak: "keep-all",
       border: `1px solid ${oc.gray[4]}`,
       padding: "2px 8px",
-      margin: "0 4px",
+      margin: "auto 4px",
       backgroundColor: oc.gray[2],
       borderRadius: "2px",
       fontSize: "0.8em",
+      minHeight: "26px",
+      boxSizing: "border-box",
+      display: "flex",
+      alignItems: "center",
     }}
     {...props}
   />
@@ -165,7 +171,7 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
   return (
     <>
       <Dialog
-        maxWidth={800}
+        maxWidth={900}
         onCloseRequest={handleClose}
         title={t("shortcutsDialog.title")}
       >

src/utils.ts

@@ -158,14 +158,12 @@ export const getShortcutKey = (shortcut: string): string => {
   const isMac = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
   if (isMac) {
     return `${shortcut
-      .replace("CtrlOrCmd+", "⌘")
+      .replace(/CtrlOrCmd/i, "Cmd")
-      .replace("Alt+", "⌥")
+      .replace(/Alt/i, "Option")
-      .replace("Ctrl+", "⌃")
+      .replace(/Del/i, "Delete")
-      .replace("Shift+", "⇧")
+      .replace(/Enter|Return/i, "Enter")}`;
-      .replace("Del", "⌫")
-      .replace(/Enter|Return/, "↩")}`;
   }
-  return `${shortcut.replace("CtrlOrCmd", "Ctrl")}`;
+  return `${shortcut.replace(/CtrlOrCmd/i, "Ctrl")}`;
 };
 export function viewportCoordsToSceneCoords(
   { clientX, clientY }: { clientX: number; clientY: number },