feat: styling fixes

src/components/CustomNode/ObjectNode.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { CustomNodeProps } from "src/components/CustomNode";
 import * as Styled from "./styles";
 
-const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
+export const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
   const { text, width, height, data } = node;
   const ref = React.useRef(null);
 
@@ -28,10 +28,4 @@ const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
       })}
     </Styled.StyledForeignObject>
   );
-};
-
-function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
-  return String(prev.node.text) === String(next.node.text) && prev.node.width === next.node.width;
-}
-
-export default React.memo(ObjectNode, propsAreEqual);
+};

src/components/CustomNode/TextNode.tsx

@@ -40,7 +40,7 @@ const StyledImage = styled.img`
   background: ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
 `;
 
-const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
+export const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
   const {
     id,
     text,
@@ -105,9 +105,3 @@ const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }
     </Styled.StyledForeignObject>
   );
 };
-
-function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
-  return prev.node.text === next.node.text && prev.node.width === next.node.width;
-}
-
-export default React.memo(TextNode, propsAreEqual);

src/components/CustomNode/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Node, NodeProps } from "reaflow";
-import ObjectNode from "./ObjectNode";
-import TextNode from "./TextNode";
+import { ObjectNode } from "./ObjectNode";
+import { TextNode } from "./TextNode";
 
 export interface CustomNodeProps {
   node: NodeData;
@@ -17,7 +17,7 @@ const rootProps = {
   ry: 50,
 };
 
-export const CustomNode = (nodeProps: NodeProps) => {
+const NodeComponent = (nodeProps: NodeProps) => {
   const { text, data } = nodeProps.properties;
 
   return (
@@ -34,3 +34,13 @@ export const CustomNode = (nodeProps: NodeProps) => {
     </Node>
   );
 };
+
+export const CustomNode = React.memo(NodeComponent, (prev, next) => {
+  return (
+    String(prev.properties.text) === String(next.properties.text) &&
+    prev.properties.width === next.properties.width &&
+    prev.properties.height === next.properties.height &&
+    prev.x === next.x &&
+    prev.y === next.y
+  );
+});

src/constants/globalStyle.ts

@@ -38,6 +38,10 @@ const GlobalStyle = createGlobalStyle`
     display: none;
   }
 
+  .mantine-Modal-inner {
+    padding: 0;
+  }
+
   svg {
     vertical-align: text-top;
   }

src/containers/Editor/LiveEditor/GraphCanvas.tsx

@@ -5,11 +5,11 @@ import useGraph from "src/store/useGraph";
 
 export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
   const [isNodeModalVisible, setNodeModalVisible] = React.useState(false);
+  const openNodeModal = React.useCallback(() => setNodeModalVisible(true), []);
 
   const collapsedNodes = useGraph(state => state.collapsedNodes);
   const collapsedEdges = useGraph(state => state.collapsedEdges);
 
-  const openNodeModal = React.useCallback(() => setNodeModalVisible(true), []);
 
   React.useEffect(() => {
     const nodeList = collapsedNodes.map(id => `[id$="node-${id}"]`);