From ebd77ea79370cc9e5e560f26077caa933771420b Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Tue, 26 Mar 2024 14:29:29 +0100
Subject: [PATCH] fix(ui): move shortcuts to modal (#1996)

---
 .../Controls/components/KeyboardHelp.tsx      | 61 ++++++++++---------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx b/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
index 25d7813ff..0d15d581e 100644
--- a/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Icon } from 'UI';
 import { Popover, Button } from 'antd';
+import { useModal } from "../../../../Modal";
 
 const Key = ({ label }: { label: string }) => <div style={{ minWidth: 52 }} className="whitespace-nowrap font-bold bg-gray-lightest rounded shadow px-2 py-1 text-figmaColors-text-primary text-center">{label}</div>;
 function Cell({ shortcut, text }: any) {
   return (
-    <div className="flex items-center gap-2 justify-center text-center rounded">
+    <div className="flex items-center gap-2 justify-start rounded">
       <Key label={shortcut} />
       <span>{text}</span>
     </div>
@@ -32,41 +33,43 @@ export const PlaybackSpeedShortcut = () => <Key label={"↑ / ↓"} />
 
 function ShortcutGrid() {
   return (
-    <div className="grid grid-cols-1 sm:grid-flow-row-dense sm:auto-cols-max md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 justify-items-start">
-      <Cell shortcut="⇧ + C" text="Launch Console" />
-      <Cell shortcut="⇧ + N" text="Launch Network" />
-      <Cell shortcut="⇧ + P" text="Launch Performance" />
-      <Cell shortcut="⇧ + R" text="Launch State" />
-      <Cell shortcut="⇧ + E" text="Launch Events" />
-      <Cell shortcut="⇧ + F" text="Play Session in Fullscreen" />
-      <Cell shortcut="Space" text="Play/Pause Session" />
-      <Cell shortcut="⇧ + X" text="Launch X-Ray" />
-      <Cell shortcut="⇧ + A" text="Launch User Actions" />
-      <Cell shortcut="⇧ + I" text="Launch More User Info" />
-      <Cell shortcut="⇧ + M" text="Launch Options Menu" />
-      <Cell shortcut="⇧ + >" text="Play Next Session" />
-      <Cell shortcut="⇧ + <" text="Play Previous Session" />
-      <Cell shortcut="→" text="Skip Forward" />
-      <Cell shortcut="←" text="Skip Backward" />
-      <Cell shortcut="↑" text="Playback Speed Up" />
-      <Cell shortcut="↓" text="Playback Speed Down" />
+    <div className={'p-4 overflow-y-auto h-screen'}>
+      <div className={'mb-4 font-semibold text-xl'}>Keyboard Shortcuts</div>
+      <div className=" grid grid-cols-2 grid-flow-row-dense auto-cols-max gap-4 justify-items-start">
+        <Cell shortcut="⇧ + C" text="Launch Console" />
+        <Cell shortcut="⇧ + N" text="Launch Network" />
+        <Cell shortcut="⇧ + P" text="Launch Performance" />
+        <Cell shortcut="⇧ + R" text="Launch State" />
+        <Cell shortcut="⇧ + E" text="Launch Events" />
+        <Cell shortcut="⇧ + F" text="Play Session in Fullscreen" />
+        <Cell shortcut="Space" text="Play/Pause Session" />
+        <Cell shortcut="⇧ + X" text="Launch X-Ray" />
+        <Cell shortcut="⇧ + A" text="Launch User Actions" />
+        <Cell shortcut="⇧ + I" text="Launch More User Info" />
+        <Cell shortcut="⇧ + M" text="Launch Options Menu" />
+        <Cell shortcut="⇧ + >" text="Play Next Session" />
+        <Cell shortcut="⇧ + <" text="Play Previous Session" />
+        <Cell shortcut="→" text="Skip Forward" />
+        <Cell shortcut="←" text="Skip Backward" />
+        <Cell shortcut="↑" text="Playback Speed Up" />
+        <Cell shortcut="↓" text="Playback Speed Down" />
+      </div>
     </div>
   );
 }
 
 function KeyboardHelp() {
+  const { showModal } = useModal();
   return (
-    <Popover
-      title={<div className={'w-full text-center font-semibold'}>Keyboard Shortcuts</div>}
-      content={<ShortcutGrid />}
+    <Button
+      size={'small'}
+      className={'flex items-center justify-center'}
+      onClick={() => {
+        showModal(<ShortcutGrid />, { right: true, width: 420 })
+      }}
     >
-      <Button
-        size={'small'}
-        className={'flex items-center justify-center'}
-      >
-        <Icon name={'keyboard'} size={21} color={'black'} />
-      </Button>
-    </Popover>
+      <Icon name={'keyboard'} size={21} color={'black'} />
+    </Button>
   );
 }