From 89e74690328e626d1efbae0b3198bef5d35025d1 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 11 Dec 2023 00:18:14 -0300
Subject: [PATCH] Fixed Share button position and icon

---
 .../components/genericIconComponent/index.tsx | 11 +++++--
 src/frontend/src/modals/shareModal/index.tsx  |  2 +-
 .../extraSidebarComponent/index.tsx           | 31 ++++++++++---------
 .../components/nodeToolbarComponent/index.tsx |  2 +-
 src/frontend/src/types/components/index.ts    |  1 +
 src/frontend/src/utils/styleUtils.ts          |  2 ++
 6 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx
index 317614b6a..62299bdf6 100644
--- a/src/frontend/src/components/genericIconComponent/index.tsx
+++ b/src/frontend/src/components/genericIconComponent/index.tsx
@@ -4,13 +4,20 @@ import { nodeIconsLucide } from "../../utils/styleUtils";
 
 const ForwardedIconComponent = forwardRef(
   (
-    { name, className, iconColor, stroke, id = "" }: IconComponentProps,
+    {
+      name,
+      className,
+      iconColor,
+      stroke,
+      strokeWidth,
+      id = "",
+    }: IconComponentProps,
     ref
   ) => {
     const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
 
     const style = {
-      strokeWidth: 1.5,
+      strokeWidth: strokeWidth ?? 1.5,
       ...(stroke && { stroke: stroke }),
       ...(iconColor && { color: iconColor, stroke: stroke }),
     };
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index 8d64baf69..be4414354 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -209,7 +209,7 @@ export default function ShareModal({
         >
           <span className="pr-2">Share</span>
           <IconComponent
-            name="Share"
+            name="Forward"
             className="h-6 w-6 pl-1 text-foreground"
             aria-hidden="true"
           />
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 43ddf9946..3a5a18bc9 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -193,14 +193,15 @@ export default function ExtraSidebar(): JSX.Element {
         <button
           disabled={!hasApiKey || !validApiKey || !hasStore}
           className={classNames(
-            "extra-side-bar-buttons gap-2 text-sm",
+            "extra-side-bar-buttons gap-1.5 text-sm font-semibold",
             !hasApiKey || !validApiKey || !hasStore
               ? "button-disable  cursor-default text-muted-foreground"
               : ""
           )}
         >
           <IconComponent
-            name="Share"
+            name="Forward"
+            strokeWidth={2.5}
             className={classNames(
               "side-bar-button-size",
               !hasApiKey || !validApiKey || !hasStore
@@ -231,6 +232,19 @@ export default function ExtraSidebar(): JSX.Element {
   return (
     <div className="side-bar-arrangement">
       <div className="side-bar-buttons-arrangement">
+        {hasStore && (
+          <ShadTooltip
+            content={
+              !hasApiKey || !validApiKey
+                ? "Please review your API key."
+                : "Share"
+            }
+            side="top"
+            styleClasses="cursor-default"
+          >
+            <div className="side-bar-button">{ModalMemo}</div>
+          </ShadTooltip>
+        )}
         <div className="side-bar-button">
           <ShadTooltip content="Import" side="top">
             <button
@@ -300,19 +314,6 @@ export default function ExtraSidebar(): JSX.Element {
             </ShadTooltip>
           )}
         </div>
-        {hasStore && (
-          <ShadTooltip
-            content={
-              !hasApiKey || !validApiKey
-                ? "Please review your API key."
-                : "Share"
-            }
-            side="top"
-            styleClasses="cursor-default"
-          >
-            <div className="side-bar-button">{ModalMemo}</div>
-          </ShadTooltip>
-        )}
       </div>
       <Separator />
       <div className="side-bar-search-div-placement">
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 5c0a502f0..7b9aed562 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -250,7 +250,7 @@ export default function NodeToolbarComponent({
                 >
                   <div className="flex">
                     <IconComponent
-                      name="Share"
+                      name="Forward"
                       className="relative top-0.5 mr-2 h-4 w-4"
                     />{" "}
                     Share{" "}
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index b009bb0b8..739e69cf0 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -233,6 +233,7 @@ export type IconComponentProps = {
   iconColor?: string;
   onClick?: () => void;
   stroke?: string;
+  strokeWidth?: number;
   id?: string;
 };
 
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 664ce8592..12855ae6c 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -35,6 +35,7 @@ import {
   FileUp,
   Fingerprint,
   FolderPlus,
+  Forward,
   Gift,
   GitBranchPlus,
   GitFork,
@@ -358,6 +359,7 @@ export const nodeIconsLucide: iconsType = {
   Minimize2,
   Maximize2,
   SaveAll,
+  Forward,
   Share2,
   Share,
   GitBranchPlus,