style ErrorContainer

src/containers/JsonEditor/ErrorContainer.tsx

@@ -4,6 +4,7 @@ import {
   MdExpandMore,
   MdExpandLess,
   MdReportGmailerrorred,
+  MdOutlineCheckCircleOutline,
 } from "react-icons/md";
 
 export type Error = {
@@ -18,18 +19,23 @@ interface ErrorContainerProps {
 
 const StyledErrorWrapper = styled.div``;
 
-const StyledErrorHeader = styled.a`
+const StyledErrorHeader = styled.button<{ error: boolean }>`
   display: flex;
+  width: 100%;
+  border-radius: 0;
   justify-content: space-between;
   align-items: center;
   background: ${({ theme }) => theme.BLACK_DARK};
-  padding: 6px 12px;
-  color: ${({ theme }) => theme.DANGER};
-  font-size: 22px;
+  padding: 4px 16px;
+  color: ${({ theme, error }) => (error ? theme.DANGER : theme.TEXT_POSITIVE)};
   cursor: pointer;
+  height: 28px;
+  border-bottom: 1px solid #1f2124;
+  pointer-events: ${({ error }) => !error && "none"};
 
   &:hover {
     color: ${({ theme }) => theme.DANGER};
+    box-shadow: none;
   }
 `;
 
@@ -37,15 +43,14 @@ const StyledTitle = styled.span`
   display: flex;
   justify-content: center;
   align-items: center;
-  font-weight: 600;
+  font-weight: 500;
   gap: 10px;
+  font-size: 16px;
 `;
 
 const StyledError = styled.pre`
   color: ${({ theme }) => theme.DANGER};
-  border: 1px solid ${({ theme }) => theme.SILVER_DARK};
-  border-left: none;
-  border-right: none;
+  border-bottom: 1px solid ${({ theme }) => theme.SILVER_DARK};
   font-size: 12px;
   padding: 12px;
   margin: 0;
@@ -60,20 +65,29 @@ export const ErrorContainer: React.FC<ErrorContainerProps> = ({
   return (
     <StyledErrorWrapper>
       <StyledErrorHeader
+        error={!!error.message}
         onClick={() =>
           setError((err: Error) => ({ ...err, isExpanded: !err.isExpanded }))
         }
       >
         <StyledTitle>
-          <MdReportGmailerrorred size={26} /> Error
+          {error.message ? (
+            <MdReportGmailerrorred size={20} />
+          ) : (
+            <MdOutlineCheckCircleOutline size={20} />
+          )}
+          {error.message ? "Error" : "JSON Valid"}
         </StyledTitle>
-        {error.isExpanded ? (
-          <MdExpandLess size={22} />
-        ) : (
-          <MdExpandMore size={22} />
-        )}
+        {error.message &&
+          (error.isExpanded ? (
+            <MdExpandLess size={22} />
+          ) : (
+            <MdExpandMore size={22} />
+          ))}
       </StyledErrorHeader>
-      {error.isExpanded && <StyledError>{error.message}</StyledError>}
+      {error.isExpanded && error.message && (
+        <StyledError>{error.message}</StyledError>
+      )}
     </StyledErrorWrapper>
   );
 };