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
{iconStatus}
;
};
const getNodeBorderClassName = (
@@ -518,30 +518,6 @@ export default function GenericNode({
{showNode && (
<>
-
{renderIconStatus()}
+
>
)}
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 ;
} else {
return (
-
+ {conditionSuccess ? (
+
+ ) : conditionInactive ? (
+
+ ) : conditionError ? (
+
+ ) : (
+
)}
- />
+ >
);
}
};
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,