From b48fe2cb5cc6b8e855dc1b3dc705fbfc22050526 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 4 Mar 2024 16:43:26 -0300
Subject: [PATCH] Refactor: Make visual shortcut adapt to user OS

---
 .../components/menuBar/index.tsx              | 24 ++++---
 .../components/nodeToolbarComponent/index.tsx | 69 ++++++++++++++-----
 2 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 42a8af71a..e21c13ba4 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -109,10 +109,14 @@ export const MenuBar = ({
             >
               <IconComponent name="Undo" className="header-menu-options " />
               Undo
-              <IconComponent
-                name="Command"
-                className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-              ></IconComponent>
+              {navigator.userAgent.toUpperCase().includes("MAC") ? (
+                      <IconComponent
+                      name="Command"
+                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                    ></IconComponent>
+                    ) : (
+                      <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
+                    )}
               <span className="absolute right-2 top-[0.4em]">Z</span>
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -123,10 +127,14 @@ export const MenuBar = ({
             >
               <IconComponent name="Redo" className="header-menu-options " />
               Redo
-              <IconComponent
-                name="Command"
-                className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-              ></IconComponent>
+              {navigator.userAgent.toUpperCase().includes("MAC") ? (
+                      <IconComponent
+                      name="Command"
+                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                    ></IconComponent>
+                    ) : (
+                      <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
+                    )}
               <span className="absolute right-2 top-[0.4em]">Y</span>
             </DropdownMenuItem>
           </DropdownMenuContent>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 83585c304..3d7d6610c 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -420,10 +420,14 @@ export default function NodeToolbarComponent({
                       className="relative top-0.5 mr-2 h-4 w-4 "
                     />{" "}
                     <span className="">Edit</span>{" "}
-                    <IconComponent
+                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
+                      <IconComponent
                       name="Command"
                       className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
                     ></IconComponent>
+                    ) : (
+                      <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
+                    )}
                     <span className="absolute right-2 top-[0.46em]">E</span>
                   </div>
                 </SelectItem>
@@ -437,10 +441,14 @@ export default function NodeToolbarComponent({
                       className="relative top-0.5 mr-2 h-4 w-4 "
                     />{" "}
                     <span className="">Save</span>{" "}
-                    <IconComponent
+                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
+                      <IconComponent
                       name="Command"
                       className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
                     ></IconComponent>
+                    ) : (
+                      <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
+                    )}
                     <span className="absolute right-2 top-[0.45em]">S</span>
                   </div>
                 </SelectItem>
@@ -453,10 +461,14 @@ export default function NodeToolbarComponent({
                         className="relative top-0.5 mr-2 h-4 w-4 "
                       />{" "}
                       <span className="">Save</span>{" "}
+                      {navigator.userAgent.toUpperCase().includes("MAC") ? (
                       <IconComponent
-                        name="Command"
-                        className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                      ></IconComponent>
+                      name="Command"
+                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                    ></IconComponent>
+                    ) : (
+                      <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
+                    )}
                       <span className="absolute right-2 top-[0.46em]">S</span>
                     </div>
                   </SelectItem>
@@ -469,10 +481,14 @@ export default function NodeToolbarComponent({
                     className="relative top-0.5 mr-2 h-4 w-4 "
                   />{" "}
                   <span className="">Copy</span>{" "}
-                  <IconComponent
-                    name="Command"
-                    className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                  ></IconComponent>
+                  {navigator.userAgent.toUpperCase().includes("MAC") ? (
+                      <IconComponent
+                      name="Command"
+                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                    ></IconComponent>
+                    ) : (
+                      <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
+                    )}
                   <span className="absolute right-2 top-[0.5em]">C</span>
                 </div>
               </SelectItem>
@@ -487,10 +503,15 @@ export default function NodeToolbarComponent({
                       className="relative top-0.5 -m-1 mr-1 h-6 w-6"
                     />{" "}
                     Share{" "}
-                    <IconComponent
+                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
+                      <IconComponent
                       name="Command"
-                      className="absolute right-[2rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
                     ></IconComponent>
+                    ) : (
+                      <span className="absolute right-[2.10rem] top-[0.43em] stroke-2">Ctrl</span>
+                    )}
+                    
                     <IconComponent
                       name="ArrowBigUp"
                       className="absolute right-[1.09rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
@@ -520,10 +541,14 @@ export default function NodeToolbarComponent({
                     className="relative top-0.5 mr-2 h-4 w-4 "
                   />{" "}
                   <span className="">Docs</span>{" "}
-                  <IconComponent
-                    name="Command"
-                    className="absolute right-[2rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                  ></IconComponent>
+                  {navigator.userAgent.toUpperCase().includes("MAC") ? (
+                      <IconComponent
+                      name="Command"
+                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                    ></IconComponent>
+                    ) : (
+                      <span className="absolute right-[2.10rem] top-[0.43em] stroke-2">Ctrl</span>
+                    )}
                   <IconComponent
                     name="ArrowBigUp"
                     className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
@@ -539,10 +564,14 @@ export default function NodeToolbarComponent({
                       className="relative top-0.5 mr-2 h-4 w-4"
                     />
                     {showNode ? "Minimize" : "Expand"}
-                    <IconComponent
+                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
+                      <IconComponent
                       name="Command"
-                      className="absolute right-[1.25rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
                     ></IconComponent>
+                    ) : (
+                      <span className="absolute right-[1.30rem] top-[0.40em] stroke-2">Ctrl + </span>
+                    )}
                     <span className="absolute right-2 top-[0.46em]">Q</span>
                   </div>
                 </SelectItem>
@@ -555,10 +584,14 @@ export default function NodeToolbarComponent({
                       className="relative top-0.5 mr-2 h-4 w-4 "
                     />{" "}
                     <span className="">Ungroup</span>{" "}
-                    <IconComponent
+                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
+                      <IconComponent
                       name="Command"
                       className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
                     ></IconComponent>
+                    ) : (
+                      <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
+                    )}
                     <span className="absolute right-2 top-[0.43em]">U</span>
                   </div>
                 </SelectItem>