From c59542db19ccec8e6a0291492629c0eceed18d25 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Sun, 9 Jun 2024 19:00:09 -0300
Subject: [PATCH] Feat: add colorful padding to visual shortcut on toolbar

---
 .../components/PageComponent/index.tsx        | 22 ++++++++++---------
 .../toolbarSelectItem/index.tsx               |  4 +++-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index daec3f29a..c78fdf10d 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -59,6 +59,7 @@ export default function Page({
   flow: FlowType;
   view?: boolean;
 }): JSX.Element {
+  const preventDefault = true;
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const autoSaveCurrentFlow = useFlowsManagerStore(
     (state) => state.autoSaveCurrentFlow,
@@ -199,8 +200,9 @@ export default function Page({
   }
 
   function handleDuplicate(e: KeyboardEvent) {
-    const selectedNode = nodes.filter((obj) => obj.selected);
     e.preventDefault();
+    e.stopPropagation();
+    const selectedNode = nodes.filter((obj) => obj.selected);
     if (selectedNode.length > 0) {
       paste(
         { nodes: selectedNode, edges: [] },
@@ -267,23 +269,23 @@ export default function Page({
   const cutAction = useShortcutsStore((state) => state.cut);
   const pasteAction = useShortcutsStore((state) => state.paste);
   //@ts-ignore
-  useHotkeys(undoAction, handleUndo);
+  useHotkeys(undoAction, handleUndo, { preventDefault });
   //@ts-ignore
-  useHotkeys(redoAction, handleRedo);
+  useHotkeys(redoAction, handleRedo, { preventDefault });
   //@ts-ignore
-  useHotkeys(groupAction, handleGroup);
+  useHotkeys(groupAction, handleGroup, { preventDefault });
   //@ts-ignore
-  useHotkeys(duplicate, handleDuplicate);
+  useHotkeys(duplicate, handleDuplicate, { preventDefault });
   //@ts-ignore
-  useHotkeys(copyAction, handleCopy);
+  useHotkeys(copyAction, handleCopy, { preventDefault });
   //@ts-ignore
-  useHotkeys(cutAction, handleCut);
+  useHotkeys(cutAction, handleCut, { preventDefault });
   //@ts-ignore
-  useHotkeys(pasteAction, handlePaste);
+  useHotkeys(pasteAction, handlePaste, { preventDefault });
   //@ts-ignore
-  useHotkeys(deleteAction, handleDelete);
+  useHotkeys(deleteAction, handleDelete, { preventDefault });
   //@ts-ignore
-  useHotkeys("delete", handleDelete);
+  useHotkeys("delete", handleDelete, { preventDefault });
 
   useEffect(() => {
     setSHowCanvas(
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
index 0e4c44302..48a53aa24 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
@@ -35,7 +35,9 @@ export default function ToolbarSelectItem({
       <span className={`${icon === "Share3" ? "ml-[1.8em]" : " "}`}>
         {value}
       </span>
-      <span className={`absolute right-2 top-[0.43em] flex `}>
+      <span
+        className={`absolute right-2 top-[0.43em] flex items-center rounded-sm bg-muted px-1 py-[0.2] text-muted-foreground `}
+      >
         <RenderIcons
           isMac={isMac}
           hasShift={hasShift}