From 49f366a653901c76727e1b2a4c1612dd61576cf7 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Tue, 5 Dec 2023 10:54:36 +0100
Subject: [PATCH] fix(overlay): Open overlay on Ctrl+F12 instead of
 Ctrl/Cmd+Shift+F12

---
 .changeset/cold-icons-accept.md         |  5 +++++
 packages/overlay/src/App.tsx            |  6 +-----
 packages/overlay/src/lib/useKeyPress.ts | 12 +++++++++---
 3 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/cold-icons-accept.md

diff --git a/.changeset/cold-icons-accept.md b/.changeset/cold-icons-accept.md
new file mode 100644
index 000000000..c8e03eb51
--- /dev/null
+++ b/.changeset/cold-icons-accept.md
@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': patch
+---
+
+fix(overlay): Open overlay on Ctrl+F12 instead of Ctrl/Cmd+Shift+F12
diff --git a/packages/overlay/src/App.tsx b/packages/overlay/src/App.tsx
index 51aaa5b5d..01e7da64e 100644
--- a/packages/overlay/src/App.tsx
+++ b/packages/overlay/src/App.tsx
@@ -26,11 +26,7 @@ export default function App({
   const [triggerButtonCount, setTriggerButtonCount] = useState<NotificationCount>({ count: 0, severe: false });
   const [isOpen, setOpen] = useState(openOnInit);
 
-  useKeyPress(['ctrlKey', 'shiftKey', 's'], () => {
-    setOpen(prev => !prev);
-  });
-
-  useKeyPress(['metaKey', 'shiftKey', 's'], () => {
+  useKeyPress(['ctrlKey', 'F12'], () => {
     setOpen(prev => !prev);
   });
 
diff --git a/packages/overlay/src/lib/useKeyPress.ts b/packages/overlay/src/lib/useKeyPress.ts
index 1a83e1bff..4f1b1810f 100644
--- a/packages/overlay/src/lib/useKeyPress.ts
+++ b/packages/overlay/src/lib/useKeyPress.ts
@@ -9,11 +9,15 @@ import { useEffect } from 'react';
 export default function useKeyPress(keys: string[], action: () => void, propagate = false) {
   useEffect(() => {
     function onKeyup(e: KeyboardEvent) {
-      if (!propagate) e.stopPropagation();
+      if (!propagate) {
+        e.stopPropagation();
+      }
 
       if (
         keys.every((key: string) => {
-          if (key in e) return e[key as keyof KeyboardEvent];
+          if (key in e) {
+            return e[key as keyof KeyboardEvent];
+          }
           return e.key.toLowerCase() === key.toLowerCase();
         })
       ) {
@@ -23,6 +27,8 @@ export default function useKeyPress(keys: string[], action: () => void, propagat
 
     window.addEventListener('keyup', onKeyup);
 
-    return () => window.removeEventListener('keyup', onKeyup);
+    return () => {
+      window.removeEventListener('keyup', onKeyup);
+    };
   }, [keys, action, propagate]);
 }