JSON visualizer: Highlight the parent nodes of in-use nodes (#11373)

https://github.com/user-attachments/assets/5f31023d-b24f-40c8-a061-ffc0d02b63b0

Closes https://github.com/twentyhq/core-team-issues/issues/715

packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx

@@ -27,9 +27,11 @@ const MotionIconChevronDown = motion.create(IconChevronDown);
 export const JsonArrow = ({
   isOpen,
   onClick,
+  variant,
 }: {
   isOpen: boolean;
   onClick: () => void;
+  variant?: 'blue';
 }) => {
   const theme = useTheme();
 
@@ -44,7 +46,9 @@ export const JsonArrow = ({
 
       <MotionIconChevronDown
         size={theme.icon.size.md}
-        color={theme.font.color.secondary}
+        color={
+          variant === 'blue' ? theme.color.blue : theme.font.color.secondary
+        }
         initial={false}
         animate={{ rotate: isOpen ? 0 : -90 }}
         transition={{ duration: ANIMATION.duration.normal }}

packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx

@@ -8,7 +8,7 @@ const StyledText = styled.span<{
     highlighting === 'blue'
       ? theme.adaptiveColors.blue4
       : highlighting === 'red'
-        ? theme.font.color.danger
+        ? theme.adaptiveColors.red4
         : theme.font.color.tertiary};
 `;