From 5dd0df05a00e260b486ba0f499808482f80e81b2 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jun 2024 15:16:26 -0300
Subject: [PATCH] Changed status circle to icon

---
 .../src/CustomNodes/GenericNode/index.tsx     | 50 +++++++++----------
 .../CustomNodes/hooks/use-icons-status.tsx    | 36 +++++++++----
 src/frontend/src/components/ui/checkmark.tsx  |  2 +-
 src/frontend/src/utils/styleUtils.ts          |  2 +
 4 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index bcb14e890..6838d3a42 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -110,7 +110,7 @@ export default function GenericNode({
   };
 
   const renderIconStatus = () => {
-    return iconStatus;
+    return <div className="cursor-help">{iconStatus}</div>;
   };
 
   const getNodeBorderClassName = (
@@ -518,30 +518,6 @@ export default function GenericNode({
             {showNode && (
               <>
                 <div className="flex flex-shrink-0 items-center gap-2">
-                  <Button
-                    onClick={() => {
-                      if (buildStatus === BuildStatus.BUILDING || isBuilding)
-                        return;
-                      setValidationStatus(null);
-                      buildFlow({ stopNodeId: data.id });
-                    }}
-                    variant="none"
-                    size="none"
-                    className="group p-1"
-                  >
-                    <div
-                      data-testid={
-                        `button_run_` + data?.node?.display_name.toLowerCase()
-                      }
-                    >
-                      <IconComponent
-                        name="Play"
-                        className={
-                          "h-5 w-5 fill-current stroke-2 text-muted-foreground transition-all group-hover:text-medium-indigo group-hover/node:opacity-100"
-                        }
-                      />
-                    </div>
-                  </Button>
                   <ShadTooltip
                     content={
                       buildStatus === BuildStatus.BUILDING ? (
@@ -573,6 +549,30 @@ export default function GenericNode({
                   >
                     {renderIconStatus()}
                   </ShadTooltip>
+                  <Button
+                    onClick={() => {
+                      if (buildStatus === BuildStatus.BUILDING || isBuilding)
+                        return;
+                      setValidationStatus(null);
+                      buildFlow({ stopNodeId: data.id });
+                    }}
+                    variant="none"
+                    size="none"
+                    className="group p-1"
+                  >
+                    <div
+                      data-testid={
+                        `button_run_` + data?.node?.display_name.toLowerCase()
+                      }
+                    >
+                      <IconComponent
+                        name="Play"
+                        className={
+                          "h-5 w-5 fill-current stroke-2 text-muted-foreground transition-all group-hover:text-medium-indigo group-hover/node:opacity-100"
+                        }
+                      />
+                    </div>
+                  </Button>
                 </div>
               </>
             )}
diff --git a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
index 807c25aa8..923943e03 100644
--- a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
@@ -1,4 +1,7 @@
+import ForwardedIconComponent from "../../components/genericIconComponent";
+import Checkmark from "../../components/ui/checkmark";
 import Loading from "../../components/ui/loading";
+import Xmark from "../../components/ui/xmark";
 import { BuildStatus } from "../../constants/enums";
 import { VertexBuildTypeAPI } from "../../types/api";
 import { cn } from "../../utils/utils";
@@ -21,18 +24,29 @@ const useIconStatus = (
       return <Loading className="text-medium-indigo" />;
     } else {
       return (
-        <div
-          className={cn(
-            "h-4 w-4 shrink-0 cursor-pointer rounded-full",
-            conditionSuccess
-              ? "bg-status-green"
-              : conditionInactive
-                ? "bg-status-gray"
-                : conditionError
-                  ? "bg-status-red"
-                  : "bg-muted-foreground/40",
+        <>
+          {conditionSuccess ? (
+            <Checkmark
+              className="h-6 w-6 stroke-2 text-status-green transition-all"
+              isVisible={true}
+            />
+          ) : conditionInactive ? (
+            <ForwardedIconComponent
+              name="Ellipsis"
+              className="h-6 w-6 fill-current stroke-2 text-status-gray opacity-30"
+            />
+          ) : conditionError ? (
+            <Xmark
+              isVisible={true}
+              className="h-6 w-6 fill-current stroke-2 text-status-red"
+            />
+          ) : (
+            <ForwardedIconComponent
+              name="Ellipsis"
+              className="h-6 w-6 fill-current stroke-2 text-status-gray opacity-70"
+            />
           )}
-        />
+        </>
       );
     }
   };
diff --git a/src/frontend/src/components/ui/checkmark.tsx b/src/frontend/src/components/ui/checkmark.tsx
index 3a6ba7208..e28b66963 100644
--- a/src/frontend/src/components/ui/checkmark.tsx
+++ b/src/frontend/src/components/ui/checkmark.tsx
@@ -7,7 +7,7 @@ export default function Checkmark({ initial = true, isVisible, className }) {
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
-          strokeWidth={1.5}
+          strokeWidth={2}
           stroke="currentColor"
           className={"CheckIcon " + className}
         >
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index d9453641e..43e92bfe2 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -40,6 +40,7 @@ import {
   Download,
   DownloadCloud,
   Edit,
+  Ellipsis,
   Eraser,
   ExternalLink,
   Eye,
@@ -530,6 +531,7 @@ export const nodeIconsLucide: iconsType = {
   ScreenShare,
   Code,
   Type,
+  Ellipsis,
   Braces,
   FlaskConical,
   AlertCircle,