Canvas: Improve diagram styling
Change-Id: If1c3d48cd94b63de86c8d7ecdb40974af951367f
diff --git a/apps/canvas/front/src/App.css b/apps/canvas/front/src/App.css
index 4444564..9697204 100644
--- a/apps/canvas/front/src/App.css
+++ b/apps/canvas/front/src/App.css
@@ -1,3 +1,20 @@
+body {
+ overflow: hidden;
+}
+
+.react-flow__handle {
+ min-width: initial !important;
+ min-height: initial !important;
+ height: 4px !important;
+ width: 4px !important;
+ border: none !important;
+}
+
+.react-flow__edge-path {
+ stroke: black !important;
+
+}
+
.react-flow__handle.connectingto {
background: #ff6060;
}
@@ -5,7 +22,3 @@
.react-flow__handle.valid {
background: #55dd99;
}
-
-body {
- overflow: hidden;
-}
\ No newline at end of file
diff --git a/apps/canvas/front/src/components/node-rect.tsx b/apps/canvas/front/src/components/node-rect.tsx
index 99dbd82..94b7fac 100644
--- a/apps/canvas/front/src/components/node-rect.tsx
+++ b/apps/canvas/front/src/components/node-rect.tsx
@@ -19,6 +19,10 @@
const [stateClasses, setStateClasses] = useState<string[]>([]);
useEffect(() => {
const classes = ["px-4", "py-2", "rounded-md", "bg-white"];
+ classes.push("border");
+ if (selected) {
+ classes.push("shadow-xl");
+ }
if (hasFatal) {
classes.push("border-red-500");
} else if (hasWarning) {
@@ -26,11 +30,6 @@
} else {
classes.push("border-black");
}
- if (selected) {
- classes.push("border-2");
- } else {
- classes.push("border");
- }
setClasses(classes);
const stateClasses: string[] = [];
if (state === "processing") {