improve node readability

src/components/CustomNode/styles.tsx

@@ -24,6 +24,10 @@ export const StyledText = styled.pre<{ width: number; height: number }>`
 export const StyledForeignObject = styled.foreignObject`
   pointer-events: none;
 
+  * {
+    font-family: "Roboto Mono", monospace;
+  }
+
   &.searched {
     border: 2px solid ${({ theme }) => theme.TEXT_POSITIVE};
     border-radius: 2px;
@@ -39,12 +43,13 @@ export const StyledKey = styled.span<{
   objectKey?: boolean;
   parent?: boolean;
 }>`
+  font-weight: bold;
   color: ${({ theme, objectKey, parent }) =>
-    parent ? theme.ORANGE : objectKey ? "#5c87ff" : theme.TEXT_POSITIVE};
+    parent ? theme.NODE_KEY : objectKey ? "#5c87ff" : theme.TEXT_POSITIVE};
 `;
 
 export const StyledRow = styled.span<{ width: number }>`
-  height: fit-content;
+  height: 18px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

src/pages/_document.tsx

@@ -52,7 +52,7 @@ class MyDocument extends Document {
             crossOrigin="anonymous"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;500;600;700&family=PT+Sans:wght@400;500;700&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;500;600;700&family=PT+Sans:wght@400;500;700&family=Roboto+Mono:wght@500&display=swap"
             rel="stylesheet"
           />
         </Head>