styling prov/con container

Author: ragad-mohammed

src/app/containers/ProvConContainer.tsx

@@ -1,4 +1,4 @@
-import { width } from '@mui/system';
+import { color, width } from '@mui/system';
 import React, {useState} from 'react';
 import { ProvConContainerProps} from '../FrontendTypes';
 
@@ -118,17 +118,20 @@ const ProvConContainer = (props: ProvConContainerProps): JSX.Element  => {
                         cursor: "pointer",
                         fontWeight: "bold",
                         textDecoration: "underline",
-                        color: isExpanded ? "green" : "blue",
+                        color: isExpanded ? "#1f2937" : "#059669",
                     }}
                 >
                     {node.name}
                 </p>
 
                 {/* Render HookState if it exists */}
                 {isExpanded && node.componentData?.hooksState && (
+                    <div>
+                    {/* <h1 style={{fontWeight: "bold"}}>State:</h1> */}
                     <p style={{ whiteSpace: "normal" , overflowWrap: "break-word", padding: "20px"}}>
                          State: {JSON.stringify(node.componentData.hooksState)}
                     </p>
+                    </div>
                 )}
 
                 {/* Render Context Property if it exists */}
@@ -155,7 +158,7 @@ const ProvConContainer = (props: ProvConContainerProps): JSX.Element  => {
 
 
     return (
-        <div style={{ width: "300px" }}>
+        <div style={{ width: "260px"}}>
             {renderNestedObject(contextProvidersOnly)}
         </div>
     );