diff --git a/src/constants/theme.ts b/src/constants/theme.ts index 266abda..6761487 100644 --- a/src/constants/theme.ts +++ b/src/constants/theme.ts @@ -11,7 +11,7 @@ export const darkTheme: DefaultTheme = { CRIMSON: "#DC143C", DARK_SALMON: "#E9967A", DANGER: "#F26522", - SEAGREEN: "#3BA55D", + LIGHTGREEN: "#90EE90", ORANGE: "#FAA81A", SILVER: "#B9BBBE", SILVER_DARK: "#4D4D4D" diff --git a/src/containers/LiveEditor/CustomNode/styles.tsx b/src/containers/LiveEditor/CustomNode/styles.tsx index 0dd1f60..6c292a9 100644 --- a/src/containers/LiveEditor/CustomNode/styles.tsx +++ b/src/containers/LiveEditor/CustomNode/styles.tsx @@ -1,49 +1,53 @@ import styled from "styled-components"; export const StyledTextWrapper = styled.div` -position: absolute; -display: flex; -justify-content: center; -align-items: center; -font-size: 12px; -width: 100%; -height: 100%; -overflow: hidden; -cursor: pointer; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; + width: 100%; + height: 100%; + overflow: hidden; + cursor: pointer; `; -export const StyledText = styled.pre<{ width: number; height: number }>` -display: flex; -justify-content: center; -flex-direction: column; -width: ${({ width }) => width}; -height: ${({ height }) => height}; -color: ${({ theme }) => theme.SILVER}; +export const StyledText = styled.pre<{ + width: number; + height: number; +}>` + display: flex; + justify-content: center; + flex-direction: column; + width: ${({ width }) => width}; + height: ${({ height }) => height}; + color: ${({ theme }) => theme.SILVER}; `; export const StyledForeignObject = styled.foreignObject<{ -width: number; -height: number; + width: number; + height: number; }>` -position: "relative" !important; -pointer-events: "none" !important; -width: ${({ width }) => width + "px"}; -height: ${({ height }) => height + "px"}; + position: "relative" !important; + pointer-events: "none" !important; + width: ${({ width }) => width + "px"}; + height: ${({ height }) => height + "px"}; `; export const StyledKey = styled.span<{ -bond?: boolean; -arrayValue?: boolean; + objectKey?: boolean; + parent?: boolean; }>` -color: ${({ theme, bond, arrayValue }) => - bond ? theme.SEAGREEN : arrayValue ? theme.ORANGE : theme.BLURPLE}; + font-style: ${({ parent, objectKey }) => !(parent || objectKey) && "italic"}; + color: ${({ theme, objectKey, parent }) => + parent ? theme.ORANGE : objectKey ? theme.BLURPLE : theme.LIGHTGREEN}; `; export const StyledRow = styled.div<{ width: number }>` -height: fit-content; -overflow: hidden; -text-overflow: ellipsis; -white-space: nowrap; -padding: 0 auto; -width: ${({ width }) => `${width - 20}px`}; -`; \ No newline at end of file + height: fit-content; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 0 auto; + width: ${({ width }) => `${width - 20}px`}; +`;