Canvas: Center icons on details panel
Change-Id: I8ef607f3bf756e028ddab00f79e4ec17bd4582bd
diff --git a/apps/canvas/front/src/components/details.tsx b/apps/canvas/front/src/components/details.tsx
index cb7d7fe..b7a0049 100644
--- a/apps/canvas/front/src/components/details.tsx
+++ b/apps/canvas/front/src/components/details.tsx
@@ -48,8 +48,8 @@
{index > 0 && <Separator className="my-2" />}
<AccordionItem key={n.id} value={n.id} className="px-3">
<AccordionTrigger>
- <div className="flex flex-row space-x-2">
- {Icon(n.type)}
+ <div className="flex flex-row space-x-2 items-center">
+ <Icon type={n.type} />
<span>{nodeLabel(n)}</span>
</div>
</AccordionTrigger>
diff --git a/apps/canvas/front/src/components/icon.tsx b/apps/canvas/front/src/components/icon.tsx
index a615d79..c56a69e 100644
--- a/apps/canvas/front/src/components/icon.tsx
+++ b/apps/canvas/front/src/components/icon.tsx
@@ -7,24 +7,29 @@
import { PiNetwork } from "react-icons/pi";
import { AiOutlineGlobal } from "react-icons/ai";
-export function Icon(type: NodeType | undefined): ReactElement {
+type Props = {
+ type: NodeType | undefined;
+ className?: string;
+};
+
+export function Icon({ type, className }: Props): ReactElement {
switch (type) {
case "app":
- return <GrServices />;
+ return <GrServices className={className} />;
case "github":
- return <SiGithub />;
+ return <SiGithub className={className} />;
case "gateway-https":
- return <TbWorldWww />;
+ return <TbWorldWww className={className} />;
case "gateway-tcp":
- return <PiNetwork />;
+ return <PiNetwork className={className} />;
case "mongodb":
- return <SiMongodb />;
+ return <SiMongodb className={className} />;
case "postgresql":
- return <SiPostgresql />;
+ return <SiPostgresql className={className} />;
case "volume":
- return <GoFileDirectoryFill />;
+ return <GoFileDirectoryFill className={className} />;
case "network":
- return <AiOutlineGlobal />;
+ return <AiOutlineGlobal className={className} />;
default:
throw new Error(`MUST NOT REACH! ${type}`);
}
diff --git a/apps/canvas/front/src/components/node-rect.tsx b/apps/canvas/front/src/components/node-rect.tsx
index 257353e..362dc54 100644
--- a/apps/canvas/front/src/components/node-rect.tsx
+++ b/apps/canvas/front/src/components/node-rect.tsx
@@ -47,7 +47,9 @@
}, [selected, hasFatal, hasWarning, state, setClasses, setStateClasses]);
return (
<div className={classes.join(" ")}>
- <div style={{ position: "absolute", top: "5px", left: "5px" }}>{Icon(p.type)}</div>
+ <div style={{ position: "absolute", top: "5px", left: "5px" }}>
+ <Icon type={p.type} />
+ </div>
<div
style={{
position: "absolute",
diff --git a/apps/canvas/front/src/components/resources.tsx b/apps/canvas/front/src/components/resources.tsx
index a07eb86..715f878 100644
--- a/apps/canvas/front/src/components/resources.tsx
+++ b/apps/canvas/front/src/components/resources.tsx
@@ -45,7 +45,7 @@
onClick={onResourceAdd(item)}
style={{ justifyContent: "flex-start" }}
>
- {Icon(item.type)}
+ <Icon type={item.type} />
{item.title}
</Button>
))}