From 420bf4ba4dc403ac512bac099bc566ed7fa0bd4b Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 10 Jun 2024 20:32:45 -0300
Subject: [PATCH] Refactor: Decrease visual shortcut font size

---
 .../components/renderIconComponent/index.tsx   | 18 +++++++++---------
 .../components/nodeToolbarComponent/index.tsx  |  4 ++--
 .../toolbarSelectItem/index.tsx                |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/renderIconComponent/index.tsx b/src/frontend/src/components/renderIconComponent/index.tsx
index 241566f93..39b1e7908 100644
--- a/src/frontend/src/components/renderIconComponent/index.tsx
+++ b/src/frontend/src/components/renderIconComponent/index.tsx
@@ -12,35 +12,35 @@ export default function RenderIcons({
   shortcutWPlus: string[];
 }): JSX.Element {
   return hasShift ? (
-    <>
+    <span className="flex gap-0.5 text-xs">
       {isMac ? (
-        <ForwardedIconComponent name="Command" className="h-4 w-4" />
+        <ForwardedIconComponent name="Command" className="h-3 w-3" />
       ) : (
         filteredShortcut[0]
       )}
-      <ForwardedIconComponent name="ArrowBigUp" className="ml-1 h-5 w-5" />
+      <ForwardedIconComponent name="ArrowBigUp" className=" h-4 w-4" />
       {filteredShortcut.map((key, idx) => {
         if (idx > 0) {
-          return <span className="ml-1"> {key.toUpperCase()} </span>;
+          return <span className=""> {key.toUpperCase()} </span>;
         }
       })}
-    </>
+    </span>
   ) : (
-    <>
+    <span className="flex gap-1 text-xs">
       {shortcutWPlus[0].toLowerCase() === "space" ? (
         "Space"
       ) : shortcutWPlus[0].length <= 1 ? (
         shortcutWPlus[0]
       ) : isMac ? (
-        <ForwardedIconComponent name="Command" className="h-4 w-4" />
+        <ForwardedIconComponent name="Command" className="h-3 w-3" />
       ) : (
         shortcutWPlus[0]
       )}
       {shortcutWPlus.map((key, idx) => {
         if (idx > 0) {
-          return <span className="ml-0.5"> {key.toUpperCase()} </span>;
+          return <span className=""> {key.toUpperCase()} </span>;
         }
       })}
-    </>
+    </span>
   );
 }
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 49636c4cb..5077e9318 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -352,7 +352,7 @@ export default function NodeToolbarComponent({
       <div className="flex justify-center">
         <span> {name} </span>
         <span
-          className={`ml-3 flex items-center rounded-sm bg-muted px-1 py-[0.2] text-muted-foreground`}
+          className={`ml-3 flex items-center rounded-sm bg-muted px-1.5 py-[0.1em] text-lg text-muted-foreground`}
         >
           <RenderIcons
             isMac={isMac}
@@ -707,7 +707,7 @@ export default function NodeToolbarComponent({
                   />{" "}
                   <span className="">Delete</span>{" "}
                   <span
-                    className={`justify absolute right-2 top-2 flex items-center rounded-sm px-1 py-[0.2] ${deleteIsFocus ? " " : "bg-muted"}`}
+                    className={` absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2] ${deleteIsFocus ? " " : "bg-muted"}`}
                   >
                     <IconComponent
                       name="Delete"
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 ac93c928b..fa85ce379 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
@@ -19,7 +19,7 @@ export default function ToolbarSelectItem({
     }
   });
   const filteredShortcut = fixedShortcut.filter(
-    (key) => !key.toLowerCase().includes("shift")
+    (key) => !key.toLowerCase().includes("shift"),
   );
   let shortcutWPlus: string[] = [];
   if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
@@ -38,7 +38,7 @@ export default function ToolbarSelectItem({
         {value}
       </span>
       <span
-        className={`absolute right-2 top-[0.43em] flex items-center rounded-sm bg-muted px-1 py-[0.2] text-muted-foreground `}
+        className={`absolute right-2 top-[0.43em] flex items-center rounded-sm bg-muted px-1.5 py-[0.1em] text-muted-foreground `}
       >
         <RenderIcons
           isMac={isMac}