styling fixes

src/components/CustomNode/ObjectNode.tsx

@@ -33,7 +33,6 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
             data-x={x}
             data-y={y}
             key={idx}
-            value={JSON.stringify(val[1])}
           >
             <Styled.StyledKey objectKey>
               {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}

src/components/CustomNode/TextNode.tsx

@@ -12,20 +12,27 @@ const inViewport = true;
 
 const StyledExpand = styled.button`
   pointer-events: all;
-  position: absolute;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  top: 0;
-  right: 0;
-  padding: 0;
   color: ${({ theme }) => theme.TEXT_NORMAL};
   background: rgba(0, 0, 0, 0.1);
-  min-height: 0;
   height: 100%;
   width: 40px;
-  border-radius: 0;
   border-left: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
+
+  &:hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
+  }
+`;
+
+const StyledTextNodeWrapper = styled.div<{ hasCollapse: boolean }>`
+  display: flex;
+  justify-content: ${({ hasCollapse }) =>
+    hasCollapse ? "space-between" : "center"};
+  align-items: center;
+  height: 100%;
+  width: 100%;
 `;
 
 const TextNode: React.FC<
@@ -68,25 +75,26 @@ const TextNode: React.FC<
       hideCollapse={hideCollapse}
       hasCollapse={isParent && hasCollapse}
     >
-      {(!performanceMode || inViewport) && (
-        <Styled.StyledKey
-          data-x={x}
-          data-y={y}
-          data-key={JSON.stringify(value)}
-          parent={isParent}
-          hasToggle={hasCollapse}
-        >
-          <Styled.StyledLinkItUrl>
-            {JSON.stringify(value).replaceAll('"', "")}
-          </Styled.StyledLinkItUrl>
-        </Styled.StyledKey>
-      )}
+      <StyledTextNodeWrapper hasCollapse={isParent && !hideCollapse}>
+        {(!performanceMode || inViewport) && (
+          <Styled.StyledKey
+            data-x={x}
+            data-y={y}
+            data-key={JSON.stringify(value)}
+            parent={isParent}
+          >
+            <Styled.StyledLinkItUrl>
+              {JSON.stringify(value).replaceAll('"', "")}
+            </Styled.StyledLinkItUrl>
+          </Styled.StyledKey>
+        )}
 
-      {inViewport && isParent && hasCollapse && !hideCollapse && (
-        <StyledExpand onClick={handleExpand}>
-          <MdCompareArrows size={18} />
-        </StyledExpand>
-      )}
+        {inViewport && isParent && hasCollapse && !hideCollapse && (
+          <StyledExpand onClick={handleExpand}>
+            <MdCompareArrows size={18} />
+          </StyledExpand>
+        )}
+      </StyledTextNodeWrapper>
     </Styled.StyledForeignObject>
   );
 };

src/components/CustomNode/styles.tsx

@@ -17,17 +17,12 @@ export const StyledForeignObject = styled.foreignObject<{
   hideCollapse?: boolean;
   isObject?: boolean;
 }>`
-  display: flex;
   text-align: ${({ isObject }) => !isObject && "center"};
-  align-items: center;
-  justify-content: center;
   font-size: 12px;
-  flex-direction: column;
   overflow: hidden;
-  padding: 10px;
   color: ${({ theme }) => theme.TEXT_NORMAL};
-  cursor: pointer;
   pointer-events: none;
+  padding: ${({ isObject }) => isObject && "10px"};
 
   * {
     font-family: "Roboto Mono", monospace;
@@ -55,32 +50,37 @@ export const StyledForeignObject = styled.foreignObject<{
   }
 `;
 
+function getKeyColor(theme: DefaultTheme, parent: boolean, objectKey: boolean) {
+  if (parent) return theme.NODE_KEY;
+  if (objectKey) return theme.OBJECT_KEY;
+  return theme.TEXT_POSITIVE;
+}
+
 export const StyledKey = styled.span<{
   objectKey?: boolean;
   parent?: boolean;
-  hasToggle?: boolean;
+  value?: string;
 }>`
+  display: inline;
+  flex: 1;
   font-weight: 500;
-  color: ${({ theme, objectKey, parent }) =>
-    parent
-      ? theme.NODE_KEY
-      : objectKey
-      ? theme.OBJECT_KEY
-      : theme.TEXT_POSITIVE};
+  color: ${({ theme, objectKey = false, parent = false }) =>
+    getKeyColor(theme, parent, objectKey)};
   font-size: ${({ parent }) => parent && "14px"};
-  padding-right: ${({ hasToggle }) => hasToggle && "30px"};
   overflow: hidden;
   text-overflow: ellipsis;
+  padding: ${({ parent }) => parent && "10px"};
 `;
 
 export const StyledRow = styled.span.attrs<{
-  value: string;
+  'data-key': string;
   theme: DefaultTheme;
 }>((props) => ({
   style: {
-    color: getTypeColor(props.value, props.theme),
+    color: getTypeColor(props["data-key"], props.theme),
   },
-}))<{ value: string; theme: DefaultTheme }>`
+}))<{ 'data-key': string; theme: DefaultTheme }>`
+  display: block;
   height: 18px;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/ErrorContainer/ErrorContainer.tsx

@@ -11,12 +11,12 @@ const StyledErrorWrapper = styled.div`
   z-index: 1;
 `;
 
