From eac0ee14f35455deb235cb8fecd98d6b6373c520 Mon Sep 17 00:00:00 2001
From: Lavender <lavender.chan@mongodb.com>
Date: Wed, 28 May 2025 11:20:08 +1000
Subject: [PATCH] bugfix/MIG-6831 Fix hover state of connectable nodes, fix
 disabled color

---
 src/components/field/field.tsx |  4 ++--
 src/components/node/node.tsx   | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/field/field.tsx b/src/components/field/field.tsx
index bc39f61..1111411 100644
--- a/src/components/field/field.tsx
+++ b/src/components/field/field.tsx
@@ -116,7 +116,7 @@ export const Field = ({
 
   const getTextColor = () => {
     if (isDisabled) {
-      return color[theme].text.disabled.default;
+      return internalTheme.node.disabledColor;
     } else {
       return color[theme].text.primary.default;
     }
@@ -124,7 +124,7 @@ export const Field = ({
 
   const getSecondaryTextColor = () => {
     if (isDisabled) {
-      return color[theme].text.disabled.default;
+      return internalTheme.node.disabledColor;
     } else {
       return color[theme].text.secondary.default;
     }
diff --git a/src/components/node/node.tsx b/src/components/node/node.tsx
index 6e3c59c..1f933b7 100644
--- a/src/components/node/node.tsx
+++ b/src/components/node/node.tsx
@@ -32,10 +32,10 @@ const NodeZoomedOutInner = styled.div`
   ${ellipsisTruncation}
 `;
 
-const NodeWrapper = styled.div<{ accent: string; color: string }>`
+const NodeWrapper = styled.div<{ accent: string; color: string; background: string }>`
   position: relative;
   font-family: ${fontFamilies.code};
-  background: ${props => props.theme.node.background};
+  background: ${props => props.background};
   color: ${props => props.color};
   overflow: hidden;
   border-left: 1px solid ${props => props.accent};
@@ -126,6 +126,14 @@ export const Node = ({
     }
   };
 
+  const getNodeBackground = () => {
+    if (isHovering) {
+      return theme.node.backgroundHover;
+    } else {
+      return theme.node.background;
+    }
+  };
+
   const isContextualZoom = zoom < ZOOM_THRESHOLD;
 
   const fromHandle = useStore(state => state.connection.fromHandle);
@@ -155,7 +163,7 @@ export const Node = ({
           type="target"
           zIndex={fromHandle ? 1 : 0}
         />
-        <NodeWrapper accent={getAccent()} color={getNodeColor()}>
+        <NodeWrapper accent={getAccent()} color={getNodeColor()} background={getNodeBackground()}>
           <NodeHeader background={getHeaderBackground()}>
             {!isContextualZoom && (
               <>