From 6ad6deb152a7d4ef9f773d6be9546637792d3a2e Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Sat, 11 Mar 2023 18:21:45 +0300
Subject: [PATCH] feat: styling fixes

---
 src/components/CustomNode/ObjectNode.tsx         | 10 ++--------
 src/components/CustomNode/TextNode.tsx           |  8 +-------
 src/components/CustomNode/index.tsx              | 16 +++++++++++++---
 src/constants/globalStyle.ts                     |  4 ++++
 src/containers/Editor/LiveEditor/GraphCanvas.tsx |  2 +-
 5 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/CustomNode/ObjectNode.tsx b/src/components/CustomNode/ObjectNode.tsx
index b2a30ac..7aed3ed 100644
--- a/src/components/CustomNode/ObjectNode.tsx
+++ b/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);
+};
\ No newline at end of file
diff --git a/src/components/CustomNode/TextNode.tsx b/src/components/CustomNode/TextNode.tsx
index 16ff9e3..2e421ec 100644
--- a/src/components/CustomNode/TextNode.tsx
+++ b/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);
diff --git a/src/components/CustomNode/index.tsx b/src/components/CustomNode/index.tsx
index d5e5579..26aac93 100644
--- a/src/components/CustomNode/index.tsx
+++ b/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
+  );
+});
diff --git a/src/constants/globalStyle.ts b/src/constants/globalStyle.ts
index 14dfb3b..5ce1929 100644
--- a/src/constants/globalStyle.ts
+++ b/src/constants/globalStyle.ts
@@ -38,6 +38,10 @@ const GlobalStyle = createGlobalStyle`
     display: none;
   }
 
+  .mantine-Modal-inner {
+    padding: 0;
+  }
+
   svg {
     vertical-align: text-top;
   }
diff --git a/src/containers/Editor/LiveEditor/GraphCanvas.tsx b/src/containers/Editor/LiveEditor/GraphCanvas.tsx
index 6702284..7503a66 100644
--- a/src/containers/Editor/LiveEditor/GraphCanvas.tsx
+++ b/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}"]`);