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,