From 9f9f30b760c75af238eb8c8b65875bccbeab20a2 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Sun, 15 Jan 2023 14:36:42 +0300
Subject: [PATCH] improve highlight styling

---
 src/components/CustomNode/TextNode.tsx | 16 ++++++++--------
 src/components/CustomNode/styles.tsx   |  1 -
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/CustomNode/TextNode.tsx b/src/components/CustomNode/TextNode.tsx
index f9dc3b1..6d49480 100644
--- a/src/components/CustomNode/TextNode.tsx
+++ b/src/components/CustomNode/TextNode.tsx
@@ -22,7 +22,7 @@ const StyledExpand = styled.button`
   }
 `;
 
-const StyledTextNodeWrapper = styled.div<{ hasCollapse: boolean }>`
+const StyledTextNodeWrapper = styled.span<{ hasCollapse: boolean }>`
   display: flex;
   justify-content: ${({ hasCollapse }) => (hasCollapse ? "space-between" : "center")};
   align-items: center;
@@ -74,13 +74,13 @@ const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }
           <StyledImage src={text} width="70" height="70" />
         </StyledImageWrapper>
       ) : (
-        <StyledTextNodeWrapper hasCollapse={data.parent && hideCollapse}>
-          <Styled.StyledKey
-            data-x={x}
-            data-y={y}
-            data-key={JSON.stringify(text)}
-            parent={data.parent}
-          >
+        <StyledTextNodeWrapper
+          hasCollapse={data.parent && hideCollapse}
+          data-x={x}
+          data-y={y}
+          data-key={JSON.stringify(text)}
+        >
+          <Styled.StyledKey parent={data.parent}>
             <Styled.StyledLinkItUrl>
               {JSON.stringify(text).replaceAll('"', "")}
             </Styled.StyledLinkItUrl>
diff --git a/src/components/CustomNode/styles.tsx b/src/components/CustomNode/styles.tsx
index 8a231e2..02d71dd 100644
--- a/src/components/CustomNode/styles.tsx
+++ b/src/components/CustomNode/styles.tsx
@@ -36,7 +36,6 @@ export const StyledForeignObject = styled.foreignObject<{
   }
 
   .highlight {
-    border: 2px dashed #ff2970;
     background: rgba(255, 214, 0, 0.3);
   }