Merge pull request #88 from AykutSarac/colorize-values

Update Node Color Schema

src/components/CustomNode/ObjectNode.tsx

@@ -25,6 +25,7 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
                   data-y={y}
                   key={idx}
                   width={width}
+                  value={val[1]}
                 >
                   <Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
                   {val[1]}

src/components/CustomNode/styles.tsx

@@ -1,4 +1,10 @@
-import styled from "styled-components";
+import styled, { DefaultTheme } from "styled-components";
+
+function getTypeColor(value: string, theme: DefaultTheme) {
+  if (!Number.isNaN(+value)) return "#FD0079";
+  if (value === "true") return theme.TEXT_POSITIVE;
+  if (value === "false") return theme.TEXT_DANGER;
+}
 
 export const StyledTextWrapper = styled.div`
   display: flex;
@@ -56,14 +62,20 @@ export const StyledKey = styled.span<{
 }>`
   font-weight: 500;
   color: ${({ theme, objectKey, parent }) =>
-    parent ? theme.NODE_KEY : objectKey ? "#5c87ff" : theme.TEXT_POSITIVE};
+    parent
+      ? theme.NODE_KEY
+      : objectKey
+      ? theme.OBJECT_KEY
+      : theme.TEXT_POSITIVE};
+  font-size: ${({ parent }) => parent && "14px"};
 `;
 
-export const StyledRow = styled.span<{ width: number }>`
+export const StyledRow = styled.span<{ width: number; value: string }>`
   height: 18px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 0 auto;
   width: ${({ width }) => `${width - 20}px`};
+  color: ${({ theme, value }) => getTypeColor(value, theme)};
 `;

src/constants/theme.ts

@@ -23,6 +23,7 @@ export const darkTheme: DefaultTheme = {
   BLACK_SECONDARY: "#23272A",
   SILVER_DARK: "#4D4D4D",
   NODE_KEY: "#FAA81A",
+  OBJECT_KEY: "#59b8ff",
 
   INTERACTIVE_NORMAL: "#b9bbbe",
   INTERACTIVE_HOVER: "#dcddde",
@@ -42,11 +43,12 @@ export const lightTheme: DefaultTheme = {
   BLACK_SECONDARY: "#F2F2F2",
   SILVER_DARK: "#CCCCCC",
   NODE_KEY: "#DC3790",
+  OBJECT_KEY: "#0260E8",
 
   INTERACTIVE_NORMAL: "#4f5660",
   INTERACTIVE_HOVER: "#2e3338",
   INTERACTIVE_ACTIVE: "#060607",
-  BACKGROUND_NODE: "#FFFFFF",
+  BACKGROUND_NODE: "#FAFAFA",
   BACKGROUND_TERTIARY: "#e3e5e8",
   BACKGROUND_SECONDARY: "#f2f3f5",
   BACKGROUND_PRIMARY: "#FFFFFF",

src/containers/Editor/LiveEditor/helpers.ts

@@ -48,7 +48,7 @@ export function getEdgeNodes(
         data: {
           isParent: el.parent,
         },
-        width: isExpanded ? 35 + longestLine * 8 : 180,
+        width: isExpanded ? 35 + longestLine * (el.parent ? 9 : 8) : 180,
         height,
       });
     } else {

src/typings/styled.d.ts

@@ -26,6 +26,7 @@ declare module "styled-components" {
     SILVER_DARK: string;
     PRIMARY: string;
     NODE_KEY: string;
+    OBJECT_KEY: string;
 
     INTERACTIVE_NORMAL: string;
     INTERACTIVE_HOVER: string;