-const StyledErrorExpand = styled.button<{ error: boolean }>`
+const StyledErrorExpand = styled.div<{ error: boolean }>`
   position: relative;
   display: flex;
   width: 100%;
   padding: 4px 16px;
-  height: 36px;
+  height: 28px;
   border-radius: 0;
   justify-content: space-between;
   align-items: center;
@@ -25,12 +25,6 @@ const StyledErrorExpand = styled.button<{ error: boolean }>`
   pointer-events: ${({ error }) => !error && "none"};
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
   box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  cursor: pointer;
-
-  &:hover {
-    color: ${({ theme }) => theme.TEXT_DANGER};
-    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
-  }
 `;
 
 const StyledTitle = styled.span`
@@ -52,31 +46,19 @@ const StyledError = styled.pre`
   white-space: pre-line;
 `;
 
-export const ErrorContainer = ({ error }: { error: string }) => {
-  const [isErrorExpanded, setErrorExpanded] = React.useState(true);
-
+export const ErrorContainer = ({ hasError }: { hasError: boolean }) => {
   return (
     <StyledErrorWrapper>
-      <StyledErrorExpand
-        error={!!error.length}
-        onClick={() => setErrorExpanded(!isErrorExpanded)}
-      >
+      <StyledErrorExpand error={hasError}>
         <StyledTitle>
-          {error ? (
+          {hasError ? (
             <MdReportGmailerrorred size={20} />
           ) : (
             <MdOutlineCheckCircleOutline size={20} />
           )}
-          {error ? "Error" : "JSON Valid"}
+          {hasError ? "Invalid JSON" : "JSON Valid"}
         </StyledTitle>
-        {error &&
-          (isErrorExpanded ? (
-            <MdExpandLess size={22} />
-          ) : (
-            <MdExpandMore size={22} />
-          ))}
       </StyledErrorExpand>
-      {isErrorExpanded && error && <StyledError>{error}</StyledError>}
     </StyledErrorWrapper>
   );
 };

src/components/SearchInput/index.tsx

@@ -10,11 +10,13 @@ const StyledInputWrapper = styled.div`
   justify-content: space-between;
   background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
   border-radius: 4px;
-  padding: 4px 6px;
+  height: 28px;
 `;
 
 const StyledForm = styled.form`
   display: flex;
+  align-items: center;
+  padding: 4px 6px;
 `;
 
 const StyledInput = styled.input`
@@ -59,6 +61,11 @@ export const SearchInput: React.FC = () => {
     skip();
   };
 
+  const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setContent({ value: "", debounced: "" });
+  };
+
   return (
     <StyledInputWrapper>
       <StyledForm onSubmit={onSubmit}>
@@ -70,17 +77,18 @@ export const SearchInput: React.FC = () => {
           }
           placeholder="Search Node"
         />
+        <StyledSearchButton
+          type="reset"
+          aria-label="search"
+          onClick={handleClear}
+        >
+          {content.value ? (
+            <IoCloseSharp size={18} />
+          ) : (
+            <AiOutlineSearch size={18} />
+          )}
+        </StyledSearchButton>
       </StyledForm>
-      <StyledSearchButton
-        aria-label="search"
-        onClick={() => setContent({ value: "", debounced: "" })}
-      >
-        {content.value ? (
-          <IoCloseSharp size={18} />
-        ) : (
-          <AiOutlineSearch size={18} />
-        )}
-      </StyledSearchButton>
     </StyledInputWrapper>
   );
 };

src/constants/globalStyle.ts

@@ -25,6 +25,10 @@ const GlobalStyle = createGlobalStyle`
     }
   }
 
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
   .hide {
     display: none;
   }
@@ -40,7 +44,6 @@ const GlobalStyle = createGlobalStyle`
   button {
     border: none;
     outline: none;
-    -webkit-tap-highlight-color: transparent;
     background: transparent;
     width: fit-content;
     margin: 0;

src/containers/Editor/JsonEditor/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import parseJson from "parse-json";
 import MonacoEditor, { loader } from "@monaco-editor/react";
 import { ErrorContainer } from "src/components/ErrorContainer/ErrorContainer";
 import useConfig from "src/hooks/store/useConfig";
@@ -37,7 +36,7 @@ const StyledWrapper = styled.div`
 
 export const JsonEditor: React.FC = () => {
   const [value, setValue] = React.useState<string | undefined>("");
-  const [error, setError] = React.useState("");
+  const [hasError, setHasError] = React.useState(false);
 
   const json = useConfig((state) => state.json);
   const lightmode = useStored((state) => state.lightmode);
@@ -56,15 +55,15 @@ export const JsonEditor: React.FC = () => {
     const formatTimer = setTimeout(() => {
       try {
         if (!value) {
-          setError("");
+          setHasError(false);
           return setJson("{}");
         }
 
-        parseJson(value);
+        JSON.parse(value);
         setJson(value);
-        setError("");
+        setHasError(false);
       } catch (jsonError: any) {
-        setError(jsonError.message);
+        setHasError(true);
       }
     }, 1500);
 
@@ -73,7 +72,7 @@ export const JsonEditor: React.FC = () => {
 
   return (
     <StyledEditorWrapper>
-      <ErrorContainer error={error} />
+      <ErrorContainer hasError={hasError} />
       <StyledWrapper>
         <MonacoEditor
           height="100%"